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

  
 在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|..." />
相关文章
前端开发最新文章
热门教程