使用Referrer Policy解决第三方平台的照片在https站点无法打开的问题

在https站点中使用微信公众平台的二维码时,提示此图片来自xxx,未经允许不可使用。遇到这样的问题应该如何解决呢? 先说解决方案,在img标签中添加referrerpolicy属性值为no-referrer img src="xxx.jpg?imageView2/0/w/818" referrerpolicy="no-referrer" /
在https站点中使用微信公众平台的二维码时,提示此图片来自xxx,未经允许不可使用。遇到这样的问题应该如何解决呢?
先说解决方案,在img标签中添加referrerpolicy属性值为no-referrer
<img src="xxx.jpg?imageView2/0/w/818" referrerpolicy="no-referrer" />
Referrer-Policy
当用户在浏览器上点击一个链接时,会产生一个 HTTP 请求,用于获取新的页面内容,而在该请求的报头中,会包含一个 Referrer,用以指定该请求是从哪个页面跳转页来的,常被用于分析用户来源等信息。
// 整个 Referer 首部会被移除。访问来源信息不随着请求一起发送
Referrer-Policy: no-referrer
// 在没有指定任何策略的情况下用户代理的默认行为
Referrer-Policy: no-referrer-when-downgrade
// 在任何情况下,仅发送文件的源作为引用地址
Referrer-Policy: origin
// 对于同源的请求,会发送完整的URL作为引用地址,但是对于非同源请求仅发送文件的源。
Referrer-Policy: origin-when-cross-origin
// 对于同源的请求会发送引用地址,但是对于非同源请求则不发送引用地址信息
Referrer-Policy: same-origin
// 在同等安全级别的情况下,发送文件的源作为引用地址(HTTPS->HTTPS),但是在降级的情况下不会发送 (HTTPS->HTTP)
Referrer-Policy: strict-origin
// 对于同源的请求,会发送完整的URL作为引用地址;在同等安全级别的情况下,发送文件的源作为引用地址(HTTPS->HTTPS);在降级的情况下不发送此首部 (HTTPS->HTTP)
Referrer-Policy: strict-origin-when-cross-origin
// 无论是同源请求还是非同源请求,都发送完整的 URL(移除参数信息之后)作为引用地址。
Referrer-Policy: unsafe-url

使用方式

1、Request Header中直接设置Referrer-Policy
Referrer-Policy: no-referrer;
2、在HTML文件中通过meta标签指定
<meta name="referrer" content="no-referrer" />
3、在HTML标签上使用referrerpolicy属性设置
a 和 link 标签可以通过属性 rel 指定 noreferrer,仅对当前链接有效;
a、area、link、iframe 和 img 还可以通过 referrerpolicy 指定仅针对当前链接的设置
<a href="http://dysong.com" rel="no-referrer|origin|...">xxx</a>
<img src="xxx.jpg?imageView2/0/w/818" referrerpolicy="no-referrer|origin|..." />
 
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!

相关文档推荐

除了通过data-toggle和data-target来控制模态弹出窗之外,Bootstrap框架针对模态弹出框还提供了其他自定义data-属性,来控制模态弹出窗。比如说:是否有灰色背景modal-backdrop,是否可以按ESC键关闭模态弹出窗。有关于Modal弹出窗自定义属性相关说明如下所示
layui中tree组件使用报错tree.render is not a function,错误信息如下: Uncaught TypeError:tree.render is not a functionat n .anonymoustree:21at c (layui.js?111:2)at r (layui.js?111:2) 解决方案一:可能你是用的layui的版本为2.5之前的版本,他将
Layui在table中使用select,这个要怎么操作呢? 1、穿梭框 Layui从2.5.0版本增加了穿梭框,但项目要求左右两边均是表格,无奈只好使用第三方的穿梭框。 2、左右两边的表列数显示不一样 在原代码的基础上修改,使之支持两表的列定义。 3、未选择行,两表中间的
LayUI Table列的显示与隐藏可以通过CSS样式来控制,但是效果不是很满意。这里我通过修改列hide属性后重载表格来实现个别列的显示与隐藏。 1.单独定义表格形式: let cols1 = [ { type: 'numbers', title: '序号', width: 60, align: 'center' } , { field: 'M
我们有时在开发项目是需要用到树形接口,这时我们可以 Layui 的树形表格treetable插件。如果需要将树形表格保持展开要怎么操作呢?下面我们来看下参数: 参数说明: 参数 类型 是否必填 描述 treeColIndex int 是 树形图标显示在第几列 treeSpid object 是 最