Security risk for opening new tabs or windows
source link: https://www.tuicool.com/articles/hit/fEBbUrE
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Background
Today eslint reports an error when I introduce eslint-plugin-react
error Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener react/jsx-no-target-blank
Why
Opening a new tab/window, either by hyperlinks (i.e <a> tag with target attribute set to _blank
) or programmatically calling window.open
, will grant the newly-opened tab/window access back to the originating tab/window via window.opener
. Therefore, the newly opened tab/window can then change the window.opener.location
to redirect to the phishing page in the background, or execute some JavaScript on the opener-page on your behalf.
How to fix
Add rel="noopenner"
to outgoing links. E.g.
<a href="https://abc.com" target="_blank" rel="noopener">
-
Specify
noopener
in window features
window.open('https://abc.com', 'security', 'noopener');
-
Reset
opener
property
Note: this technique is subject to Same Origin Policy
let nw = window.open('https://abc.com', 'security'); nw.opener = null;
Reference
Notice
- If you want to follow the latest news/articles for the series of my blogs, Please 「Watch」 to Subscribe.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK