How to detect if a web page is running from a website or local file system?

Question

This question has been asked before, but none of the provided answers are correct. I am not allowed to comment to the the original question (or answers) so I am creating a new question as has been suggested to me.

How to detect if a web page is running from a website or local file system

I need to detect if a user has accessed a specific page through a Safari Web Archive, or by going to the proper web url.

None of the answers on the linked question work with Safari webarchives. The accepted answer was this :

switch(window.location.protocol) {
   case 'http:':
   case 'https:':
     //remote file over http or https
     break;
   case 'file:':
     //local file
     break;
   default: 
     //some other protocol
}

However, for some reason, Safari webarchive files seem to behave like they are being accessed remotely on the server. When testing for the location protocol, it always returns http, never file://

The only thing different inside a safari webarchive seems to be the mimetype of the file itself, being 'application/x-webarchive' But there seems to be no reliable way to detect the mime type of the current page.

I'd love to find a proper solution to detect a local page from a remote accessed page.

Answer 1

I know this question is super old, but I also needed a solution for this. After not finding a good answer anywhere, this is what I ended up coming up with after a lot of testing.

jQuery(document).ready(function () {
    // Check if the page is being loaded from a local cache
    if(jQuery('body').hasClass('localProtection')) {
        window.document.location = 'https://example.com/somepage/';
        return;
    } else {
        jQuery('body').addClass('localProtection');
    }
});

When the page is initially loaded from the remote site, a class of "localProtection" is added to the body element. If the page is then saved locally by the browser, this class is saved along with the body element. Upon loading the page, we check if this class is already present and take an action -- in my case, redirect back to the original site. This is similar to how an eFUSE prevents downgrading of firmware on some devices.

This worked on Safari, Chrome, and Firefox for me.