共计 2378 个字符，预计需要花费 6 分钟才能阅读完成。
原理
在 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 <meta name="referrer" content="no-referrer" />
| 题目 | 含意 |
|---|---|
| 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 相干文档（更具体）
小插曲（没有微信 H5 领取的需要能够忽视次插曲）
有次我我的项目中为了拜访第三方防盗链图片，加了这行代码。而后我的项目中用到了微信 H5 领取，而微信 H5 领取是须要通过从 referer 中获取以后调起 H5 领取的域名与申请 H5 领取时提交的受权域名判断域名是否统一的。所以导致我我的项目中微信领取始终提醒“商家存在未配置的参数”
微信 H5 领取报错：“商家存在未配置的参数，请分割商家解决”
微信领取开发指引
2. 给某个资源增加 ReferrerPolicy 属性
例如：给图片资源增加 ReferrerPolicy 属性
<img src="xxxx.jpg" referrerPolicy="no-referrer" />MDN 相干文档（更具体）
3. 应用第三方代理
例如：通过第三方代理拜访地址为https://p9-passport.byteacctimg.com/img/user-avatar/f9166aceb85b42133f48537808cef8eb~300x300.image 的图片
<img src="https://images.weserv.nl/?url=https://p9-passport.byteacctimg.com/img/user-avatar/f9166aceb85b42133f48537808cef8eb~300x300.image"/>毛病：不稳点，第三方代理可能在国内拜访不稳固，在国内没有好的举荐, 小伙伴如果有好的国内的第三方代理举荐，能够在评论区 注意哈！感激感激！当然也能够本人做一个代理哈。
4. 利用 iframe 伪造申请 referer
function showImg(url) {var frameid = 'frameimg' + Math.random();
window.img = '<img id="img"src=\''+url+'?'+Math.random()+'\' />
<script>window.onload = function() { parent.document.getElementById
(\''+frameid+'\').height = document.getElementById(\'img\').height
+\'px\'; }<'+'/script>';
document.write('<iframe id="'+frameid+'"src="javascript:parent.img;
"frameBorder="0"scrolling="no"width="100%"></iframe>');
}参考地址
反破解
有破解必然就有反破解的办法，小伙伴有啥反破解思路或者办法能够在评论区注意探讨哈！
写在最初
我是AndyHu，目前临时是一枚前端搬砖工程师。
文中如有谬误，欢送在评论区斧正，如果这篇文章帮到了你，欢送点赞和关注呀！
speak less，do more.
