【Hexo】头像防盗链破解

1. 情景描述

在友情链接页面添加友链时，发现头像显示不出来！！！

按F12一查看，却发现：
返回HTTP状态码403，x-tengine-error: denied by Referer ACL 。

头像来源是CSDN，很明显，CSDN是添加了防盗链的。

那么，该如何解决呢？

2. 解决过程

防盗链是通过 referrer 来控制的。

如果在浏览器新标签页直接访问头像是可以显示的，因为请求头的referrer为空。

而在你自己的网站直接通过img标签引入，请求时便会带上，比如

referer: https://zhangxiaocai.cn/friends/

csdn发现请求来源不是自己的网站，便会禁止访问。

在网上找了两种方法，都不起作用，分别是：

• 添加 meta 标签

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

• 直接在img标签设置 referrer

  <img referrer="no-referrer|origin|unsafe-url" src="{{item.src}}"/>

最后找到一种解决方案，虽然麻烦一点，但效果不错。

3. 解决方案

通过 Window 对象与 iframe 的配合，加载防盗链图片。

<!--<img src="<%- friend.avatar %>" alt="img">-->

<script>
        window.img<%- i %> = '<style>html,body{margin:0;padding:0;}</style><img style="border-radius: 50%;border-style: none;" width="100px" height="100px" src=\'' + "<%- friend.avatar %>" + '?' + Math.random() + '\' />';
        document.write('<iframe src="javascript:parent.img<%- i %>;" frameBorder="0" scrolling="no" width="100px" height="100px"></iframe>');
</script>

a. 将 img 挂在到Window对象中；

Window.自定义变量 = img 头像内容

b. 然后创建 iframe，由iframe去获取

<iframe src="javascript:parent.自定义变量"></iframe>

其中 parent 指的就是 Window 对象。