首页 前端知识 meta标签name=“referrer“属性的写法和用法

meta标签name=“referrer“属性的写法和用法

2024-05-03 18:05:48 前端知识 前端哥 839 508 我要收藏

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信息,对方服务器也就无法拦截了

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6808.html
标签
服务器
评论
会员中心 联系我 留言建议 回顶部
复制成功!