noopener有什么作用，与nofollow有什么区别

noopener 和 nofollow 是两种完全不同的 HTML 属性，分别用于解决不同的安全问题或实现不同的策略。它们的核心区别在于作用对象和目的。

1. noopener 的作用（核心：安全与性能）

noopener 是一个 安全属性，主要用于通过 target="_blank" 打开新窗口或标签页的链接。

• 作用机制：当你点击一个带有 target="_blank" 的链接时，新打开的页面可以通过 window.opener 这个 JavaScript 属性访问原始页面的窗口对象。这带来了安全风险（例如，新页面可以尝试通过 window.opener.location 将原始页面重定向到一个钓鱼网站）和轻微的性能开销。
• noopener 的解决方案：在 <a> 标签中添加 rel="noopener"，会切断新页面与原始页面之间的这种 JavaScript 连接。新页面无法通过 window.opener 引用或操纵打开它的原始页面。
  • 现代浏览器的改进：在现代浏览器中，对于 target="_blank" 的链接，即使你不显式地写 noopener，浏览器也会默认将其行为视为 noopener。但为了兼容性和明确意图，最佳实践依然是手动加上。
  • 常用写法：通常与 noreferrer 联用，写作 rel="noopener noreferrer"。noreferrer 会同时阻止在 HTTP 请求头中发送 Referer 信息。

示例：

<!-- 安全做法：使用 noopener 阻止新页面操纵原页面 -->
<a href="https://external-site.com" target="_blank" rel="noopener noreferrer">访问外部网站</a>

小结 noopener：

• 目的：安全防护（防止标签页劫持）和性能优化。
• 应用场景：所有使用 target="_blank" 指向外部网站或不可信来源的链接。
• 影响对象：浏览器窗口/标签页之间的关系。

2. nofollow 的作用（核心：搜索引擎优化与权重分配）

nofollow 是一个 SEO（搜索引擎优化）属性，用于指示搜索引擎如何处理链接。

• 作用机制：正常情况下，当搜索引擎爬虫发现一个从 A 页面到 B 页面的链接时，它会认为 A 页面在一定程度上“投票”或“推荐”了 B 页面，从而将一部分“权重”或“信誉”从 A 页面传递给 B 页面（这是搜索引擎排名算法的一部分）。rel="nofollow" 会告诉搜索引擎：“不要追踪此链接”或“不要为此链接传递权重”。
• nofollow 的解决方案：添加此属性后，搜索引擎在计算网页排名时，会基本忽略这个链接，不会通过它传递 PageRank 等权重。
• 常用场景：
  1. 用户生成内容：如博客评论、论坛帖子中的链接，因为这些链接可能不受你控制，且可能包含垃圾或低质量内容。
  2. 付费链接/广告：为了符合搜索引擎的指南，避免因付费链接影响排名。
  3. 不想背书的链接：链接到一个页面，但你并不想为其站台或推荐。
  4. 爬虫引导：避免搜索引擎爬虫浪费资源抓取无意义的链接（如登录、注册链接）。

示例：

<!-- SEO做法：使用 nofollow 告知搜索引擎不要追踪此链接的权重 -->
<p>欢迎在<a href="https://some-forum.com" rel="nofollow">这个论坛</a>参与讨论。</p>
<!-- 或者用于广告 -->
<a href="https://advertiser.com" rel="nofollow sponsored">广告链接</a>

小结 nofollow：

• 目的：控制搜索引擎的权重传递和爬虫行为。
• 应用场景：用户生成内容、付费广告、无需追踪的引用的链接。
• 影响对象：搜索引擎爬虫。

核心区别总结

最佳实践建议

1. 对于外部链接：如果使用 target="_blank"，始终添加 rel="noopener noreferrer"。这是安全最佳实践。
2. 对于需要控制权重的链接：根据内容性质，酌情添加 rel="nofollow"、rel="sponsored" 或 rel="ugc"。
3. 可以同时使用：一个链接完全可以同时具备这两种属性，因为它们解决的是不同维度的问题。

   <a href="https://example-ad.com" target="_blank" rel="noopener noreferrer nofollow sponsored">
     这是一个在新窗口打开的付费广告链接，既安全又不传递权重。
   </a>