遇到的問題
如下圖,項目內訪問403,當時瀏覽器打開圖片地址是可以訪問的。
解決方案
<meta name="referrer" content="no-referrer" /><!--頁面頭部添加-->
原因:
- http請求體的header中有一個referrer字段,用來表示發起http請求的源地址信息,這個referrer信息是可以省略但是不可修改的,就是說你只能設置是否帶上這個referrer信息,不能定製referrer裏面的值。
- 服務器端在拿到這個referrer值後就可以進行相關的處理,比如圖片資源,可以通過referrer值判斷請求是否來自本站,若不是則返回403或者重定向返回其他信息,從而實現圖片的防盜鏈。上面出現403就是因爲,請求的是別人服務器上的資源,但把自己的referrer信息帶過去了,被對方服務器攔截返回了403。
- 在前端可以通過meta來設置referrer policy(來源策略),具體可以設置哪些值以及對應的結果參考這裏。所以針對上面的403情況的解決方法,就是把referrer設置成no-referrer,這樣發送請求不會帶上referrer信息,對方服務器也就無法攔截了。
-
隱藏referrer信息後,圖片資源可以正常訪問
瀏覽器中referrer默認的值是no-referrer-when-downgrade,就是除了降級請求的情況以外都會帶上referrer信息。降級請求是指https協議的地址去請求http協議,所以上面403的情況還有另一種解決方法就是,請求的圖片地址換成http協議,自己的地址使用http協議,這樣降級請求也不會帶上referrer。
nginx配置圖片防盜鏈
最後再說一下這種根據referrer攔截,在服務器如何配置。
我自己服務器用的nginx,這裏就說下nginx的配置。首先打開nginx的配置文件: conf/nginx.conf,在server下面添加如下:
location ~* \.(gif|jpg|png|jpeg)$ { valid_referers none valid.url.com; if ($invalid_referer) { return 403; } }
首先第一句 以文件格式後綴匹配出圖片資源路徑,然後通過 valid_referers添加合法的referer地址,加上none,表示沒有傳referer也是合法的,最後referer不合法的情況返回403。如果想跳其他地址 或 返回其他圖片資源可以這樣:rewrite xxx.xxx.com/xxx.jpg。
orgin
http頭部中還有一個與referrer類似的叫 orgin 的字段,在發送跨域請求或預檢請求(preflight request)時會帶上這個參數,他用來表示發起請求的服務器地址,這個參數是必定會傳的,然後服務器端用此字段來判斷是否允許跨域。
meta說明大全
<meta charset="utf-8"> <!-- 設置文檔字符編碼 --> <meta http-equiv="x-ua-compatible" content="ie=edge"><!-- 告訴IE瀏覽器,IE8/9及以後的版本都會以最高版本IE來渲染頁面。 --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- 指定頁面初始縮放比例。--> <!-- 上述3個meta標籤須放在head標籤最前面;其它head內容放在其後面,如link標籤--> <!-- 允許控制加載資源 --> <meta http-equiv="Content-Security-Policy" content="default-src 'self'"> <!-- 儘可能早的放在文檔 --> <!-- 只適用於下面這個標籤的內容 --> <!-- 使用web應用程序的名稱(當網站作爲一個應用程序的時候)--> <meta name="application-name" content="Application Name"> <!-- 頁面的簡短描述(限150個字符)--> <!-- 在某些情況下這個描述作爲搜索結果中所示的代碼片段的一部分。--> <meta name="description" content="A description of the page"> <!-- 控制搜索引擎爬行和索引的行爲 --> <meta name="robots" content="index,follow,noodp"><!-- 所有搜索引擎 --> <meta name="googlebot" content="index,follow"><!-- 谷歌 --> <!-- 告訴谷歌搜索框不顯示鏈接 --> <meta name="google" content="nositelinkssearchbox"> <!-- 告訴谷歌不要翻譯這個頁面 --> <meta name="google" content="notranslate"> <!-- Google網站管理員工具的特定元標記,覈實對谷歌搜索控制檯所有權 --> <meta name="google-site-verification" content="verification_token"> <!-- 說明用什麼軟件構建生成的網站,(例如,WordPress,Dreamweaver) --> <meta name="generator" content="program"> <!-- 簡短描述你的網站的主題 --> <meta name="subject" content="your website's subject"> <!-- 很短(10個詞以內)描述。主要學術論文 --> <meta name="abstract" content=""> <!-- 完整的域名或網址 --> <meta name="url" content="https://example.com/"> <meta name="directory" content="submission"> <!-- 對當前頁面一個等級衡量,告訴蜘蛛當前頁面在整個網站中的權重到底是多少。General是一般頁面,Mature是比較成熟的頁面,Restricted代表受限制的。 --> <meta name="rating" content="General"> <!-- 隱藏發送請求時請求頭表示來源的referrer字段。 --> <meta name="referrer" content="no-referrer"> <!-- 禁用自動檢測和格式的電話號碼 --> <meta name="format-detection" content="telephone=no"> <!-- 通過設置“off”,完全退出DNS隊列 --> <meta http-equiv="x-dns-prefetch-control" content="off"> <!-- 在客戶端存儲 cookie,web 瀏覽器的客戶端識別--> <meta http-equiv="set-cookie" content="name=value; expires=date; path=url"> <!-- 指定要顯示在一個特定框架中的頁面 --> <meta http-equiv="Window-Target" content="_value"> <!-- 地理標籤 --> <meta name="ICBM" content="latitude, longitude"> <meta name="geo.position" content="latitude;longitude"> <meta name="geo.region" content="country[-state]"><!-- 國家代碼 (ISO 3166-1): 強制性, 州代碼 (ISO 3166-2): 可選; 如 content="US" / content="US-NY" --> <meta name="geo.placename" content="city/town"><!-- 如 content="New York City" -->