Conditionally use window.history.back(-1) if previous page is not from the same domain

Question

I am currently building a site using React and GatsbyJS and trying to conditionally add a navigation window.history.back(-1); if the previous page was part of the same domain.

An example is

navigateBack = () => {
  if (window !== undefined) {
    window.history.back(-1);
  }
};

note that if (window !== undefined) allows window to be used without server side rendering.

How can I check the previous page before running this function.

For example is the user navigated from a external link I want to use navigate('/stories/'), else if the user came from an internal page, i.e. '/stories/2/' I want them to go back using window.history.back(-1);

score 3 · Answer 1 · answered Jan 25 '20 at 23:44

3

I've had to address this by checking to make sure there's a history to go to, and then by verifying that the current host can be found in the referrer. If those are found then I know they came from within my site, so I go back; otherwise, I navigate them elsewhere.

if(window.history.length > 1 && 
document.referrer.indexOf(window.location.host) !== -1) {
  window.history.back();
}
else {
  <do something else>
}

answered Jan 25 '20 at 23:44

cjn

1,331
1
16
22

I understand there are security tools (AV) that will strip the referrer from every request. Or even browser security settings. How do you get around this? Or is it such an edge case you dont worry about it? – johnw182 Apr 24 '22 at 17:29

score 1 · Accepted Answer · answered Apr 01 '19 at 14:32

Gatsby has an api that'll tell you the previous location. Perhaps you can use it together with document.referrer like @ATT suggested to check if previous url were from the same domain.

// gatsby-browser.js

exports.onRouteUpdate = ({ location, prevLocation }) => {
  if (prevLocation || document.referrer.includes(SITE_NAME)) {
    // same domain
  }
}

Alternatively, if you want to have previous location information in your React component, check out the answers to this other gatsby question.

Side note: document.referrer will be blank ("") instead of null or undefined if there were no referrer (site omit referrer, or direct)

score 0 · Answer 3 · answered Apr 01 '19 at 10:29

0

You can get the URL of the previous page by document.referrer.

answered Apr 01 '19 at 10:29

ATT

337
3
10

Thank you. Could you perhaps elaborate? Using `navigateBack = () => { if (window !== undefined) { if (document.referrer.includes(config.siteUrl)) { window.history.back(-1); } else { navigate('/stories/'); } } };` as per your suggestion but when `console.log(document.referrer);` nothing is shown in the console... it's not `null` nor `undefined` just blank. – Darren Apr 01 '19 at 11:27

score 0 · Answer 4 · answered Apr 01 '19 at 12:11

0

If you are using React Router, you can use the following snippet.

if(browserHistory.getCurrentLocation().key === null) {
   browserHistory.push(customRoute); // push to custom route
} else {
   browserHistory.go(-1); // go back normally
}

answered Apr 01 '19 at 12:11

Vinayak Bagaria

162
2
6

1

Thank you. I am trying to use Reach-Router but yes this is how I would do it if not. – Darren Apr 01 '19 at 12:16

score 0 · Answer 5 · answered Jun 28 '21 at 10:06

0

Answered here for a version that works also when the window is "new" and the referrer might not be reliable https://stackoverflow.com/a/68161306/1348517

answered Jun 28 '21 at 10:06

manuel-84

2,582
1
23
23

Conditionally use window.history.back(-1) if previous page is not from the same domain

5 Answers5