网站引入第三方图片资源403的解决方案、图片防盗链的实现方案

发现问题：通过network可以看到图片资源的http请求是403 没权限访问

http请求头中有一个 referrer 这个字段用来监管哪些访问来源信息。referrer判断请求是否来自本站，如果不是来自本站接口就403，图片防盗链就是这样做的。这就是为什么网站引入第三方的图片时候会报403了

方法1：

网站可以通过meta标签设置referrer policy(来源策略)，html head中加上<meta name="referrer" content="no-referrer" /> 具体的设置值和含义如下

可选值

no-referrer

整个 Referer 首部会被移除。访问来源信息不随着请求一起发送。

no-referrer-when-downgrade （默认值）

在没有指定任何策略的情况下用户代理的默认行为。在同等安全级别的情况下，引用页面的地址会被发送(HTTPS->HTTPS)，但是在降级的情况下不会被发送 (HTTPS->HTTP)。

origin

在任何情况下，仅发送文件的源作为引用地址。例如 https://example.com/page.html 会将 https://example.com/ 作为引用地址。

origin-when-cross-origin

对于同源的请求，会发送完整的URL作为引用地址，但是对于非同源请求仅发送文件的源。

same-origin

对于同源的请求会发送引用地址，但是对于非同源请求则不发送引用地址信息。

strict-origin

在同等安全级别的情况下，发送文件的源作为引用地址(HTTPS->HTTPS)，但是在降级的情况下不会发送 (HTTPS->HTTP)。

strict-origin-when-cross-origin

对于同源的请求，会发送完整的URL作为引用地址；在同等安全级别的情况下，发送文件的源作为引用地址(HTTPS->HTTPS)；在降级的情况下不发送此首部 (HTTPS->HTTP)。

unsafe-url

无论是同源请求还是非同源请求，都发送完整的 URL（移除参数信息之后）作为引用地址。

方法2：

集成到 HTML

可以用 <a>、<area>、<img>、<iframe>、<script> 或者 <link> 元素上的 referrerpolicy 属性为其设置独立的请求策略。

<a href="http://example.com" referrerpolicy="origin">

另外也可以在 <a>、<area> 或者 <link> 元素上将 rel 属性设置为 noreferrer。

<a href="http://example.com" rel="noreferrer">