HTML<meta>标签name="referrer"属性主要用于控制网页发送给服务器的referrer信息,可以告诉服务器端用户是从哪个页面来到当前网页的。
什么是referrer?
referrer有“引用页面”或“来源页面”的意思,用来指定当前页面是从哪个页面跳转过来的,也就是说HTTP请求报头中的referrer包含了跳转至当前页面的上一个页面的url地址;
比如,你点击A页面中链接到B页面的URL地址,当你从浏览器进入B页面时,会向服务器发送请求,在这个请求的报头中会带上一个referrer,包含了A页面的URL地址;
referrer的作用
referrer可以告诉你用户是从哪个页面url地址过来的,这样就可以用来统计用户的来源,还可以用于分析用户的兴趣爱好、收集日志、优化缓存等等。
如果禁止referrer,可以防止盗链,或也可以绕过防盗链,也能防范一些攻击。
referrer的隐患
如果网页中,由于涉及隐私和安全问题,防止 referrer 泄漏就显得很重要了。
比如,很多情况下我们的url会包含用户的个人信息。因此,有时候,我们需要移除或禁用页面上的referer信息
再比如,在后台中使用了referer属性,会导致js和php的一些跳转出现问题,同时,也很有可能会导致一些第三方的统计代码失效,比如cnzz,百度统计,解决方法是不用该属性,或者使用iframe包裹一层,用一个独立的html页面加载统计代码!
referrer属性写法
在html页面中的<head>头部区域用meta标签添加referrer属性
Markup
<meta name="referrer" content="属性值">
content后面的“属性值”,常见有以下几种:
no-referrer:任何情况下都不发送Referrer信息;
no-referrer-when-downgrade:仅当协议降级(如从HTTPS页面跳转到HTTP页面)时不发送Referrer信息。是大部分浏览器默认策略。
origin:发送只包含host部分的referrer信息,也就是只包含了协议和域名的url,不包含域名后面部分,比如,来源网页url是https://baidu.com/1.html,但referrer值只包含http://www.baidu.com;
origin-when-cross-origin:仅在发生跨域访问时,发送只包含host的Referer信息,但在同域下还是完整的,而只有协议、域名和端口都一致时,浏览器才认为是同域。
unsafe-url:全部都发送Referrer信息,是最宽松,也是最不安全的策略
温馨提示:
1、referrer属性的<meta> 标签需要放在 <head> ...</head> 之间,如果出现的位置不对就会被忽略。
2、如果没有content 属性,或者 content 属性值为空,也会被忽略。
3、如果 content 属性后面的取值不合法,浏览器会自动选择 no-referrer 。
referrer属性用法
在html网页文档中,有两种方式,可以添加发送请求的referrer信息,分别是<meta>标签法和单个连接标签法
1、<meta>标签法(针对整个页面)
这种方法是针对属于当前网页中的所有链接,从任何一个链接跳转到其他页面,都会带上referrer信息。
如果想要在任何情况下,当前页面发送的请求不携带referrer信息,就这样写:
<meta name="referrer" content="no-referrer">
如果想要在任何情况下,当前页面发送的请求包含referrer信息,就这样写:
<meta name="referrer" content="unsafe-url">
这种情况下,如果当前页面使用了 https 协议,而要加载的资源使用的是 http 协议,加载资源的请求头中也会携带 referer。
2、单个链接标签法
这种方法可以只针对网页中具体的某一个或多个链接单独设置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;而且,单个链接标签法设置referrer的优先级比<meta>标签法要高。
另外,<a>、<area>、<link>标签中的单个链接,还可以使用rel="noreferrer"属性达到和no-referrer同样的效果,写法如下:
<a rel="noreferrer" href="http://www.baidu.com" />百度</a>
同样的,该方法使用rel="noreferrer"属性设置referrer的优先级比<meta>标签法要高。
3、HTML Img标签 src为网络地址无法显示图片问题解决
原理解析:
http请求头中有一个referrer字段,用来表示发起http请求的源地址信息
服务器端在拿到这个referrer值后判断请求是否来自本站
若不是则返回403,从而实现图片的防盗链。
上面出现403就是因为,请求的是别人服务器上的资源,但把自己的referrer信息带过去了,被对方服务器拦截返回了403
在前端可以通过meta来设置referrer policy(来源策略),referrer设置成no-referrer,发送请求不会带上referrer信息,对方服务器也就无法拦截了
到此这篇关于meta标签name="referrer"属性的写法和用法的文章就介绍到这了,更多相关meta标签name="referrer"属性内容请搜索好代码网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持好代码网!