2022/1/13大约 2 分钟
问题描述
当在网页中引用第三方图片资源时，浏览器可能无法正常加载图片，并在控制台显示 403 Forbidden 错误。
原因分析
出现这种问题的主要原因是 防盗链保护机制：
- 许多网站和图片托管服务实施了防盗链措施，以防止其他网站直接引用（"盗用"）他们的图片资源
- 服务端通常通过检查 HTTP 请求头中的
Referer（引用页）字段来识别请求来源 - 如果请求来源不是授权的域名，服务器会拒绝提供资源并返回 403 Forbidden 状态码
解决方案
针对图片 403 错误，有以下几种解决方案：
方案一：为单个图片添加 referrerpolicy 属性
直接在 <img> 标签中添加 referrerpolicy="no-referrer" 属性，可以阻止浏览器发送 Referer 请求头：
<img
src="https://example.com/image.jpg"
referrerpolicy="no-referrer"
alt="示例图片"
/>方案二：在 HTML 头部添加 meta 标签
在 HTML 文档的 <head> 标签中添加 meta 标签，可以对整个页面的所有请求应用相同的 referrer 策略：
<head>
<meta name="referrer" content="no-referrer" />
<!-- 其他头部内容 -->
</head>方案三：使用代理服务器
如果上述方法不奏效，可以考虑使用代理服务器转发图片请求：
- 设置一个服务器端脚本来获取图片
- 网页向自己的服务器请求图片
- 服务器获取第三方图片并返回给客户端
referrer 策略详解
除了 no-referrer 之外，还有其他几种 referrer 策略可以根据不同需求使用：
| 策略值 | 描述 |
|---|---|
no-referrer | 不发送 Referer 请求头 |
no-referrer-when-downgrade | 默认值，从 HTTPS 到 HTTP 时不发送 Referer |
origin | 只发送源信息（协议、域名、端口） |
origin-when-cross-origin | 同源请求发送完整 URL，跨域请求只发送源信息 |
unsafe-url | 始终发送完整 URL（不推荐，存在安全风险） |
注意事项
- 使用
no-referrer策略可能会影响某些依赖 Referer 头的功能，如统计分析 - 某些网站可能使用了更复杂的防盗链机制，如 token 验证或 IP 限制，此时上述方法可能无效
更新日志
2025/9/28 09:03
查看所有更新日志
38e56-于