What Is This Page?
This page can detect if another page has linked here with rel="opener" or rel="noopener".
- If the page linked here with
rel="opener", this page will have access to the previous page’swindow.openerobject. - If the page linked here with
rel="noopener", this page will not have access to the previous page’swindow.openerobject.
Does this page have access to the previous tab’s window.opener object? NO
How Does it Work?
If the window.opener object is not null then the window.opener.location can be manipulated. This simple JavaScript code does just that.
if (window.opener) {
window.opener.location = 'malicious.html'; // change the previous page by manipulating its window.opener location
}Doing this will change the content of page that has linked here.
Why Does it Matter?
Let’s say a link from a Facebook post doesn’t use rel="noopener". The destination page changes that tab to an unsuspecting Facebook login screen. When the user returns to this page, he unknowingly logs in again, but unbenounced to him, he just gave his Facebook credentials to a hacker.
Additionally, if the destination page is using a lot of resources, the performance of your page will be diminished since both pages might share the same process.
Other ways to exploit the rel="opener" vulnerability is by loading pages with malware, inappropriate content, or advertisements in order to earn money.
What Can You Do?
Users should use a modern browser. Nowadays, most modern browsers realize this security vulnerability and automatically default to the safer rel="noopener" behavior.
Developers should be explicit with external links by using rel="noopener" as recommended by web.dev, especially with user generated content like comments, forums, and posts.