img 標籤 訪問圖片 返回403 forbidden問題

1.異常信息 F12

 

2.解決方案

<meta name="referrer" content="no-referrer" /><!--頁面頭部添加-->

 

 

3.說明:

<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" -->

 備註說明:

html訪問圖片資源403問題(http referrer)

前言

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

  
  
   

  
• 先說下解決方法： 在HTML代碼的head中添加一句<meta name="referrer" content="no-referrer" />便可，後面再說下原理。

http請求中的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)時會帶上這個參數，他用來表示發起請求的服務器地址，這個參數是一定會傳的，而後服務器端用此字段來判斷是否容許跨域。