資訊專欄INFORMATION COLUMN
摘要：新頁面中有一個按鈕，告訴打開我的那個頁面，我喜歡林志玲。點擊新頁面的按鈕然后回到第一個頁面，發(fā)現(xiàn)第一個頁面多出來了一排紅色的文字我喜歡林志玲。
最近在開發(fā)一個react項目，項目是用create-react-app腳手架創(chuàng)建的，當我在我的項目的菜單欄中添加了一個打開一個外鏈的a標簽時，我收到了一個來自create-react-app的警告信息，信息內容如下
意思就是說“在沒有rel="noopener noreferrer"屬性的a標簽中使用target="_blank"存在一定的風險”
這個提示瞬間把我吸引了，以前關于a標簽收到的提示都是沒有設置alt屬性啊什么的，但是也只是提示我說為了顯示的友好什么的，這次竟然提示我有風險，面對這種問題，必須一探究竟啊。
查閱了一些資料得到了如下關于a標簽一個介紹
當一個外部鏈接使用了target=_blank的方式，這個外部鏈接會打開一個新的瀏覽器tab。此時，新頁面會打開，并且和原始頁面占用同一個進程。這也意味著，如果這個新頁面有任何性能上的問題，比如有一個很高的加載時間，這也將會影響到原始頁面的表現(xiàn)。如果你打開的是一個同域的頁面，那么你將可以在新頁面訪問到原始頁面的所有內容，包括document對象(window.opener.document)。如果你打開的是一個跨域的頁面，你雖然無法訪問到document，但是你依然可以訪問到location對象。
不看不知道一看嚇一跳有木有。主要是兩個點是我以前從未在意的
用target="_blank"方式打開的tab和原始頁面占用同一個進程（UI進程）
新打開的頁面能獲取到原始頁面的document。
第一個問題不用我說都知道是非常需要注意的，新的頁面中的所有行為都會間接影響到原始頁面的性能。
這里主要研究第二個問題。為此，我做了小小的實驗。
上圖解釋：
首先打開了第一個頁面，第一個頁面只有一個“打開一個新頁面”的a標簽
點擊這個鏈接，打開了一個新頁面。新頁面中有一個按鈕，“告訴打開我的那個頁面，我喜歡林志玲”。
點擊新頁面的按鈕然后回到第一個頁面，發(fā)現(xiàn)第一個頁面多出來了一排紅色的文字“我喜歡林志玲”。
停在第一個頁面5s鐘，第一個頁面自動跳轉到了百度首頁。
上面兩個頁面的代碼分別如下：
opener-test.html
打開一個新頁面
opener-test-2.html
我是新打開的頁面
新的頁面不僅往原始頁面添加了一段話，而且還讓他離開了原來的頁面。
注：在上面的例子中，兩個頁面位于同一個域下面，如果兩個頁面位于不同的域，那上面的第一個效果就是不行的，因為不同域的情況下，新頁面拿不到opener對象的document，但是location對象是可以拿到的，所以第二個效果任然有效。
怎么禁止上面的行為呢？按照create-react-app的提示信息，給連接加上rel屬性，如下：
上面的rel屬性值多了一個noreferrer它的作用和noopener是一樣的，只是適用于低版本的瀏覽器。
這樣處理后，新打開的頁面的window對象上就沒有opener和referrer對象了。
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/53592.html
摘要：通過裝飾器或者利用時調用的函數(shù)來進行使用下面代碼中當或者發(fā)生變化時，會監(jiān)聽數(shù)據(jù)變化確保通過觸發(fā)方法自動更新。只能影響正在運行的函數(shù)，而無法影響當前函數(shù)調用的異步操作參考官方文檔用法裝飾器函數(shù)遵循中標準的綁定規(guī)則。 前言: 本文基于React+TypeScript+Mobx+AntDesignMobile技術棧,使用Create-React-App腳手架進行一個移動端項目搭建，主要介紹項...
摘要：這個選項看意思就知道了，默認使用來安裝，運行，如果你沒有使用，你可能就需要這個配置了，指定使用。 2018-06-13 更新。昨天突然好奇在Google上搜了一波關于create-react-app 源碼的關鍵詞，發(fā)現(xiàn)掘金出現(xiàn)好幾篇仿文，就連我開頭前沿瞎幾把啰嗦的話都抄，我還能說什么是吧？以后博客還是首發(fā)在Github上，地址戳這里戳這里??！轉載求你們注明出處、改編求你們貼一下參考鏈...
摘要：相信用的同學也不少找到函數(shù)在其中中添加啟用編譯。。。react 最近已經(jīng)開始使用react技術棧了，從頭開始搭建項目，有必要的記錄一下配置的過程以及項目分層的思路，這次后臺項目采用的主要采用react-create-app腳手架以及Ant DesignUI 以及多語言react-intl create-react-app 這是官方維護的腳手架應用 我們一般也采用這個 $ npm or c...
react 最近已經(jīng)開始使用react技術棧了，從頭開始搭建項目，有必要的記錄一下配置的過程以及項目分層的思路，這次后臺項目采用的主要采用react-create-app腳手架以及Ant DesignUI 以及多語言react-intl create-react-app 這是官方維護的腳手架應用 我們一般也采用這個 $ npm or cnpm $ npm install create-react...
閱讀 1238·2021-11-11 16:54
閱讀 1750·2021-10-13 09:40
閱讀 951·2021-10-08 10:05
閱讀 3512·2021-09-22 15:50
閱讀 3715·2021-09-22 15:41
閱讀 1822·2021-09-22 15:08
閱讀 2353·2021-09-07 10:24
閱讀 3583·2019-08-30 12:52
