Is there a way to determine if a webpage is being accessed from a website or from a local file system?

While this question has been raised in the past, none of the answers provided seem to be accurate. Unfortunately, I am unable to comment on the original question or answers. Thus, following suggestions given to me, I have decided to create a new question.

How can one detect if a web page is running from a website or the local file system?

The specific issue at hand is detecting whether a user has accessed a particular page through Safari Web Archive or by entering the correct web URL.

Notably, the solutions provided in the linked question do not work with Safari webarchives. The accepted answer suggests utilizing the following check:

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, it is noted that Safari webarchive files behave as though they are being remotely accessed on the server. Even upon testing for location protocol, it consistently returns http instead of file://

It appears that the only distinguishing factor within a safari webarchive is the mimetype of the file itself, designated as 'application/x-webarchive'. Yet, there seems to lack a dependable way to identify the mime type of the current page.

I am hopeful to come across a viable solution to differentiate between a locally stored page and one accessed remotely.

Answer №1

Although this question may be dated, I also found myself searching for a solution to it. Despite my efforts to find a satisfactory answer elsewhere, I ended up devising the following after extensive testing.

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

Upon initial loading of the page from the remote site, a "localProtection" class is appended to the body element. If the page is subsequently saved locally by the browser, this class remains attached to the body element. Upon reloading the page, we verify if this class is already in place and take appropriate action - in my scenario, redirecting back to the original site. This process mirrors how an eFUSE prevents firmware downgrades on certain devices.

This solution has been successful for me on Safari, Chrome, and Firefox.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unexpected state being returned by Vuex

I am encountering an issue with a pop-up modal that is not behaving as expected. The condition for the pop-up to appear is if the user has no transactions, which is determined by checking the length of the depositHistory array. If the length is greater tha ...

Can the variable name within a function be retrieved?

How can I retrieve the variable name (user_name1 or user_name2) from a sample function (GetUserName()) within itself? This variable name is required to create an object with the same name on the server side for data synchronization purposes. function GetU ...

Setting model value in Angular 2 and 4 from loop index

Is it possible to assign a model value from the current loop index? I've tried, but it doesn't seem to be working. Any suggestions on how to achieve this? Check out this link for my code <p *ngFor="let person of peoples; let i = index;"& ...

Using Vue-router and Typescript with beforeEnter guard - utilizing validated data techniques

As I utilize Vue along with vue-router and typescript, a common scenario arises where a single page is dedicated to displaying a Photo component. A route includes a beforeEnter guard that checks my store to verify the existence of the requested photo. ...

The "Read more" feature is not functional on mobile devices

I am encountering issues with my Wordpress blog on mobile screens. The "read more" button is not functioning, and the screen size does not fit properly on mobile devices. Visit abood250.com for more information. CSS Styling: /* =Global ----------------- ...

Can someone provide guidance on how to properly format the Jquery Datepicker?

Seeking guidance on how to customize the Jquery datepicker format. My goal is to have it display as dd/mm/yyyy exclusively, but currently, it is showing as mm/dd/yyyy. I attempted this solution without success: $(function() { $( "#datepicker" ...

What is the significance of using composability over the deprecated method in Reactjs Material-UI menuItems?

I have taken over a project that was built using an older version of react, and I am currently in the process of updating it. However, I encountered console errors right off the bat. Error : bundle.js:6263 Warning: The "menuItems" property of the "Left ...

Spontaneous Link with JQuery and Colorbox

Just to clarify, I have no programming experience so please explain everything in simple terms. I am currently using a .js script within SharePoint and it's working perfectly! <!DOCTYPE html> <html> <head> <meta charset= ...

Is it possible to verify the user's authentication by confirming the presence of a JWT in their localStorage?

I am currently working on a project that requires JWT authentication. I have set up a registration form and login page where users receive an authorityToken and it is saved in localStorage. Once the user logs into their account : ` $("#btnLogin").click( ...

Mouseover feature for image is functioning, but having issues with alignment

I am currently working on displaying images upon mouse over actions. While the functionality is working perfectly, I am facing an issue where the displayed images appear below and the last image takes up space at the bottom. To rectify this problem, I woul ...

Refining keys within an array of objects

If I have an array of objects retrieved from a Node Repository like this: data = [ { title: "JavaScript Basics", author: "John Smith", year: 2020 }, { title: "Node.js Essentials", ...

The PHP-generated table is not being appended to the specified div with jQuery

I am currently working on developing a webpage that displays live forex rates to users. I am pulling the values from a feed and echoing them into a table. My goal now is to use jQuery to show this table to the user. The issue I am facing is that when I tr ...

Is it possible to create tabs using Ajax without using jQuery?

Exploring the realm of tabs that dynamically load content into a div without redirecting to another page unveils numerous possibilities. Although the existing examples mostly rely on ajax with jQuery or similar libraries, I am inclined towards exploring a ...

What could be causing Next.js middleware to run repeatedly?

Recently, I set up a brand new Next.js project using npx create-next-app@latest --typescript. Upon completing the installation (version 13.3.4), without making any modifications to existing files, I introduced a new file named middleware.ts within the src ...

What causes the website to malfunction when I refresh the page?

I utilized a Fuse template to construct my angular project. However, upon reloading the page, I encountered broken website elements. The error message displayed is as follows: Server Error 404 - File or directory not found. The resource you are looking fo ...

storing data in local storage using JavaScript

As someone new to coding, my aim is to create a basic "daily planner" page where users can input text on different lines. I've been attempting to use local storage for this task, but seem to be running into some issues. I've experimented with get ...

Enable the jQuery UI Autocomplete feature with Google Places API to require selection and automatically clear the original input field when navigating with the

I am currently using a jquery ui autocomplete feature to fetch data from Google Places... The issue I am experiencing is that when the user navigates through the suggestions using the up and down arrows, the original input also appears at the end. I would ...

Ways to automatically refresh a page in Javascript after a short period of user inactivity

Similar Question: How Can I Modify This Code To Redirect Only When There Is No Mouse Movement I am looking to update a web page automatically if the user is inactive, specifically through key presses or mouse clicks using Javascript. ...

Padding for the initial element in a carousel display

I am currently working on implementing owl carousel with stage padding. My goal is to use the carousel with loop:false, and have the first item displayed without left padding, while maintaining consistent padding for both items on the left and right after ...

How to style the second child div when hovering over the first child div using makeStyles in Material UI

I am working on a web project with a parent div and two child divs. I need to apply CSS styles to the second child div when hovering over the first child div. Below is the structure of the render method. <div className={classes.parent}> <div c ...