专栏首页前端小叙微信公众号复制的图片可以正常显示的办法

微信公众号复制的图片可以正常显示的办法

通过浏览多方文章,找到了一个 非常好用但是也有很大的坑的办法:

在页面中加meta:

<meta name="referrer" content="never">

亲测遇到的坑:

首先,微信复制的图片,自己网站作为引用,在pc端任何地方都显示:"本图片来自微信公众号,未经许可,不能引用..."之类的字样在安卓ap端其实是可以正常显示的,在ios的app端显示为空白

当加了该meta之后,在pc所有地方都可以正常显示了,但是ios的app端依然显示为空白......所以使用该方法如果仅限于在pc端的话,,没毛病.

这里了解一下referer是什么:

referrer 属性可返回载入当前文档的文档的 URL。

如果当前文档不是通过超级链接访问的,则为 null。这个属性允许客户端 JavaScript 访问 HTTP 引用头部。

referer 的 metedata 参数可以设置为以下几种类型的值:

never

always

origin

default

如果在文档中插入 meta 标签,并且 name 属性的值为 referer,浏览器客户端将按照如下步骤处理这个标签:

1.如果 meta 标签中没有 content 属性,则终止下面所有操作

2.将 content 的值复制给 referrer-policy ,并转换为小写

3.检查 content 的值是否为上面 list 中的一个,如果不是,则将值置为 default

上述步骤之后,浏览器后续发起 http 请求的时候,会按照 content 的值,做出如下反应(下面 referer-policy 的值即 meta 标签中 content 的值):

1.如果 referer-policy 的值为never:删除 http head 中的 referer;

2.如果 referer-policy 的值为default:如果当前页面使用的是 https 协议,而正要加载的资源使用的是普通的 http 协议,则将 http header 中的 referer 置为空;

3.如果 referer-policy 的值为 origin:只发送 origin 部分;

4.如果 referer-policy 的值为 always:不改变http header 中的 referer 的值,注意:这种情况下,如果当前页面使用了 https 协议,而要加载的资源使用的是 http 协议,加载资源的请求头中也会携带 referer。

例子

如果页面中包含了如下 meta 标签,所有从当前页面中发起的请求将不会携带 referer:

<meta name="referrer" content="never">

如果页面中包含了如下 meta 标签,则从当前页面中发起的 http请求将只携带 origin 部分(注:根据原文中的语境,我理解这里的 origin 是包含了 schema 和 hostname 的部分 url,不包含 path 等后面的其他 url 部分),而不是完整的 URL :

<meta name="referrer" content="origin">

注意:在使用本文中所述的 meta 标签的时候,浏览器原有的 referer 策略将被打破,比如从 http 协议的页面跳转到 https 的页面的时候,如果设置了适当的值,也会携带 referer。

此段摘自:http://www.freebuf.com/news/57497.html

反盗链的原理

官方输出图片的时候,判断了来源(Referer),就是从哪个网站访问这个图片,如果是你的网站去加载这个图片,那么Referer就是:你的网站地址;;你网站地址,肯定没在官方的白名单内,所以就看不到图片了。

不发送Referer,也就是没有来源。那么官方那边,就认为是从浏览器直接访问的,所以就能加载正常的图片了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js通过闭包实现多个相同事件只需绑定一次

    蓓蕾心晴
  • js插入节点appendChild和insertBefore

    首先 从定义来理解 这两个方法:  appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点。语法:appendChild(newchild)...

    蓓蕾心晴
  • 文字描边css

    -webkit-text-stroke: 3.3px #2A75BF; -webkit-text-fill-color:#fff; 该方法在安卓端貌似不支持,显...

    蓓蕾心晴
  • PicGo – 免费开源的图片上传与管理工具 (Markdown写作贴图 / 跨平台图床应用)

     建站不免会加入一些图片进行展示、说明,亦或者装饰,但是内容多了,图片也随之增加,保存本地略显臃肿,不利于搬迁网站,但搭建图床网站未免也是如此,那么如何节省空间...

    夏末浅笑
  • iPhoneX 适配实践

    发布了 iPhoneX 后,那齐刘海的布局一定给你带来不少困扰,希望阅读本文后能给你带来帮助。

    张添富
  • 【DB笔试面试578】在Oracle中,什么是会话游标?会话游标和共享游标的区别有哪些?会话游标分为哪几类?

    在Oracle中,什么是会话游标?会话游标和共享游标的区别有哪些?会话游标分为哪几类?

    小麦苗DBA宝典
  • 我在新版 Creator 2.4.0 发布头条小游戏遇到的坑!不过我爬出来了!

    因为我们发布头条小游戏基本都是通过微信小游戏修改后上线,但是头条小游戏是不支持分包加载的,只能把资源都放到resource下,这岂不是尴尬了吗?

    张晓衡
  • 分享 10个我常逛的国外技术社区,真的受益匪浅!

    经常有小伙伴问:“小富,有什么国外的技术社区、博客推荐吗?” 总有人问,索性我就把自己经常访问的10个国外技术社区分享出来。想要玩转这些资源的前提,要么自身外语...

    程序员内点事
  • 如何在Selenium WebDriver中查找元素?(一)

    有多种方法可以唯一地标识网页中的一个Web元素,例如ID,名称,类名,链接文本,部分链接文本,标记名和XPATH。

    用户7466307
  • 网页设计师面试题与答案1

    今天有个学生发了一个公司的面试题,发给大家思考一下。 文件夹中有两个文件如下: ? 图片文件squares.png显示如下 ? 文件assignment...

    用户1730674

扫码关注云+社区

领取腾讯云代金券