WordPress移除外链不再需要的rel=”noopener noreferrer”属性

原创

张子凡

修改于 2025-01-30 22:39:55

590

WordPress 一直以来对于安全性非常的重视，有时候甚至是过于重视和完善，这并非是什么坏事。2021 年后主流浏览器都已经预设 noopener 行为，已经没有必要添加，原本 noopener 和 noreferrer 两个属性经常一起用是因为它们解决的问题不同但互补，结合使用能提升网页的安全性和隐私保护。直接组合使用可以覆盖更多场景，统一提升安全和隐私，省去判断浏览器支持差异的麻烦。

用 noopener 防攻击，用 noreferrer 防隐私泄露。因为历史原因让开发者习惯一起用，确保没遗漏功能，这也是为什么很早之前 WordPress 会自动给使用 target=”_blank”属性的链接都统一添加 rel=”noopener noreferrer”属性重要原因。而在 2020 年的 WordPress 5.6.0 版本已经移除 noreferrer 属性，但是依然保留了 noopener 属性。

为什么不再需要 noopener 属性？

现代浏览器默认安全设置：在大多数现代浏览器中（如 Chrome、Firefox、Edge），对于带有 target=”_blank” 的链接，浏览器会自动启用 noopener，防止 window.opener 访问原页面。
为什么默认启用：浏览器开发者意识到 Tabnabbing（跨窗口攻击）的问题，因此对安全性进行了优化。现在只要使用 target=”_blank”，默认就会隔离新页面和原页面。

为什么不再需要 noreferrer 属性？

不在重要：很多站点并不介意目标页面是否能看到来源信息（Referrer），加上现在网站基本都使用 HTTPS 协议，也便于在 SEO 优化中传递来源信息。
Referrer-Policy 更灵活：现在可以通过 HTML 的 <meta> 标签或 HTTP 头部的 Referrer-Policy 全局管理引用策略，控制来源信息的发送方式。

这样可以全站禁用来源信息发送，无需在每个链接上添加 rel=”noreferrer”。例如：

<meta name="referrer" content="no-referrer">

如果浏览器已经默认启用了 noopener，开发者再加上 rel=”noopener” 会显得多余，增加 HTML 文件体积，没有实际意义。

有必要移除 noopener noreferrer 属性吗？

是否需要移除 noopener 和 noreferrer 属性，取决于你的网站功能、安全性需求和用户体验的考虑。基于默认主流浏览器和网站整体的安全性而言，加上 HTTPS 协议的加持移除 noopener noreferrer 对网站安全性其实已经无伤大雅。

<a href="https://leixue.com" target="_blank" rel="nofollow noopener noreferrer">泪雪网</a>
<a href="https://leixue.com" target="_blank" rel="noopener noreferrer">泪雪网</a>
<a href="https://leixue.com" target="_blank" rel="noopener">泪雪网</a>

并且移除后有助于减小冗余，提高代码的简洁性和可维护性。

<a href="https://leixue.com" target="_blank">泪雪网</a>

WordPress 移除外链 noopener/noreferrer 属性

这里的移除方法有三种理解方式，一种是对以后添加的外链生效，但是历史文章没有办法移除，第二种就是通过 WordPress hook 让前端内容中的外链移除 noopener/noreferrer 属性，但实际上该怎样还是怎样，最后一种办法就是在第一种的基础上，再将 WordPress 数据库中的历史文章外链进行彻底的移除 noopener/noreferrer 属性。

方法一、禁止新文章中外链自动添加 noopener 属性（只对新内容生效）

/*
 * WordPress 文章外链禁止自动添加 noopener 属性
 * https://zhangzifan.com/wordpress-rel-noopener-noreferrer.html
 */
add_filter('tiny_mce_before_init','tinymce_allow_unsafe_link_target');
function tinymce_allow_unsafe_link_target( $mceInit ) {
    $mceInit['allow_unsafe_link_target'] = true;
    return $mceInit;
}

方法二、前端文章内容移除外链 noopener/noreferrer 属性（所有文章生效，治标不治本）

/*
 * WordPress 文章移除外链 noopener/noreferrer 属性
 * https://zhangzifan.com/wordpress-rel-noopener-noreferrer.html
 */
add_filter('the_content', 'remove_noopener_noreferrer');
function remove_noopener_noreferrer($content) {
    // 移除 rel="noopener noreferrer" 属性
    $content = str_replace('rel="nofollow noopener noreferrer"', 'rel="nofollow"', $content);
    $content = str_replace('rel="noopener noreferrer"', '', $content);
    $content = str_replace("rel='noopener'", '', $content);
    $content = str_replace("rel='noreferrer'", '', $content);
    return $content;
}

方法三、SQL 移除数据库中文章外链 noopener/noreferrer 属性（搭配方法一可以彻底解决）

// 替换 rel="nofollow noopener noreferrer" 为 rel="nofollow"
UPDATE wp_posts
SET post_content = REPLACE(post_content, 'rel="nofollow noopener noreferrer"', 'rel="nofollow"')
WHERE post_content LIKE '%rel="nofollow noopener noreferrer"%';
 
// 移除 rel="noopener noreferrer"
UPDATE wp_posts
SET post_content = REPLACE(post_content, 'rel="noopener noreferrer"', '')
WHERE post_content LIKE '%rel="noopener noreferrer"%';
 
// 移除 rel="noopener"
UPDATE wp_posts
SET post_content = REPLACE(post_content, 'rel="noopener"', '')
WHERE post_content LIKE '%rel="noopener"%';
 
// 移除 rel="noreferrer"
UPDATE wp_posts
SET post_content = REPLACE(post_content, 'rel="noreferrer"', '')
WHERE post_content LIKE '%rel="noreferrer"%';

由于 WordPress 5.6 版本已经移除 noreferrer 属性，如果你使用的 WordPress 依然会自动添加 noreferrer 属性，只需升级到 WordPress 最新版本即可，noopener 属性的移除只需将以上方法一代码添加到当前 WordPress 主题 functions.php 文件中，后续添加外链就不会再自动的添加 noopener 属性了。

利用 SQL 语句移除数据库中历史文章内容的 noopener/noreferrer 属性需要注意先备份数据库，推荐使用 PHPmyadmin 执行 SQL 语句或直接使用里面的查找替换功能，wp_posts 为 WordPress 默认的文章数据库，根据自己的实际情况修改前缀即可，这里子凡就不在过多赘述了。以上纯属子凡我的个人观点，更多的是考虑代码冗余方面的优化，更注重站点安全的朋友们可以慎重的考虑是否有必要移除。

更多关于WordPress优化及疑问可以添加QQ群：255308000

除非注明，否则均为泪雪博客原创文章，禁止任何形式转载

本文链接：https://zhangzifan.com/wordpress-rel-noopener-noreferrer.html

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

wordpress