## 原理在 `http` 协议请求中 `header` 里会带个 `Referer` 字段。**通过图片服务器检查 `Referer` 是否来自规定的域名（白名单），而进行防盗链。** 在浏览器中输入防盗链图片地址是能直接访问的。 ## 简单实现防盗链图片可以通过 nginx 配置白名单列表，不在白名单则返回 403 或者相应的处理（重定向到显示403的图片，等操作） ``` location ~* \.(gif|jpg|jpeg|png|bmp|swf|flv)$ { valid_referers none blocked *.andyhu.com server_names ~\.google\. ~\.baidu\.; if ($invalid_referer) { return 403; #rewrite ^/ http://www.xxx.com/403.jpg; } } ``` 以上所有来自 *.andyhu.com 域名和域名中包含 google 和 baidu 的站点都可以访问当前站点的`gif|jpg|jpeg|png|bmp|swf|flv`文件资源。其他来源域（不在白名单列表）名访问则返回 `403`。如果被注释的 `rewrite` 则返回一张 `403.jpg` 的图片 ## 显示第三方防盗链图片顺这浏览器能直接访问防盗链图片的思路，不难发现，**只要请求头 `header` 里面不携带 `Referer` 就能正常访问到防盗链的资源。** ### 1.全局下请求都不带 referer ``
标题 | 含义 ---|--- no-referrer | 整个 Referer 首部会被移除。访问来源信息不随着请求一起发送。 no-referrer-when-downgrade | 在同等安全级别的情况下，引用页面的地址会被发送(HTTPS->HTTPS)，但是在降级的情况下不会被发送 (HTTPS->HTTP)。 origin | 在任何情况下，仅发送文件的源作为引用地址。例如 `example.com/page.html` 会将 `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（移除参数信息之后）作为引用地址。 [MDN相关文档（更详细）](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Referrer-Policy)
小插曲（没有微信H5支付的需求可以无视次插曲）
有次我项目中为了访问第三方防盗链图片，加了这行代码。然后项目中用到了微信 H5 支付，而微信 H5 支付是需要通过从 referer 中获取当前调起H5支付的域名与申请H5支付时提交的授权域名判断域名是否一致的。所以导致我项目中微信支付一直提示 “商家存在未配置的参数”
[微信H5支付报错：“商家存在未配置的参数，请联系商家解决”](https://developers.weixin.qq.com/community/develop/doc/00044aa32cc2c84ef54b1f37359c09?_at=1650692113005) [微信支付开发指引](https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_4) ### 2.给某个资源添加 `ReferrerPolicy` 属性例如：给图片资源添加 `ReferrerPolicy` 属性 ```

``` [MDN相关文档（更详细）](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Referrer-Policy#%E9%9B%86%E6%88%90%E5%88%B0_html) ### 3.使用第三方代理例如：通过第三方代理访问地址为`https://p9-passport.byteacctimg.com/img/user-avatar/f9166aceb85b42133f48537808cef8eb~300x300.image` 的图片 ```

```
缺点：不稳点，第三方代理可能在国内访问不稳定，在国内没有好的推荐,小伙伴如果有好的国内的第三方代理推荐，可以在评论区留意哈！感谢感谢！当然也可以自己做一个代理哈。

### 4.利用iframe伪造请求referer ```JavaScript function showImg( url ) { var frameid = 'frameimg' + Math.random(); window.img = '