解决复制微信公号文章图片不显示问题

问题起因很简单，直接复制的公众号文章到网站，不单独处理图片，复制出来的文章图片因为微信防盗链设置不能显示出来，如下图

防盗链原理就是后端先拦截请求获取其中的referrer,将其和自身的白名单、本地域名等对比,符合条件的将通过,不符合的将会统一返回一个错误提示(可以是图片、文字等)。

那我们绕过referrer检查不就可以了,改一下Referrer Policy

开始是设置了全局meta的referrer（查了好多帖子都是这么写的）

<meta name="referrer" content="same-origin">

这么改会导致网站引用的百度统计失效，因为百度统计需要获取到referrer才会返回，否则返回空。

那就改一下不在head中添加，改为在<script>代码块里引用百度统计后，动态添加meta标签

const meta = document.createElement('meta');
meta.content='same-origin';
meta.name='referrer';
document.getElementsByTagName('head')[0].appendChild(meta);

这样就完美解决了微信图片不显示问题，同时不影响百度统计使用

Chrome浏览器从85版本后将原来的Referrer Policy默认值改为了strict-origin-when-cross-origin这个策略

从MDN上查一下这个策略，中文版是这么写的

strict-origin-when-cross-origin

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

作者理解这句话的意思是只对同源请求发送referrer，这就引发了一个思考默认这个策略的情况下百度统计等第三方软件是如何拿到referrer来做统计的？实际测试一下，默认情况下也发送referrer地址啊，这不对啊，怎么跟我理解的不一样？

重回MDN英文版，这么写的

strict-origin-when-cross-origin(default)

Send the origin, path, and querystring when performing a same-origin request. For cross-origin requests send the origin (only) when the protocol security level stays same (HTTPS→HTTPS). Don't send the Referer header to less secure destinations (HTTPS→HTTP).

这句话的意思是

• 对于同源请求referrer为完整路径（包含请求源域名、路径、请求参数等所有信息）

• 对于跨域请求只有同为加密协议（HTTPS）情况下会发送源（origin）信息

• 对于HTTPS请求HTTP情况不发送referrer

所以在都为HTTPS的情况下，即使跨域也会发送请求的referrer。

还是看英文原版吧，全网都在复制翻译版，搞得作者有点混乱了

冲浪者科技专注品牌网站建设，高端网站定制， 网站制作， 定制网站开发，网站改版升级，外贸网站建设，政府网站建设， 网站ipv6升级改造，网站SEO优化推广，小程序制作开发，400电话，企业邮箱，SSL证书安装等为一体的互联网整合营销一站式服务商。 咨询服务热线：173-7784-9589（微信同号）