[译]指向跨域的链接是不安全的
最近在回顾前端知识, 整理到安全部分, 刚好看到这篇文章, 觉得不错, 翻译一下...
当你使用 target="_blank" 链接到一个其他站点的页面时，你的站点将会暴露出性能和安全上的问题：
- 链接到的页面可能和你的页面运行在同一个进程上。如果该页面正在运行大量的JavaScript，你的页面的性能可能会受到影响；
- 链接到的页面可以使用
window.opener属性访问你的页面的window对象。这可能会导致你的页面被重定向到一个恶意的URL；
在设置了 target="blank" 的链接中添加 rel="noopener" 或是 rel="noreferrer" 可以避免这些问题。
在Chromium的88版本中，带有
target="blank"的锚点默认会自动获得 noopener。主动设置rel="noopener"有助于保护传统浏览器（包括Edge legacy和Internet Explorer）的用户。
Lighthouse 如何对跨域链接进行评估
Lighthouse 是 Chrome 开发者工具中自带的功能
Lighthouse 将跨域的不安全链接标记出来：
Lighthouse 通过以下过程，将不安全的链接识别出来：
- 收集所有包含
target="blank"属性但不包含rel="noopener"或是rel="noreferrer"属性的<a>标签； - 过滤所有相同域名的链接；
如果你在大型网站开发的话，因为 Lighthouse 过滤掉了相同域名的链接，所以你需要注意一种特殊情况：如果一个页面包含一个设置了target="blank" 而没有设置 rel="noopener" 的链接，并且指向你的网站的另一个页面，Lighthouse 仍然会报告性能影响。但你将不会在 Lighthouse 的结果中看到这些链接。
在Lighthouse的最佳实践分数中，每一个最佳实践评估都具有相同的权重。你可以通过 The Best Practices score 了解更多。
如何提升你的网站的性能和防止安全漏洞
添加 rel="noopener" 或是 rel="noreferrer" 到每一个被 Lighthouse 报告标识出来的链接。一般来说，当你使用了 target="_blank"，请始终添加 rel="noopener" 或 rel="noreferrer":
<a href="https://examplepetstore.com" target="_blank" rel="noopener">
Example Pet Store
</a>
rel="noopener"禁止新页面访问window.opener属性，并且确保它运行在单独的进程中；rel="noreferrer"具有相同的作用，但也会阻止 Referer 头发送到新的页面中。具体查看 Link type "noreferrer"。
更多信息，请查看 共享跨域资源。
相关资料
Source code for Links to cross-origin destinations are unsafe audit
Cross-Origin Resource Sharing (CORS)
Site isolation for web developers