前端解決第三方圖片防盜鏈的辦法 - html referrer 訪問圖片資源403問題

時間 2019-12-05

標籤前端解決第三方圖片防盜辦法 html referrer 訪問資源問題欄目 HTML 简体版

原文原文鏈接

問題

筆者網站的圖片都是上傳到第三方網站上的，好比簡書、掘金、七牛雲上的，可是最近簡書和掘金都開啓了 防盜鏈，防止其餘網站訪問他們網站上的圖片了，致使筆者的網站存在他們網站上的圖片全掛了。html

具體問題，就是 html 中經過 img 標籤引入一個第三方的圖片地址，報 403 。可是這個圖片地址直接複製出來在地址欄打開，倒是看獲得的。前端

官方輸出圖片的時候，判斷了來源 Referer ，就是從哪一個網站訪問這個圖片，若是是你的網站去加載這個圖片，那麼 Referer 就是：你的網站地址；vue

若是咱們的網站地址不在官方的白名單內，因此就看不到圖片了。java

咱們作這個跳板的關鍵：不發送 Referer，也就是沒有來源。那麼官方那邊，就認爲是從瀏覽器直接訪問的，因此就能加載正常的圖片了。node

如原網址：react

顯示此圖片來自微信公衆平臺，未經容許不得應用github

方法：在 <head> 標籤里加 meta算法

<meta name="referrer" content="never">

這樣存在第三方網站上的圖片，在你的網站上就能夠訪問了。vue-cli

在某些狀況下，出於一些緣由，網站想要控制頁面發送給 server 的 referrer 信息的狀況下，能夠使用這一 referer metadata 參數。

參數

referer 的 metedata 屬性可設置 content 屬性值爲如下集合：

結果

若是 referer-policy 的值爲 never：刪除 http head 中的 referer；
若是 referer-policy 的值爲 default：若是當前頁面使用的是 https 協議，而正要加載資源使用的是普通的 http 協議，則將 http header 中額 referer 置爲空；
若是 referer-policy 的值 origin：只發送 origin 部分；
若是 referer-policy 的值爲 always：不改變 http header 中的 referer 的值；

舉例

若是頁面中包含了以下 meta 標籤，全部從當前頁面中發起的請求將不會攜帶 referer：