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

最新推荐文章于 2024-06-25 22:12:59 发布

原创

最新推荐文章于 2024-06-25 22:12:59 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

当遇到图片资源因防盗链无法加载时，可以通过在<head>标签中添加指令来实现空referrer加载图片。然而，这会导致所有新窗口打开也无referrer。为了解决这个问题，文章提出使用iframe加载一个专门的页面，该页面请求资源时无referrer。同时，文中详细介绍了如何处理iframe的大小适应，以及阻止鼠标和触摸事件以避免事件拦截。还提到了利用锚链接传递参数以利用浏览器缓存，减少服务器压力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

我在引用外部图片资源时，提示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="/https/blog.csdn.net/post/1.html">
	<div class="img"><iframe seamless src="/https/blog.csdn.net/image.html#image=/image.jpg"></iframe></div>
	<span class="title font-14 m-t-8 line-text-2"title</span>
</a>

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