First, friendship links
Links are links to each other’s websites on their own. Must be able to find the website address and website name in the web code, and the website name can be displayed when browsing the web, so that users can find their own website from the cooperative website, to achieve the purpose of mutual promotion.
The friendship link is generally realized with a link, which is placed at the bottom of the portal site.
< a href = "https://www.xxx.com/" target = "_blank" > XXX site < / a >Copy the code
Two, where is the knife
I’m gonna stab you with a knife. Where’s that knife? A knife is window.opener!
What is window.opener? Use an example to introduce.
For example, open page B through A link on page A, and window.opener can access the window object on page A from page B.
Three, how to stab
For example, in page B:
-
Execution window. Opener. The location. The href = ‘https://www.xxx.com/’, at A open A page and A page the same page, induce unsafe operation such as the user to enter A password;
-
Execution window. Opener. The document. The getElementsByTagName (‘ body ‘) [0]. InnerHTML = ‘stabbed a knife or you’ Change the contents of page A;
And so on, malicious operations that can be performed on window objects.
Four, how to prevent
Label a with rel = “noopener”, for example
<a href="https://www.xxx.com/" rel =" noopener" target="_blank">Copy the code
Rel =noopener supports chrome49 and opera36, firefox is not supported, for compatibility needs to add rel=noreferrer.
<a href="https://www.xxx.com/" rel =" noopener noreferrer" target="_blank">Copy the code
Five, extension,
What if I use JS to open the outer chain?
function openUrl(url) {
let open = window.open();
open.opener = null;
open.location= url;
}
Copy the code
Browsers not compatible with the above approach?
function openUrl(url) {
let a = document.createElement('a');
a.rel = 'noopener noreferrer';
a.target = "_blank";
a.href = url;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
Copy the code