说说你对target="_blank"的理解？有啥安全性问题？如何防范？

target="_blank" 的作用是在新标签页或窗口中打开链接。这很常见，用户也习惯了这种行为。然而，它确实存在一些安全风险，主要是因为新打开的页面可以通过 window.opener 访问原始页面的 window 对象。

安全问题：

• 反向点击劫持 (Reverse Tabnabbing): 这是最主要的风险。恶意页面可以通过 window.opener.location 更改原始页面的 URL，将其重定向到钓鱼网站或其他恶意网站。用户可能没有意识到原始标签页已经被更改，从而泄露敏感信息。
• 钓鱼攻击: 结合其他技术，攻击者可以利用 _blank 进行更复杂的钓鱼攻击。例如，他们可以将用户重定向到一个看起来像登录页面的假网站，窃取用户的凭据。
• 恶意代码注入: 恶意页面可以利用 window.opener 在原始页面中注入 JavaScript 代码，从而执行各种恶意操作，例如窃取 cookie、修改页面内容或发起 XSS 攻击。

防范措施：

• rel="noopener": 这是最推荐的解决方案。它会阻止新打开的页面访问 window.opener，有效地切断了两个页面之间的联系。 在 HTML 中，只需添加 rel="noopener" 属性即可：<a href="..." target="_blank" rel="noopener">...</a>。

• rel="noreferrer": 与 noopener 类似，noreferrer 也能阻止新打开的页面访问 window.opener。 此外，它还会阻止 Referer 头信息的发送，这可以提高用户的隐私性。 在 HTML 中，添加 rel="noreferrer" 属性：<a href="..." target="_blank" rel="noreferrer">...</a>。 如果需要发送 Referer 信息但又要防止 Tabnabbing，则应使用 noopener。

• rel="noopener noreferrer": 可以同时使用 noopener 和 noreferrer，以获得更高的安全性。 <a href="..." target="_blank" rel="noopener noreferrer">...</a>

• JavaScript 中打开新窗口并设置 opener 为 null: 虽然不推荐，但也可以在 JavaScript 中动态创建新窗口，并在打开后立即将 window.opener 设置为 null。 例如：

const newWindow = window.open('https://example.com', '_blank');
if (newWindow) {
  newWindow.opener = null;
}

• 沙盒化 iframe: 对于一些需要更强隔离的情况，可以考虑将链接放在沙盒化的 iframe 中打开。 这可以限制 iframe 中代码的权限，进一步提高安全性。

• CSP (Content Security Policy): CSP 是一种更全面的安全机制，可以用来限制页面加载的资源和执行的脚本。 虽然它不能直接解决 target="_blank" 的问题，但可以减轻潜在的恶意代码注入风险。

总结:

为了确保安全性，强烈建议始终在使用 target="_blank" 时添加 rel="noopener" 或 rel="noopener noreferrer"。 这是一种简单而有效的措施，可以防止潜在的 Tabnabbing 攻击和其他安全风险。 其他方法可以作为补充，但 rel="noopener" 应该是首选的解决方案。