聊聊 rel=noopener

CollinPeng 發布于2019-08-01 17:02 / 2211人閱讀

摘要：同步自我的博客最近梳理團隊時，在的配置中發現了這么一項官方文檔的介紹大概是這樣的如果你需要用標簽打開一個標簽頁時，你會使用這個屬性，此時你需要添加這就讓人很迷惑了，這倆屬性是干什么的呢，一下方才知道，它是為了解決安全問題。

同步自我的博客

最近梳理團隊 eslint 時，在 airbnb 的配置中發現了這么一項

"react/jsx-no-target-blank": 2

官方文檔的介紹大概是這樣的

如果你需要用 a 標簽打開一個標簽頁時，你會使用 target="_blank" 這個屬性，此時你需要添加 rel="noreferrer noopener"

這就讓人很迷惑了，這倆屬性是干什么的呢，google 一下方才知道，它是為了解決安全問題。

當你使用 target="_blank" 打開一個新的標簽頁時，新頁面的 window 對象上有一個屬性 opener，它指向的是前一個頁面的 window 對象，因此，后一個頁面就獲得了前一個頁面的控制權，so 可怕！！

比如的 a 標簽是這樣 打開連接 ，打開后在控制臺輸入 window.opener.alert(1) 看看？

甚至在跨域的情況下他也可以生效，比如打開 鏈接 后，你可以使用 window.opener.location.replace 更改前一個頁面的 url。

那么，為了避免這種情況，就需要咱們的主角登場了！

比如你的鏈接現在變成了這樣 鏈接  ，再打開后你會發現 window.opener 已經被置為了 null，如果是一些舊的瀏覽器，可以使用 rel=noreferrer，它不僅禁用了 window.opener，后一個頁面也無法獲取到 referrer，再不行，可以利用 js 來打開新的頁面，之后將 opener 置為 null 來完成這個功能

var otherWindow = window.open();
otherWindow.opener = null;
otherWindow.location = url;

參考文檔
https://html.spec.whatwg.org/...
https://mathiasbynens.github....

GPU云服務器云服務器 noopener rel 聊聊聊聊webrtc網關

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50909.html

你不曾察覺的隱患：危險的 target="_blank" 與 “opener”

摘要：惡意網站根據來偽造一個足以欺騙用戶的頁面，并展示出來期間還可以做一次跳轉，使得瀏覽器的地址欄更具有迷惑性。而如果在鏈接中加入了，則此時兩個標簽頁將會互不干擾，使得原頁面的性能不會受到新頁面的影響。在網頁中使用鏈接時，如果想要讓瀏覽器自動在新的標簽頁打開指定的地址，通常的做法就是在 a 標簽上添加 target等于_blank 屬性。然而，就是這個屬性，為釣魚攻擊者帶來了可乘之機。 s...

venmos 2019-08-02 16:05 評論0 收藏0
你不曾察覺的隱患：危險的 target="_blank" 與 “opener”

摘要：惡意網站根據來偽造一個足以欺騙用戶的頁面，并展示出來期間還可以做一次跳轉，使得瀏覽器的地址欄更具有迷惑性。而如果在鏈接中加入了，則此時兩個標簽頁將會互不干擾，使得原頁面的性能不會受到新頁面的影響。在網頁中使用鏈接時，如果想要讓瀏覽器自動在新的標簽頁打開指定的地址，通常的做法就是在 a 標簽上添加 target等于_blank 屬性。然而，就是這個屬性，為釣魚攻擊者帶來了可乘之機。 s...

EsgynChina 2019-08-23 12:00 評論0 收藏0
你不曾察覺的隱患：危險的 target="_blank" 與 “opener”

摘要：惡意網站根據來偽造一個足以欺騙用戶的頁面，并展示出來期間還可以做一次跳轉，使得瀏覽器的地址欄更具有迷惑性。而如果在鏈接中加入了，則此時兩個標簽頁將會互不干擾，使得原頁面的性能不會受到新頁面的影響。在網頁中使用鏈接時，如果想要讓瀏覽器自動在新的標簽頁打開指定的地址，通常的做法就是在 a 標簽上添加 target等于_blank 屬性。然而，就是這個屬性，為釣魚攻擊者帶來了可乘之機。 s...

jackwang 2019-06-21 16:49 評論0 收藏0
Security risk for opening new tabs or windows

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-noo...

lanffy 2019-06-21 16:47 評論0 收藏0
使用<a>標簽時，你可能會忽略的一個安全問題

摘要：當一個外部鏈接使用了的方式，這個外部鏈接會打開一個新的瀏覽器。此時，新頁面會打開，并且和原始頁面占用同一個進程。筆者的總結這是一篇很短的文章，主要介紹了在使用標簽打開一個新窗口過程中的安全問題。本文首發于公眾號: 符合預期的CoyPan本文章翻譯于：https://medium.com/front-end-weekly/prevent-sending-http-referer-hea...

rozbo 2019-08-02 14:05 評論0 收藏0