Q16: Refer Policies

[00:00:00]
>> Question 16, which statements are true? A, noopener is used to prevent the original page from accessing the window object of the newly open page. Noreferrer can be used to prevent the newly opened page from accessing the window object of the original page. Noopener and norefer can only be used with HTTPS.

[00:00:20]
Noopener can be used to prevent tabnabbing or the default Referrer-Policy is no-refer-one-downgrade. Which statements are true? It's only B, noreferrer can be used to prevent the newly opened page from accessing the window object of the original page and D, noopener can be used to prevent tabnabbing. So first kind of an example, let's say we have a community resources page here.

[00:00:45]
And this is just a lot of cards with link to external resources. So external websites and we're using target="_blank". So whenever user clicks on it, it opens that new page in a new tab. Now usually, this tab can access window.opener and this has access to the window object of the page that opened that window.

[00:01:05]
Now what can happen is that if the developers aren't so nice they can change the developer location to maybe evil site. I don't know what happened right there. But anyway, and then when a user would click back they would be redirected to this site without knowing, cuz they think they're just going back to the site where they navigated from.

[00:01:24]
And in some cases this is still evil site. This is not the website where we came from. They're like, oops, now your session has expired. If they know exactly where you came from, so now you're giving your credentials to this evil site, even though you think you're on the other side or on the site you came from.

[00:01:40]
This is called tapnabbing or browser hijacking, yeah, cuz you're basically hijacking a user's navigation state. So with target=_"blank", we can use the no opener to ensure that window.opener always just returns null, so that can't happen, they can't change that value. Now currently in Chrome, and I'm not sure how it isn't in other browsers, but when you use target="_blank" rel noopener is implied, so you don't necessarily always have to type it again.

[00:02:09]
But if your users are on older browsers, this is still very good to just add it, just to make sure. Then we have another one. I guess we're doing the same thing, but now they can also, so in the URL bar of the website where we came from, we now have kind of a sensitive query parameter.

[00:02:26]
We have the userID. Now this could have been anything else, just any query parameter that might be sensitive to that user. So on the page that just opened, they can see the document.referrer. So the page that referred them to that new page, which you often maybe use when you use for analytics or tracking, where did this opener come from?

[00:02:47]
But now they also have access to that query program. Maybe this is a sensitive user ID and they can see that, and they can track that, they can do whatever they wanna do with that. So for that, we can use a noreferrer. So this ensures that document.referrer always just returns an empty string, but also document.referrer, make sure that noopener is also implied.

[00:03:03]
So whenever you're using this, you're basically also using noopener. So window.opener is also null. But it's always good to add both noreferrer, noopener for browsers that may not support noreferrer but do support noopener. All the all the good stuff browser, yep. So A is false, noopener is used to prevent the original page from accessing the window of the newly opened page.

[00:03:30]
It's reversed, right? So, noopener is used to prevent the newly opened page from accessing the original page's window object. And then B is true, which is a bit tricky, cuz it can be used to prevent the newly opened page from accessing the window object of the original page, even though that's not it's main intention, it's more to make sure that the referrer header is omitted when navigating to that page.

[00:03:54]
But it also implies that, or it also adds noopener, kind of implicitly, right? Noopener and noreferrer can only be used with HTTPS is false, you can also use it with HTTP. While we saw how noopener could be used to prevent tabnabbing, right? To change that location, when you can't do that anymore.

[00:04:11]
And the default Referrer-Policy is no-referrer-when-downgrade. This used to be the case, and so I believe 2020, 2019, but now it is the strict origin when cross origin. So we can use this Referrer-Policy to kind of be in some cases include the referrer in some cases don't. So for example, the no-referrer-when-downgrade means if you go from HTTPS to HTTP, then don't include the referrer, cuz it's insecure.

[00:04:39]
But now it's strict origin when cross-origin. So if it's cross-origin, you only include the origin of the referrer. So if we go back to this one, it would, for example, only include www.website.com, but not any path or any parameters, stuff like that. You can overwrite this on an anchor tag as well to say refer a policy should be maybe noreferrer or, I don't know, you can just adapt it to the way that you need it.

[00:05:09]
To also ensure that maybe other pages still have the right tracking, cuz referrers are still, it's not a bad thing to know the referer of other navigation. They still have a lot of use cases. Yeah, that made sense? So yeah, just make sure, I mean, even though when you're using target="_blank", noopener is implied, still just make sure that if you have a lot of users and older browsers, this is still a very good thing to add.