在網頁開發中，使用
<a> 標籤建立連結指向其他頁面，並且設定 target="_blank" 屬性時，該連結會在新的瀏覽器標籤頁或視窗中打開。不過，這樣做會有一些安全性和效能上的問題。rel="noopener noreferrer" 是用來解決這些問題的兩個屬性值。noopener: 這個屬性值是為了增強安全性。預設情況下，當一個新頁面在新標籤中打開時，該新頁面會對開啟它的原始頁面有所謂的 "window.opener" 存取權。這意味著新頁面可以使用 JavaScript 修改原始頁面，這是一個潛在的安全風險，特別是如果你的連結指向的是第三方內容的話。設置rel="noopener"會阻止新頁面存取window.opener屬性，確保它無法操縱開啟它的頁面。
noreferrer: 這個屬性值有兩個功能。首先，它會像noopener一樣阻止新頁面存取window.opener。但它還有額外的功能，即在導航到新頁面時不發送 HTTP Referer 頭部信息。這個頭部通常包含原頁面的地址，這可能會涉及隱私問題，因為它透露了用戶是從哪個頁面跳轉過來的。另外，在某些情況下，使用noreferrer還可以提升效能，因為瀏覽器不需要計算和發送來源頁面的地址。
總的來說，使用
rel="noopener noreferrer" 主要是出於安全和隱私的考慮，尤其是當你的頁面包含指向外部站點的連結時。這樣可以保護用戶的安全，並在某些情況下還能提升頁面的效能。在 React 中，這跟在純 HTML 中的使用方式一樣。