問題起因很簡單，直接復(fù)制的公眾號文章到網(wǎng)站，不單獨處理圖片，復(fù)制出來的文章圖片因為微信防盜鏈設(shè)置不能顯示出來，如下圖

防盜鏈原理就是后端先攔截請求獲取其中的referrer,將其和自身的白名單、本地域名等對比,符合條件的將通過,不符合的將會統(tǒng)一返回一個錯誤提示(可以是圖片、文字等)。

那我們繞過referrer檢查不就可以了,改一下Referrer Policy

開始是設(shè)置了全局meta的referrer（查了好多帖子都是這么寫的）

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

這么改會導(dǎo)致網(wǎng)站引用的百度統(tǒng)計失效，因為百度統(tǒng)計需要獲取到referrer才會返回，否則返回空。

那就改一下不在head中添加，改為在<script>代碼塊里引用百度統(tǒng)計后，動態(tài)添加meta標(biāo)簽

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

這樣就完美解決了微信圖片不顯示問題，同時不影響百度統(tǒng)計使用

Chrome瀏覽器從85版本后將原來的Referrer Policy默認值改為了strict-origin-when-cross-origin這個策略

從MDN上查一下這個策略，中文版是這么寫的

strict-origin-when-cross-origin

對于同源的請求，會發(fā)送完整的URL作為引用地址；在同等安全級別的情況下，發(fā)送文件的源作為引用地址 (HTTPS->HTTPS)；在降級的情況下不發(fā)送此首部 (HTTPS->HTTP)。

作者理解這句話的意思是只對同源請求發(fā)送referrer，這就引發(fā)了一個思考默認這個策略的情況下百度統(tǒng)計等第三方軟件是如何拿到referrer來做統(tǒng)計的？實際測試一下，默認情況下也發(fā)送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為完整路徑（包含請求源域名、路徑、請求參數(shù)等所有信息）

• 對于跨域請求只有同為加密協(xié)議（HTTPS）情況下會發(fā)送源（origin）信息

• 對于HTTPS請求HTTP情況不發(fā)送referrer

所以在都為HTTPS的情況下，即使跨域也會發(fā)送請求的referrer。

還是看英文原版吧，全網(wǎng)都在復(fù)制翻譯版，搞得作者有點混亂了

沖浪者科技專注品牌網(wǎng)站建設(shè)，高端網(wǎng)站定制， 網(wǎng)站制作， 定制網(wǎng)站開發(fā)，網(wǎng)站改版升級，外貿(mào)網(wǎng)站建設(shè)，政府網(wǎng)站建設(shè)， 網(wǎng)站ipv6升級改造，網(wǎng)站SEO優(yōu)化推廣，小程序制作開發(fā)，400電話，企業(yè)郵箱，SSL證書安裝等為一體的互聯(lián)網(wǎng)整合營銷一站式服務(wù)商。 咨詢服務(wù)熱線：173-7784-9589（微信同號）