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

这篇具有很好参考价值的文章主要介绍了meta标签name=“referrer“属性的写法和用法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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.toymoban.com/news/detail-693520.html

到了这里,关于meta标签name=“referrer“属性的写法和用法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • html5中的meta标签用法详解

    html5中的meta标签用法详解

    来源:视频砖家 html5中的meta标签主要用于描述网页的元数据,它可以用于描述网页的标题、、描述、作者、版权等信息,还可以用于设置网页的字符集、设置网页的刷新时间、设置网页的跳转页面等。 meta charset=\\\"utf-8\\\":用于定义网页的字符集为 UTF-8,UTF-8 - Unicode 字符

    2024年02月16日
    浏览(12)
  • 【HTML系列】第六章 · 框架标签、HTML实体、HTML全局属性和meta元信息

    【HTML系列】第六章 · 框架标签、HTML实体、HTML全局属性和meta元信息

            Hello大家好, 我是【 麟-小白 】,一位 软件工程 专业的学生,喜好 计算机知识 。希望大家能够一起 学习进步 呀!本人是一名 在读大学生 ,专业水平有限,如发现 错误 或 不足之处 ,请多多指正!谢谢大家!!!         如果 小哥哥小姐姐们 对我的文章感兴趣

    2023年04月08日
    浏览(16)
  • 在前端开发中,什么叫移动设备上的视口?如何通过header标签中的meta属性设置页面的视口。

    移动设备上的视口(Viewport)是指在移动设备上可见的网页区域。由于移动设备的屏幕尺寸和分辨率各不相同,为了确保网页在各种设备上都能正确显示和交互,需要通过视口设置来适配不同的屏幕尺寸。 在移动设备上,网页通常会比在桌面电脑上的屏幕要宽,因此需要缩放

    2024年02月11日
    浏览(13)
  • RabbitMQ启动失败
ERROR: node with name "rabbit" already running on "xxx"

    RabbitMQ启动失败 ERROR: node with name "rabbit" already running on "xxx"

    首先,你得先确认的你得Erlang的版本和RabbitMQ的版本是否能相互兼容,如果不能,请先下载对应的Erlang版本或者RabbitMQ版本。 1. 在Java中使用了RabbitMQ发现不停的尝试连接,却连不上的问题 先在cmd下输入erl,看一下Erlang的环境变量配没有 没有上图这个结果的,先配置对应的Er

    2024年02月12日
    浏览(12)
  • 逍遥自在学C语言  位运算符 "|" 的5种高级用法

    逍遥自在学C语言 位运算符 "|" 的5种高级用法

    在上一篇文章中,我们介绍了 运算符的高级用法,本篇文章,我们将介绍 | 运算符的一些高级用法。 第一位闪亮登场,有请今后会一直教我们C语言的老师 —— 自在。 第二位上场的是和我们一起学习的小白程序猿 —— 逍遥。 通过这篇文章,我们学会了用位运算符 | 的5种高

    2023年04月11日
    浏览(11)
  • HTML <meta> 标签

    meta 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和。 meta 标签位于文档的头部,不包含任何内容。meta 标签的属性定义了与文档相关联的名称/值对。 元素 Chrome IE Firefox Safari Opera meta Yes Yes Yes Yes Yes 所有浏览器都支持 meta 标签。

    2024年02月17日
    浏览(7)
  • 【Python】【进阶篇】34、Django Meta元数据类属性解析

    Model 是 Django ORM 的核心,它有许多特性,比如我们提到过的模型类继承,还有未讲到过的的元数据。每个 Model 都是一个 Python 类,且通常会包含四个部分,它们分别如下: 继承自 django.db.model.Model; Model 元数据声明; Filed类型字段; 魔术方法__str__ 除了元数据以外,其他三个

    2024年02月04日
    浏览(11)
  • Java JDK1.8 Lambda的多种用法,Lambda的多种写法,Lambda的多种写法比较

    说明:泛型String可以灵活,判断条件也是 以前的写法 使用lambda的写法 或1 或2 以前的写法 使用lambda的写法 或对象 删除 .reversed() 为正序 以前的写法 使用lambda的写法 或 以前的写法 使用lambda的写法 以前的写法 使用lambda的写法 以前的写法 使用lambda的写法 或 以前的写法 lamb

    2024年02月15日
    浏览(8)
  • html学习之路:简述html文档头部 <meta> 的 http-equiv 属性

    🧋当输入网址打开网页时,设置html头部 meta 的 http-equiv 属性,可以帮助浏览器更加精确和正常却的显示网页内容,比如设置网页多久自动刷新,设置网页在浏览器缓存中的时限,设置多少事件跳转到指定的网页地址,应对低版本浏览器的渲染兼容问题,以什么样动态的样式

    2024年02月02日
    浏览(17)
  • 【HTML5】HTML5 多媒体标签 ② ( 视频标签 <video> | 视频标签常见属性 | autoplay 属性 | controls 属性 | poster 属性 | 设置多个格式视频 )

    【HTML5】HTML5 多媒体标签 ② ( 视频标签 <video> | 视频标签常见属性 | autoplay 属性 | controls 属性 | poster 属性 | 设置多个格式视频 )

    HTML 5 的 video 视频标签 , 支持 ogg / mpeg 4 ( mp4 ) / webM 三种格式的音频 , 不同的浏览器支持的音频格式不同 ; IE 浏览器 : 9.0 以上版本支持 mp4 格式 ; Firefox 浏览器 : 3.5 以上版本支持 ogg 格式 ; 4.0 以上版本支持 webM 格式 ; Opera 浏览器 : 10.5 以上版本支持 ogg 格式 ; 10.6 以上版本支持

    2024年02月09日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包