meta標簽name="referrer"屬性簡介和用法小結(jié)
我要評論HTML<meta>標簽name="referrer"屬性主要用于控制網(wǎng)頁發(fā)送給服務(wù)器的referrer信息，可以告訴服務(wù)器端用戶是從哪個頁面來到當前網(wǎng)頁的。
什么是referrer？
referrer有“引用頁面”或“來源頁面”的意思，用來指定當前頁面是從哪個頁面跳轉(zhuǎn)過來的，也就是說HTTP請求報頭中的referrer包含了跳轉(zhuǎn)至當前頁面的上一個頁面的url地址；
比如，你點擊A頁面中鏈接到B頁面的URL地址，當你從瀏覽器進入B頁面時，會向服務(wù)器發(fā)送請求，在這個請求的報頭中會帶上一個referrer，包含了A頁面的URL地址；
referrer的作用
referrer可以告訴你用戶是從哪個頁面url地址過來的，這樣就可以用來統(tǒng)計用戶的來源，還可以用于分析用戶的興趣愛好、收集日志、優(yōu)化緩存等等。
如果禁止referrer，可以防止盜鏈，或也可以繞過防盜鏈，也能防范一些攻擊。
referrer的隱患
如果網(wǎng)頁中，由于涉及隱私和安全問題，防止 referrer 泄漏就顯得很重要了。
比如，很多情況下我們的url會包含用戶的個人信息。因此，有時候，我們需要移除或禁用頁面上的referer信息
再比如，在后臺中使用了referer屬性，會導(dǎo)致js和php的一些跳轉(zhuǎn)出現(xiàn)問題，同時，也很有可能會導(dǎo)致一些第三方的統(tǒng)計代碼失效，比如cnzz，百度統(tǒng)計，解決方法是不用該屬性，或者使用iframe包裹一層，用一個獨立的html頁面加載統(tǒng)計代碼！
referrer屬性寫法
在html頁面中的<head>頭部區(qū)域用meta標簽添加referrer屬性
Markup
<meta name="referrer" content="屬性值">
content后面的“屬性值”，常見有以下幾種：
no-referrer：任何情況下都不發(fā)送Referrer信息；
no-referrer-when-downgrade：僅當協(xié)議降級（如從HTTPS頁面跳轉(zhuǎn)到HTTP頁面）時不發(fā)送Referrer信息。是大部分瀏覽器默認策略。
origin：發(fā)送只包含host部分的referrer信息，也就是只包含了協(xié)議和域名的url，不包含域名后面部分，比如，來源網(wǎng)頁url是https://baidu.com/1.html，但referrer值只包含http://www.baidu.com；
origin-when-cross-origin：僅在發(fā)生跨域訪問時，發(fā)送只包含host的Referer信息，但在同域下還是完整的，而只有協(xié)議、域名和端口都一致時，瀏覽器才認為是同域。
unsafe-url：全部都發(fā)送Referrer信息，是最寬松，也是最不安全的策略
溫馨提示：
1、referrer屬性的<meta> 標簽需要放在 <head> ...</head> 之間，如果出現(xiàn)的位置不對就會被忽略。
2、如果沒有content 屬性，或者 content 屬性值為空，也會被忽略。
3、如果 content 屬性后面的取值不合法，瀏覽器會自動選擇 no-referrer 。
referrer屬性用法
在html網(wǎng)頁文檔中，有兩種方式，可以添加發(fā)送請求的referrer信息，分別是<meta>標簽法和單個連接標簽法
1、<meta>標簽法（針對整個頁面）
這種方法是針對屬于當前網(wǎng)頁中的所有鏈接，從任何一個鏈接跳轉(zhuǎn)到其他頁面，都會帶上referrer信息。
如果想要在任何情況下，當前頁面發(fā)送的請求不攜帶referrer信息，就這樣寫：
<meta name="referrer" content="no-referrer">
如果想要在任何情況下，當前頁面發(fā)送的請求包含referrer信息，就這樣寫：
<meta name="referrer" content="unsafe-url">
這種情況下，如果當前頁面使用了 https 協(xié)議，而要加載的資源使用的是 http 協(xié)議，加載資源的請求頭中也會攜帶 referer。
2、單個鏈接標簽法
這種方法可以只針對網(wǎng)頁中具體的某一個或多個鏈接單獨設(shè)置referrer，常常運用在<a>、<img>、<area>、<iframe>、<link>標簽上。
<a rel="no-referrer" href="http://www.baidu.com" />百度</a>
<img rel="no-referrer" src="logo.png" />
值得注意的是：
這種單個鏈接標簽法，只對該標簽中鏈接有效，且referrer的屬性值，只有三個，分別是：no-referrer、origin、unsafe-url；而且，單個鏈接標簽法設(shè)置referrer的優(yōu)先級比<meta>標簽法要高。
另外，<a>、<area>、<link>標簽中的單個鏈接，還可以使用rel="noreferrer"屬性達到和no-referrer同樣的效果，寫法如下：
<a rel="noreferrer" />百度</a>
同樣的，該方法使用rel="noreferrer"屬性設(shè)置referrer的優(yōu)先級比<meta>標簽法要高。
3、HTML Img標簽 src為網(wǎng)絡(luò)地址無法顯示圖片問題解決
原理解析：
http請求頭中有一個referrer字段，用來表示發(fā)起http請求的源地址信息
服務(wù)器端在拿到這個referrer值后判斷請求是否來自本站
若不是則返回403，從而實現(xiàn)圖片的防盜鏈。
上面出現(xiàn)403就是因為，請求的是別人服務(wù)器上的資源，但把自己的referrer信息帶過去了，被對方服務(wù)器攔截返回了403
在前端可以通過meta來設(shè)置referrer policy(來源策略)，referrer設(shè)置成no-referrer，發(fā)送請求不會帶上referrer信息，對方服務(wù)器也就無法攔截了
到此這篇關(guān)于meta標簽name="referrer"屬性的寫法和用法的文章就介紹到這了,更多相關(guān)meta標簽name="referrer"屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- 這篇文章主要介紹了HTML中meta標簽及Keywords的相關(guān)資料,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-15
- 本文給大家介紹了html5中各種頭部meta標簽功能小結(jié)，非常不錯，具有參考借鑒價值，需要的的朋友參考下2017-03-13
- 這篇文章給大家查找總結(jié)了一些HTML5頭部<meta>標簽常用的一些信息，文章給出了示例代碼與注釋，介紹的很詳細，感興趣的朋友們下面來一起看看吧。2016-10-23
- 制作手機版網(wǎng)站的時候，除了頁面簡潔、操作方便等訪問者可以看到的地方以外，就是 Meta 標簽的設(shè)置，合理設(shè)置 Meta 標簽 對手機版網(wǎng)站的搜索引擎優(yōu)化，手機瀏覽器的渲染展2016-01-06
- 這篇文章主要介紹了HTML5下meta標簽的一些應(yīng)用方法實例,包括在移動前端頁面上的一個使用例子,需要的朋友可以參考下2015-12-08