iframe解决图片防盗链，并解决iframe对事件的拦截_react iframe 拦截

作者：Monodyee | 2024-03-04 19:29:28

踩

react iframe 拦截

iframe解决图片防盗链，并解决iframe对事件的拦截

图片资源因防盗链而无法加载。
思路：用iframe加载一个页面，该页面空referrer请求资源。

图片资源因防盗链而无法加载。

我在引用外部图片资源时，提示403。很显然对referrer进行了过滤。浏览器新窗口试一下，发现可以打开，说明空referrer可以解决这个问题。
在head标签加上<meta name="referrer" content="never">就可以打开了。
但是这样有个问题，不仅请求资源不带referrer，打开新网页也没有referrer了。显然这不是我想要的结果。

思路：用iframe加载一个页面，该页面空referrer请求资源。

新建一个image.html、image.js。在image.html引入image.js，在js脚本中通过解析页面url链接location.href来获取要请求的资源链接。需要注意的是，在传递参数时候，不要使用传统的’?’，使用锚#来分隔链接和参数。

<a class="art" target="_blank" href="/post/1.html">
	<div class="img"><iframe seamless src="/image.html#image=/image.jpg"></iframe></div>
	<span class="title font-14 m-t-8 line-text-2"title</span>
</a>
1
2
3
4

需要注意，iframe内的内容并不能自适应大小，如果不处理，img会被拉伸，不能正常展示，应该给iframe设置确定的宽高。我在iframe外面嵌套了一个div，设置宽高，并将iframe设置宽高均为100%（其实直接给iframe设置宽高就行了，因为在处理防盗链以前，我的img标签外包裹一个div实现图片自适应缩放，为了少改代码就这样了）。

/* 自适应缩放图片 */
/* 根据实际情况设置宽高 */
.img{position: relative;overflow: hidden;}
.img iframe {border: none;width: 100%;height: 100%;border-radius: 4px;pointer-events: none;}
1
2
3
4

pointer-events: none很重要，阻止鼠标事件，移动端touch事件也能阻止。如果在幻灯、翻页组件中使用，是必不可少的。

<!DOCTYPE html>
<html>
<head>
	<title></title>
    <meta name="referrer" content="never">
    <meta http-equiv="expires" content="2626560">
    <style type="text/css">
    	*{margin: 0;padding: 0;border: none;overflow: hidden;}
        body{position: absolute;width: 100%;height: 100%;}
    	img{width: 100%;height: 100%;}
    </style>
</head>
<body>
	<img style="" src="/static/image/cover.png">
	<script type="text/javascript" src="/static/js/image.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

除了<meta name="referrer" content="never">以外，<meta http-equiv="expires" content="2626560">也是必不可少的，设置浏览器缓存，我设置了一个月，建议设置大于一天。
还记得前面传递参数时时候用锚链接吗？使用锚链接可以使用缓存，传统?来分隔参数会在参数变化时重新请求image.html。这是没有必要的，徒增服务器压力。

image.js

function param(key) {
	var params = new Array();
	var url = location.href;
	var url = url.split('#',2).length==2 ? url.split('#',2)[1] : null;
	if (url!==null) {
		url = url.split('&')
		url.forEach(function(item,index){
			var data = item.split('=',2);
			params[data[0]] = data.length==2 ? data[1] : '';
		});
	}
	return params.hasOwnProperty(key) ? params[key] : '';
}
	
var image = param('image').length>0 ? param('image') : "/static/image/cover.png";
document.querySelector('img').setAttribute('src', image);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/188446?site