Day02 安全隐患之 a 标签 rel="noopener noreferrer" 和 meta 标签的 content="no-referrer-when-downgrade"

背景

搬砖过程中写了这句代码：js <a target="_blank" /> ，Chrome 浏览器立刻给我抛出一个错误：

截屏2022-07-01 下午5.33.05.png

从 Google 官方文档查看抛错原因： html.spec.whatwg.org/multipage/l…

报错是因为是我用了 a 标签的 target="_blank" 却没有添加 rel="noreferrer noopener"，代码会有安全问题。前端码农经常和 a 标签打交道，而我对 referrer 却知之甚少，于是乖乖补习下 referrer 知识，记下笔记分享给需要的人。

Referrer Policy 介绍

referrer 来源，当页面中引入图片、JS 等资源，或者从一个页面跳到另一个页面，都会产生新的 HTTP 请求，浏览器一般都会给这些请求头加上一个表示来源的字段 Referrer 。Referrer 在分析用户来源时很有用。但 URL 可能包含用户铭感信息，如果被第三方网站拿到很不安全（例如有的网站把用户的 SESSION ID 放在 url 中传递，第三方拿到 url 就可以看到别人登录后的页面）。之前浏览器会按照自己默认规则决定是否加上 Referrer 。

2014 年，W3C 的 Web 应用安全工作组（Web Application Security Working Group）发布了 Referrer Policy(www.w3.org/TR/referrer…) 草案，对浏览器该如何发送 Referrer 做了详细的规定。新版 Chrome 已经支持了这份草案，我们终于可以灵活地控制自己网站的 Referrer 策略了。

Referrer Policy States

Referrer Policy 一共有 5 种策略。

No Referrer：任何情况下都不发送 Referrer 信息；
No Referrer When Downgrade：仅当发生协议降级（如 HTTPS 页面引入 HTTP 资源，从 HTTPS 页面跳到 HTTP 等）时不发送 Referrer 信息。这个规则是现在大部分浏览器默认所采用的；
Origin Only：发送只包含 host 部分的 Referrer。启用这个规则，无论是否发生协议降级，无论是本站链接还是站外链接，都会发送 Referrer 信息，但是只包含协议 + host 部分（不包含具体的路径及参数等信息）；
Origin When Cross-origin：仅在发生跨域访问时发送只包含 host 的 Referrer，同域下还是完整的。它与 Origin Only 的区别是多判断了是否 Cross-origin。需要注意的是协议、域名和端口都一致，才会被浏览器认为是同域；
Unsafe URL：无论是否发生协议降级，无论是本站链接还是站外链接，统统都发送 Referrer 信息。正如其名，这是最宽松而最不安全的策略；

Referrer Policy 的应用场景

1、a 标签增加 target="_blank" 的安全性

引用 google 官方的一段话：当您使用 target="_blank" 属性链接到另一个网站上的页面时，你的网站可能会面临性能和安全问题：

另一个页面可能与您的页面在同一进程上运行。如果另一个页面运行大量 JavaScript，您的页面的性能可能会受到影响。
另一个页面可以使用 window.opener 属性访问您的 window 对象。这可能允许其他页面将您的页面重定向到恶意 URL。

比如：window.opener.location = newURL 将您的页面导航至不同的网址。随意控制你的网页是不是很吓人。。

将 rel="noopener" 或 rel="noreferrer" 添加到您的 target="_blank" 链接避免这些问题。

rel="noopener" 阻止新页面访问 window.opener 属性，并确保它在单独的进程中运行。
rel="noreferrer" 具有相同的效果，但还会阻止将 Referer 标头发送到新页面。请参阅链接类型“noreferrer” 。

正确用法：

<a href="..." rel="noreferrer" target="_blank">
<a href="..." rel="noreferrer noopener" target="_blank">
<a href="..." rel="noopener" target="_blank">

2、meta 标签的应用场景

应用场景：例如：增加安全签名：

<meta name="referrer" content="no-referrer-when-downgrade" />

更多用法参看 MDN ：developer.mozilla.org/en-US/docs/…

3、CSP 响应头

CSP（Content Security Policy），是一个跟页面内容安全有关的规范。在 HTTP 中通过响应头中的 Content-Security-Policy 字段来告诉浏览器当前页面要使用何种 CSP 策略。用法：

Content-Security-Policy: referrer no-referrer|no-referrer-when-downgrade|origin|origin-when-cross-origin|unsafe-url;

总结：安全一直是互联网人重视的问题之一，在面试题中也频繁出现。掌握这些基础知识是必须的。

Day02 referrer 策略与 a 标签、 meta 标签的安全问题