Develop Reference

how to restrict access to a webpage if previouse page was not a specific page

I have a QR Code that brings users to PAGE A that immediately forwards to PAGE B. I want Page B to check if users came from PAGE A otherwise forwards them to PAGE C (basically say you need visit PAGE A first). The end result is that Scanning the QR Code allows access to PAGE B through PAGE A but someone can't start on PAGE B without previously being on PAGE A (unless they type it in) It's not foolproof by any means, but it's a deterrent.
On Page B I am using:
if (history.back!="[page a url]") {
location.assign("[page c url]");
}
but this doesn't seem to work.
BTW I'm hacking my way through learning any of this by trying to learn what I need to do what I need to do - please assume I know very little

By your tags, I see that you are using WIX. I'm not sure if you have access to server side there so my answer is in javascript. This isn't full proof as you can't trust anything sent from the browser.
On page A, use localStorage to set a variable visitedA to 1 then redirect to page B.
<script>
localStorage.setItem("visitedA","1");
location.href = "pageB.html";
</script>
On page B check if visitedA equals 0, then redirect to C.
<script>
let visitedA = localStorage.getItem("visitedA") || "0";
if(visitedA == "0"){
location.href = "pageC.html";
}
</script>

Using Document.referrer is a good and most straightforward solution to this problem.
https://developer.mozilla.org/en-US/docs/Web/API/Document/referrer
example:
<script>
// did user come from page a?
if (document.referrer.includes('page-a') {
// yes page-a was in the referrer
} else {
// no, referrer was empty or did not include page a
}
</script>

How to get Previous visited page URL in Javascript? [duplicate]

Is there any way to get the previous URL in JavaScript? Something like this:
alert("previous url is: " + window.history.previous.href);
Is there something like that? Or should I just store it in a cookie? I only need to know so I can do transitions from the previous URL to the current URL without anchors and all that.

document.referrer
in many cases will get you the URL of the last page the user visited, if they got to the current page by clicking a link (versus typing directly into the address bar, or I believe in some cases, by submitting a form?). Specified by DOM Level 2. More here.
window.history allows navigation, but not access to URLs in the session for security and privacy reasons. If more detailed URL history was available, then every site you visit could see all the other sites you'd been to.
If you're dealing with state moving around your own site, then it's possibly less fragile and certainly more useful to use one of the normal session management techniques: cookie data, URL params, or server side session info.

If you want to go to the previous page without knowing the url, you could use the new History api.
history.back(); //Go to the previous page
history.forward(); //Go to the next page in the stack
history.go(index); //Where index could be 1, -1, 56, etc.
But you can't manipulate the content of the history stack on browser that doesn't support the HTML5 History API
For more information see the doc

If you are writing a web app or single page application (SPA) where routing takes place in the app/browser rather than a round-trip to the server, you can do the following:
window.history.pushState({ prevUrl: window.location.href }, null, "/new/path/in/your/app")
Then, in your new route, you can do the following to retrieve the previous URL:
window.history.state.prevUrl // your previous url

document.referrer is not the same as the actual URL in all situations.
I have an application where I need to establish a frameset with 2 frames. One frame is known, the other is the page I am linking from. It would seem that document.referrer would be ideal because you would not have to pass the actual file name to the frameset document.
However, if you later change the bottom frame page and then use history.back() it does not load the original page into the bottom frame, instead it reloads document.referrer and as a result the frameset is gone and you are back to the original starting window.
Took me a little while to understand this. So in the history array, document.referrer is not only a URL, it is apparently the referrer window specification as well. At least, that is the best way I can understand it at this time.

<script type="text/javascript">
document.write(document.referrer);
</script>
document.referrer serves your purpose, but it doesn't work for Internet Explorer versions earlier than IE9.
It will work for other popular browsers, like Chrome, Mozilla, Opera, Safari etc.

If anyone is coming from React-world, I ended up solving my use-case using a combination of history-library, useEffect and localStorage
When user selects new project:
function selectProject(customer_id: string, project_id: string){
const projectUrl = `/customer/${customer_id}/project/${project_id}`
localStorage.setItem("selected-project", projectUrl)
history.push(projectUrl)
}
When user comes back from another website. If there's something in localStorage, send him there.
useEffect(() => {
const projectUrl = localStorage.getItem("selected-project")
if (projectUrl) {
history.push(projectUrl)
}
}, [history])
When user has exited a project, empty localStorage
const selectProject = () => {
localStorage.removeItem("selected-project")
history.push("/")
}

I had the same issue on a SPA Single Page App, the easiest way I solved this issue was with local storage as follows:
I stored the url I needed in local storage
useEffect(() => {
const pathname = window.location.href; //this gives me current Url
localstorage.setItem('pageUrl',JSON.stringify(pathname))
}, []);
On the next screen (or few screens later) I fetched the url can replaced it as follows
useEffect(() => {
const pathname = localstorage.getItem('pageUrl');
return pathname ? JSON.parse(pathname) : ''
window.location.href = pathname; //this takes prevUrl from local storage and sets it
}, []);

Those of you using Node.js and Express can set a session cookie that will remember the current page URL, thus allowing you to check the referrer on the next page load. Here's an example that uses the express-session middleware:
//Add me after the express-session middleware
app.use((req, res, next) => {
req.session.referrer = req.protocol + '://' + req.get('host') + req.originalUrl;
next();
});
You can then check for the existance of a referrer cookie like so:
if ( req.session.referrer ) console.log(req.session.referrer);
Do not assume that a referrer cookie always exists with this method as it will not be available on instances where the previous URL was another website, the session was cleaned or was just created (first-time website load).

Wokaround that work even if document.referrer is empty:
let previousUrl = null;
if(document.referrer){
previousUrl = document.referrer;
sessionStorage.setItem("isTrickApplied",false);
}else{
let isTrickApplied= sessionStorage.getItem("isTrickApplied");
if(isTrickApplied){
previousUrl = sessionStorage.getItem("prev");
sessionStorage.setItem("isTrickApplied",false);
}else{
history.back(); //Go to the previous page
sessionStorage.setItem("prev",window.location.href);
sessionStorage.setItem("isTrickApplied",true);
history.forward(); //Go to the next page in the stack
}
}

How to redirect to multiple url's using from javascript?

I have a requirement to clear the cookies and to redirect to a new url after clicking on a link. I wrote the below code which calls "logOffRedirectUrlForCookieDeletion" which is responsible to clear the cookies and redirect the application to the homepage and "myUrlAfterCookirDeletion" is the new url that needs to be redirected from the homepage after cookie deletion. If I use any one of the "window.location.href" statements, my code works absolutely fine but if I use two "window.location.href" statements only the second one is getting executed. Can someone please suggest me how to use 2 url redirection using window.location.href
ClearCookiesAndRedirect:function(redirectURL){
if (confirm("Do you want to leave the website?") == true) {
window.location.href = logOffRedirectUrlForCookieDeletion;
window.location.href = "myUrlAfterCookirDeletion";
} else {
return;
}
},

Add an iframe to delete cookies. That would load the cookie deletion page + not redirect, after that redirect:
iframe=document.createElement("iframe");
iframe.src="cookiedeletion.html";
iframe.onload=function(){
//cookies deleted lets redirect
window.location.href="newurl";
};
document.body.appendChild(iframe);
However, why not delete the cookies right on the page? Much easier...

How do you detect and prevent a user from accessing a web app from multiple browser tabs using php/javascript?

I have a web app that I would like to restrict to a single browser tab or window. So the idea is a user logs in and if they open a link in a tab/window or open a new browser tab/window it kills their session. I know many are against this but that's how the app needs to be.
The controller checks if the user is logged in via:
if (!isset($_SESSION['user_logged_in'])) {
Session::destroy();
header('location: '.URL.'login');
}
I have tried setting $_SESSION['user_logged_in'] to false if its true but then obviously you don't go any further than one page.
Is there a way to destroy the session when a new browser tab or window is opened? I'm guessing probably jquery/javascript but not across that side of things.

It's very complex to achieve, unfortunately.
And almost impossible to do it true cross-browser and supported by every browser.
Technically, every new browser tab doesn't differ from the latter, form server's point of view. They share cookies and session too.
The only things that differ is JavaScript session. Say, an example: a site that is fully AJAX-based. First page is always login page. Then everything's changed with AJAX. If you dare to open another tab with this site it will open the first page which is always logging you out be default, for example. This can make it possible, but it's very complex.
New technologies stack like localStorage might make this possible, where you can communicate between tabs sending messages in localStorage. But this isn't fully cross-browser and isn't supported by all browsers versions.
So if you are ok with only limited choice of latest browsers — then dig on localStorage and postMessage.

Just to piggy back on what Oleg said, it would be incredibly difficult since HTTP is stateless and browser tabs share data. One potential way of doing it COULD be on the front end, but a very specific set of circumstances would need to be present and they could easily be bypassed. IF the application is a SPA and the primary body is only loaded once, you could potentially generate a key on the body load and send that with each request. Then, if the body is reloaded (say in a new tab or new window), you could generate a new key which would start a new session.
However, the real question is why you would want to do this. Your user experience will suffer and no real security gains exist.

I have some solution and I want share it with you.
To restrict user to only one tab per session, you may use cookie. I describe here how you may build your webapp in order to archieve that goal.
Each time the web module needs to render the auth/login page, create and store a cookie with a given name. Let's call it browserName. The value of the cookie must be a generated value. You may use java.util.UUID if your programming language is java.
When the browser finished loading your auth/login page, set the browser's name with the generated cookie value. You have to know how to read cookie using JavaScript.
Each time the user load other page than auth/login page, check whether the current browser's name is that one stored in the cookie. If they are differents, prompt user and then you can run a snipt that reset session and redirect to auth/login page.
The following is an example of implementing what I've said.
Snipt to be added in the method that runs before your login page in shown Map<String, Object> v$params = new TreeMap<>();
v$params.put("path", "/");
FacesContext.getCurrentInstance()
.getExternalContext()
.addResponseCookie("browserName", UUID.randomUUID().toString(), v$params);
The mini JavaScript library that help you with cookie and other. Add it globally in your webapp.
/**
* http://stackoverflow.com/questions/5639346/shortest-function-for-reading-a-cookie-in-javascript
*/
(function() {
function readCookie(name, c, C, i) {
if (cookies) {
return cookies[name];
}
c = document.cookie.split('; ');
cookies = {};
for (i = c.length - 1; i >= 0; i--) {
C = c[i].split('=');
cookies[C[0]] = C[1];
}
return cookies[name];
}
window.readCookie = readCookie; // or expose it however you want
})();
// function read_cookie(k,r){return(r=RegExp('(^|;
// )'+encodeURIComponent(k)+'=([^;]*)').exec(document.cookie))?r[2]:null;}
function read_cookie(k) {
return (document.cookie.match('(^|; )' + k + '=([^;]*)') || 0)[2];
}
/**
* To be called in login page only
*/
function setupWebPage(){
window.name = read_cookie("browserName");
}
/**
* To be called in another pages
*/
function checkWebPageSettings(){
var curWinName = window.name;
var setWinName = read_cookie("browserName");
if( curWinName != setWinName){
/**
* You may redirect the user to a proper page telling him that
* your application doesn't support multi tab/window. From this page,
* the user may decide to go back to the previous page ou loggout in
* other to have a new session in the current browser's tab or window
*/
alert('Please go back to your previous page !');
}
}
Add this to your login page <script type="text/javascript">
setupWebPage();
</script>
Add this to your other page template <script type="text/javascript">
checkWebPageSettings();
</script>

Is there a way to figure out a visitor's prior URL before landing on my page?

Here's the situation:
I am working with a site that forwards users from (SITE A), to a mobile version (SITE B), like so:
<script type="text/javascript">
$(document).ready(function(){
if($(window).width() < 480){
window.location = "http://mysite.com/mobile-version"
}
});
</script>
Problem is, we still need to offer users the option to return to (SITE A) from within (SITE B), but with that script in place it's just going to run the script again when users request (SITE A) and return to (SITE B).
Can an IF/ELSE statement pull the user's last visited page/site and say well...you're visiting (SITE A) from (SITE B), so no need for the re-direct?

The DOM property you're looking for is document.referrer.
It returns a string containing the page the user was on before they came to this page. i.e.
var prevPage = document.referrer;
if (!prevPage.match(/*SITE A*/)){
//Do Something
}

A server side session would best for complete cross-browser support but if you want to do it on the client side you can use HTML 5 LocalStorage if both the mobile and desktop site are on the same domain.
On the mobile site, when the user clicks to show the desktop site, store a value in localStorage:
// user wants to go to desktop site
localStorage.setItem("no-mobile-redirect", true);
window.location = 'http://desktopsite';
On the desktop site:
$(document).ready(function(){
if($(window).width() < 480){
var localVar = localStorage.getItem("no-mobile-redirect");
if(!localVar){ // only redirect if the no-mobile-redirect is not TRUE
window.location = "http://mysite.com/mobile-version"
}
}
});

Racheet's answer is correct, as far as it goes, however it's not safe to rely on this. Some web browsers can be configured to not send a REFERER header for privacy reasons, and some firewalls/routers will do this too.
Your best bet is to instead only perform the redirect if a querystring (or form) parameter is not present. For example:
"http://mysite.a.com/" - will redirect to Site B
"http://mysite-b.com/" - user is now at the mobile site, but clicks a 'view full site link'...
"http://mysite-a.com/?noredirect=true" - you note the parameter and do not redirect.
Other alternatives could perhaps involve using cookies or localstorage, but again you need to consider the possibility that the user's client doesn't support those features or has them turned off.

Just offering another solution.
Use a parameter in the URL when redirecting to desktop: http://mysite.com?rd=false
$(document).ready(function () {
if (window.location.indexOf("rd=false" != -1) return;
if($(window).width() < 480){
window.location = "http://mysite.com/mobile-version"
}
});
Come to think about it: a cookie would be more practical...