使用noopener和noreferrer解决安全问题 为了减轻与target=”_blank”相关的安全风险，使用rel=”noopener noreferrer”属性至关重要：
noopener：这可以防止新页面能够访问window.opener属性，从而阻止对原始页面的潜在操纵。这是防范标签劫持的关键防御措施。
noreferrer：此属性确保新页面不会收到有关引用页面的任何信息。虽然这可能不太关键，但它增加了另一层隐私和安全性。
以下是您应该如何构建链接以增强安全性的方式： <a href=“https://www.example.com” target=“_blank” rel=“noopener noreferrer”>访问示例
通过结合noopener和noreferrer，您可以保护您的网站和用户免受潜在威胁，同时仍然提供target=”_blank”的好处。
起因
相信大家对 eslint 一类的代码规范化工具肯定不会陌生了吧。现在的前端开发环境一般都是多人开发的模式，为了规范大家的编码规范，开发环境肯定会加入 eslint。我们开发时新建标签页打开一个链接，会用到 <a target=”_blank”> 的语法，然而，使用 ESLint (react/jsx-no-target-blank ) rule时，会警告要加上 “rel=”noreferrer noopener””
这个时候需要给a标签加个属性 target=”_blank” rel=”noopener noreferrer” ， 加 target=”_blank” 的作用是新建标签页打开链接，那么 rel=”noopener noreferrer” 是什么作用呢？
如果不加会造成什么影响？
使用 a 标签并设置 target=”_blank” 打开一个新页面时，在很多浏览器（包括旧版本的Chrome、Firefox、Safari、Edge 等主流浏览器）中，新页面都会与原页面共享进程。这意味着在一些浏览器中这两个页面会共享相同的资源，包括 cookies、缓存、本地存储等。这种行为虽然可以提高性能和节省内存，但会造成很多不良风险：
- 新页面对原页面会造成一个安全漏洞，新的页面可以通过window.opener 访问原页面的窗口对象window。甚至新页面可以使用 window.opener.location = newURL将我们的原页面导航至不同的网址。就这样可以控制前一个页面，事情就是这么的可怕。而且不管它是否跨域了，都是可以的。
- 如果新页面正在执行开销极大的 JavaScript，原页面性能可能会受影响，新页面崩溃，也会使得共享进程中的其他页面崩溃。
- 如果在新页面中存在恶意代码，攻击者可以利用 window.opener 和 window.postMessage 方法来访问原始页面并窃取敏感数据。
如何避免风险？
为了避免这些安全漏洞的发生，使用<a>标签打开新页面时，建议添加 rel=”noopener noreferrer” 属性。
rel=”noopener noreferrer” 属性的作用是告诉浏览器在打开新页面时采取一些安全措施，以防止新页面利用原页面的窗口对象执行恶意脚本，来防止钓鱼网站，提高页面安全性。具体来说：
- rel=”noopener”： 防止新页面通过 window.opener 访问原页面的窗口对象，避免潜在的恶意行为。
- rel=”noreferrer”： 防止新页面将来源地址发送给目标页面，避免潜在的隐私泄漏。
