主题
项目中遇到引用一些网络图片资源,显示无法加载,但是在浏览器打开图片路径又可以显示的问题
解决办法
- 在图片显示的界面把
meta referrer
标签改为never
html
<meta name="referrer" content="never" />
- 或者在
img
标签上加上
js
referrerpolicy = 'no-referrer'
meta referrer 标签
通过 Referrer Policy
介绍,了解到,这是一种引用策略,可以用来防止图片或视频被盗。
- No Referrer:任何情况下都不发送 Referrer 信息;
- No Referrer When Downgrade:仅当发生协议降级(如 HTTPS 页面引入 HTTP 资源,从 HTTPS 页面跳到 HTTP 等)时不发送 Referrer 信息。这个规则是现在大部分浏览器默认所采用的;
- Origin Only:发送只包含 host 部分的 Referrer。启用这个规则,无论是否发生协议降级,无论是本站链接还是站外链接,都会发送 Referrer 信息,但是只包含协议 + host 部分(不包含具体的路径及参数等信息);
- Origin When Cross-origin:仅在发生跨域访问时发送只包含 host 的 Referrer,同域下还是完整的。它与 Origin Only 的区别是多判断了是否 Cross-origin。需要注意的是协议、域名和端口都一致,才会被浏览器认为是同域;
- Unsafe URL:无论是否发生协议降级,无论是本站链接还是站外链接,统统都发送 Referrer 信息。正如其名,这是最宽松而最不安全的策略;
关于如何运用,在 Referrer
策略与防盗链中也找到了用法,
这里只举例说一下 img 的:
通过<a>
、<area>
、<img>
、<iframe>
、<link>
元素的 referrerpolicy
属性来规定策略。