欢迎访问响应式SPA SSR网站!

English
原创前端技术博客,致力于分享前端学习路上的第一手资料。专注 web 前端开发、移动端开发、前端工程化、前端职业发展,做最有价值的前端技术学习网站。

前端·小阳仔

关注互联网和前端开发技术的博客网站!

当前位置: 导航  >  前端小知识  >  文章详情

解决访问站外图片403(referrer)问题

发布时间:2024-03-18   作者:富朝阳    我要评论我要评论

问题

我们在使用站外图片的时候,访问图片403,但是浏览器直接访问图片链接可以打开,这是为什么呢?

解决访问站外图片403(referrer)问题

原因

http请求体的header中有一个referrer字段,用来表示发起http请求的源地址信息,这个referrer信息是可以省略但是不可修改的,就是说你只能设置是否带上这个referrer信息,不能定制referrer里面的值。服务器端在拿到这个referrer值后就可以进行相关的处理,比如图片资源,可以通过referrer值判断请求是否来自本站,若不是则返回403或者重定向返回其他信息,从而实现图片的防盗链。上面出现403就是因为,请求的是别人服务器上的资源,但把自己的referrer信息带过去了,被对方服务器拦截返回了403。

如何解决

在前端可以通过meta来设置referrer policy(来源策略),那么referrer有哪些属性参数呢?

属性描述
no-referrer不发送引用者信息。
no-referrer-when-downgrade默认。引用者标头不会被发送到没有 HTTPS 的源。
origin发送文档的来源(协议、主机和端口)。
origin-when-cross-origin对于跨源请求:仅发送协议、主机和端口。对于同源请求:还包括路径。
unsafe-url发送来源、路径和查询字符串(但不包括片段、密码或用户名)。该值被认为是不安全的。

所以针对上面的403情况的解决方法,就是把referrer设置成no-referrer,这样发送请求不会带上referrer信息,对方服务器也就无法拦截了。

单独图片设置

<img src="图片地址"  referrerpolicy="no-referrer"/>

全局设置

<meta name="referrer" content="no-referrer" />

解决访问站外图片403(referrer)问题

成功解决!YYDS!今天就介绍到这里啦! 欢迎在评论区交流。

如果文章对你有所帮助,❤️关注+点赞❤️鼓励一下!博主会持续更新。。。。 ​

猜你喜欢
  • 前端性能优化9大策略(面试一网打尽)!
    前端性能优化9大策略(面试一网打尽)!
    wonderful
  • 解决angualr13 form表单设置disabled不起作用问题
    解决angualr13 form表单设置disabled不起作用问题
    wonderful
  • 什么是变量提升?var、let 及 const 区别?什么是暂时性死区?
    什么是变量提升?var、let 及 const 区别?什么是暂时性死区?
    wonderful
  • Webpack性能优化
    Webpack性能优化
    wonderful
  • CSS实现三种常用的三角形效果
    CSS实现三种常用的三角形效果
    wonderful
  • vite构建打包性能优化
    vite构建打包性能优化
    wonderful

给我留言

专注于程序员工作、学习、编程提效。

Copyright © www.code-nav.top All Rights Reserved.

前端小阳仔 提供技术支持 备案号:陕ICP备19013504号

LOADING