前端 | 加载站外图片403问题及HTTP referrer-京东云开发者社区

####1. 问题场景

最近某个大屏项目中，存在图像监测功能需要加载图片，但是部分图片加载失败，出现403 Forbidden 错误提示，如图：
![image](https://git.jd.com/smart-fe/share/uploads/d7141feeefebc4b8bb499c8a03a468d0/image.png)

####2. 解决方法

先说下解决方案：在html的`head`标签中添加如下`meta`信息：
```html

<meta name="referrer" content="no-referrer">
````
####3.  原理

下面介绍下原理：
- http请求头信息里有一个`referrer`字段，用来表示发起请求的源地址信息，这个`referrer`信息是可以省略，但不可修改的。就是说你可以设置是否带上这个`referrer`信息，但不能定制`referrer`里的信息。
- `referrer`信息实际上告诉了服务器，用户的访问资源之前的位置，服务器在拿到这个 `referrer`信息后就可以进行相关的处理，比如判断`referrer`值是否来自本站，如果不是则返回403或者重定向返回其他信息，从而实现图片的防盗链。
上面出现图片403就是因为，请求的是别人服务器上的资源，但携带了自己`referrer`信息，被对方的服务器拦截了。
- 对于图片资源，我们可以通过meta来设置*referrer policy(来源策略)*，把`referrer`设置成`no-referrer`，这样发送请求不会带上`referrer`信息，对方服务器也就无法拦截了。

*隐藏 referrer信息后，图片资源就可以正常访问了*

- 浏览区的默认referrer policy(来源策略)是`no-referrer-when-downgrade`, 就是除了降级请求的情况外都会带上referrer信息。降级请求是指https协议的地址去请求http协议的资源。所以图片403的情况还有另一种解决方案，就是把请求的图片地址换成http协议，自己的地址使用https协议，这种降级请求就不会带上referrer信息了。

####4. referrer发生场景

浏览器向服务器请求资源的时候，有三种发送referrer的场景：

（1） 用户点击网页上的链接，如`<a>标签`、`<area>标签`

（2）用户发送表单

（3）网页加载资源，比如图片、脚本、样式、iframe等

我们在浏览器地址栏直接输入网址，或者点击浏览器书签栏是不会发送referrer信息的。所以有些链接我们浏览器输入网址访问是正常的，但在网站里打开会被拦截。

####5. referrer policy(来源策略)的值

referrer policy 有8个值：

（1） `no-referrer-when-downgrade`

浏览器默认值，除了降级请求的情况外都会带上referrer信息。降级请求是指https协议的地址去请求http协议的资源。

（2）`no-referrer`

不发送referrer信息，如我们设置的`<meta name="referrer" content="no-referrer">`或者在`<a>`标签设置`<a href="..." rel="noreferrer" target="_blank">xxx</a>`

(3) `same-origin`

向同域网址（协议+域名+端口号 都相同）请求时发送referrer信息，其他情况不发送。

（4） `origin`

任何情况下referrer只发送源信息（协议+域名+端口号），不论是否跨域；

（5）`strict-origin`

降级请求不发送referrer信息（即从https项http请求），其他情况只发送源信息（协议+域名+端口号）；

（6）`origin-when-cross-origin`

同源时，发送完整的refereer信息，跨域时发送源信息。

（7）`strict-origin-when-cross-origin`

同源时，发送完整的referrer字段；跨域时，如果 HTTPS 网址链接到 HTTP 网址，不发送referer字段，否则发送源信息。
(8) `unsafe-url`

发送的referrer信息包含源信息、路径和查询字符串，不包含锚点、用户名和密码。

####6. 前端设置referrer策略

（1） 设置整个文档的referrer策略

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

(2) 设置元素`<a>`、`<area>`、`<img>`、`<iframe>`、`<script>`、`<link>`的`referrerpolicy`属性，为其设置单独的请求策略
`<a href="http://example.com" referrerpolicy="origin">`

(3)此外`<a>`、`<area>`、`<link>`还可以设置`rel`属性
`<a href="http://example.com" rel="noreferrer">`

>作者：赵红云