项目进行高危漏洞测试的时候发现高危漏洞, 音视频图片文件等是真实访问地址, 需要隐藏真实的音视频图片访问地址

最新推荐文章于 2024-10-04 17:24:00 发布

guojun@07

最新推荐文章于 2024-10-04 17:24:00 发布

阅读量168

点赞数 3

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/guojun19900715/article/details/138221809

版权

1.1 vue2项目封装的自定义指令, 将如下代码添加到全局的main.js文件中

Vue.directive('binary-src', {  
  inserted: function (el, binding) {  
    // 假设 binding.value 是图片的 URL  
    const url = binding.value;  
    // 使用 fetch API 获取图片资源  
    fetch(url)  
      .then(response => response.blob()) // 转换为 Blob 对象  
      .then(blob => {  
        // 创建一个 URL 对象，指向 Blob 数据  
        const objectURL = URL.createObjectURL(blob);  
        // 设置元素的 src 属性为 Blob URL  
        el.src = objectURL;  
      })  
      .catch(error => {  
        console.error('Error fetching image:', error);  
      });  
  }  
})

1.2 自定义指令的使用

<img v-binary-src="真实的url地址">
<audio v-binary-src="真实的url地址" controls/>
<video v-binary-src="真实的url地址" controls />
<iframe v-binary-src="真实的url地址" />

2. 处理后端返回数据的url 函数

// 将
function handleUrlToBlob async (url) {
	// 将文件下载到本地
	let response = await fetch(url)
	// 将文件转成数据流
	let blob = await response.blob()
	// 生成本地预览地址url
	let blobUrl = URL.createObjectURL(blob)
	return blobUrl
}