Vue图片403报错处理(referrerpolicy=no-referrer)

富文本中录入了一些文字加第三方的图片,之后在结果页面显示录入的文字+图片,部分图片不能正常显示

 <img src="xxxx.jpg"  referrerPolicy="no-referrer" />

网页在加载资源时,默认在请求头里会带有当前网址
如果服务端做了限制,非同源的网址或者非白名单中的网址不能访问,就会出现403

Vue图片403报错处理(referrerpolicy=no-referrer)_第1张图片
如果给链接加属性 referrerPolicy=“no-referrer” 则会在请求头里会屏蔽掉 Referer 的发送,此时图片便能正常访问了
Vue图片403报错处理(referrerpolicy=no-referrer)_第2张图片

下面是在vue中使用的几个坑
(1)兼容性问题
Vue图片403报错处理(referrerpolicy=no-referrer)_第3张图片
网上给的方法除了 给img标签加属性外,也可以加meta

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

此方法经试验是有效的,但是会将所有的请求的请求头中的 Referer 都去掉
都去掉其实在网页显示上是不会有什么问题的,但是如果有以下场景就得注意了

  1. 在后台中使用了该标签,会导致js和php的一些跳转出现问题,比如js的history.back()方法将找不到上一个页面,因为被禁止referrer了,php的$_[‘HTTP_REFERRER’]
    也同样为空值
  2. 该属性会导致一些第三方的统计代码失效,比如cnzz,百度统计,解决方法是使用iframe包裹一层,用一个单独的html加载统计代码

各有利弊
(2)网页的缓存问题
如果我们在网页中插入一个img标签,网页会去请求这个img标签所指向的地址,这是对的
但是这并不限于 img 标签必须出现在页面里,出现在缓存里同样有效

现在有这样的第一个字符串
需要利用Vue中的 v-html 显示到网页中
链接是第三方且加了防盗链的话,直接v-html不会显示

let str =  ''
let $d = $(str)
$d.find('img').each(function(){
	$(this).attr('referrerPolicy','no-referrer')
})
return $d.prop("outerHTML")

经过这样处理看起来是没问题的,但是实际上是不行的,F12查看图片的确加上了这个属性,但是还是报403
这里的原因是因为 第二行 的时候会生成一个 虚拟的 img 这个时候就回去请求图片

注意这个时候 img 上是没有 referrerPolicy 这个属性的

再之后 v-html 请求的时候 其实相当于是第二次请求,会走缓存

一张图片的请求时长是 5s (假设),如果第一张图片还没请求完成,这个时候再请求一次,浏览器肯定是做了处理不会再次请求,而是将两次并为一次

所以,图片不显示的问题就知道原因了,虚拟dom果然还是有坑的

(3)v-html不支持filter,无法全局使用
这个不多加赘述,网上的博文一大堆

简单使用如下

// filter.js
const Picture403filter = function(val) {
    try{
        return val.replace(" {
    Vue.filter(key, filters[key])
})

// *.vue
v-html='$options.filters.Picture403filter(xxxx)

参考文档
https://blog.csdn.net/VhWfR2u02Q/article/details/80088388
主流浏览器图片反防盗链方法总结
https://blog.csdn.net/weixin_43627766/article/details/91418873
meta使用referrer要注意的问题
https://blog.csdn.net/oucqsy/article/details/75099037
v-html中使用filters

你可能感兴趣的:(vue,js)