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