HTML中CSP的img-src指令控制图片加载来源-html教程-PHP中文网

img-src指令检查浏览器加载标签外部图片资源的行为，仅对非内联、非data:协议的src值生效，如https、http、协议相对url及同源绝对路径；data:url需显式配置img-src data:才受控，而blob:、css background-image等不直接受其约束。

html中csp的img-src指令控制图片加载来源

img-src 指令到底检查哪些行为

浏览器对 <img> 标签的 src 属性值做 CSP 校验，仅当该值是**非内联、非 data: 协议的外部资源**时才触发 img-src 检查。也就是说，以下情况都会走 img-src 策略：

<img src="https://cdn.example.com/logo.png?x-oss-process=image/resize,p_40"> —— 外部 HTTPS 图片
<img src="//static.site.com/icon.svg"> —— 协议相对 URL
<img src="/assets/avatar.jpg"> —— 同源绝对路径（受 'self' 控制）
<img src="http://insecure.img.net/photo.gif?x-oss-process=image/resize,p_40"> —— HTTP 资源（若策略未显式允许 http:，会被拦截）

但这些不会触发 img-src 检查：

<img src="data:image/png;base64,iVBOR...>%20%E2%80%94%E2%80%94%20data:URL%20%E5%8F%97%20data:%20%E5%80%BC%E6%8E%A7%E5%88%B6%EF%BC%8C%E4%B8%8D%E6%98%AF%20img-src%20%E7%9A%84%E9%BB%98%E8%AE%A4%E7%AE%A1%E8%BE%96%E8%8C%83%E5%9B%B4%EF%BC%88%E9%99%A4%E9%9D%9E%E4%BD%A0%E6%98%BE%E5%BC%8F%E5%86%99%E4%BA%86%20img-src%20data:%EF%BC%89
CSS%20%E4%B8%AD%E7%9A%84%20background-image:%20url(...)%20%E2%80%94%E2%80%94%20%E8%BF%99%E5%BD%92%20style-src%20%E5%92%8C%20img-src%20%E5%85%B1%E5%90%8C%E4%BD%9C%E7%94%A8%EF%BC%8C%E4%BD%86%E5%AE%9E%E9%99%85%E7%94%B1%20img-src%20%E4%B8%BB%E5%AF%BC%EF%BC%88%E8%A7%84%E8%8C%83%E8%A6%81%E6%B1%82%EF%BC%89
<picture>%20%E6%88%96%20<source>%20%E7%9A%84%20srcset%20%E2%80%94%E2%80%94%20%E5%90%8C%E6%A0%B7%E5%8F%97%20img-src%20%E7%BA%A6%E6%9D%9F

%E5%B8%B8%E8%A7%81%20img-src%20%E9%85%8D%E7%BD%AE%E5%80%BC%E4%B8%8E%E5%AE%9E%E9%99%85%E6%95%88%E6%9E%9C%E5%B7%AE%E5%BC%82

%E5%86%99%E9%94%99%E4%B8%80%E4%B8%AA%E5%BC%95%E5%8F%B7%E6%88%96%E6%BC%8F%E6%8E%89%E5%86%92%E5%8F%B7%EF%BC%8C%E5%9B%BE%E7%89%87%E5%B0%B1%E5%85%A8%E6%8C%82%E4%BA%86%E3%80%82%E7%9C%9F%E5%AE%9E%E7%BA%BF%E4%B8%8A%E7%8E%AF%E5%A2%83%E9%87%8C%EF%BC%8C%E6%9C%80%E5%B8%B8%E8%B8%A9%E7%9A%84%E5%9D%91%E6%98%AF%E6%8A%8A%E5%80%BC%E5%BD%93%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%86%99%E6%AD%BB%EF%BC%8C%E6%B2%A1%E5%8A%A0%E5%BC%95%E5%8F%B7%EF%BC%8C%E6%88%96%E8%80%85%E6%B7%B7%E6%B7%86%E4%BA%86%E6%8C%87%E4%BB%A4%E5%B1%82%E7%BA%A7%E3%80%82

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

img-src%20'self'%EF%BC%9A%E5%8F%AA%E5%85%81%E8%AE%B8%E5%90%8C%E5%8D%8F%E8%AE%AE+%E5%90%8C%E5%9F%9F%E5%90%8D+%E5%90%8C%E7%AB%AF%E5%8F%A3%EF%BC%8Chttps://a.com/1.jpg%20%E4%B8%8D%E8%83%BD%E5%8A%A0%E8%BD%BD%20http://a.com/2.jpg%EF%BC%88%E5%8D%8F%E8%AE%AE%E4%B8%8D%E5%8C%B9%E9%85%8D%EF%BC%89
img-src%20https:%EF%BC%9A%E5%85%81%E8%AE%B8%E4%BB%BB%E6%84%8F%20HTTPS%20%E5%9B%BE%E7%89%87%EF%BC%8C%E4%BD%86%E7%A6%81%E6%AD%A2%20'self'%20%E7%9A%84%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84%EF%BC%88%E5%A6%82%20/img/x.png%EF%BC%89%EF%BC%8C%E5%9B%A0%E4%B8%BA%20https:%20%E4%B8%8D%E5%8C%85%E5%90%AB%20'self'
img-src%20*%20%EF%BC%9A%E5%85%81%E8%AE%B8%E6%89%80%E6%9C%89%E6%9D%A5%E6%BA%90%EF%BC%8C%E4%BD%86%E4%B8%8D%E5%8C%85%E6%8B%AC%20data:%20%E5%92%8C%20blob:%20%E2%80%94%E2%80%94%20%E8%BF%99%E6%98%AF%20CSP%20%E8%A7%84%E8%8C%83%E7%9A%84%E7%A1%AC%E6%80%A7%E9%99%90%E5%88%B6%EF%BC%8C*%20%E6%98%8E%E7%A1%AE%E6%8E%92%E9%99%A4%20data:%20%E5%92%8C%20protocol-relative%20URL
img-src%20'self'%20data:%EF%BC%9A%E6%98%8E%E7%A1%AE%E6%94%BE%E8%A1%8C%E5%90%8C%E6%BA%90%E8%B5%84%E6%BA%90%20+%20data:URL%EF%BC%8C%E9%80%82%E5%90%88%E7%94%A8%20base64%20%E5%A4%B4%E5%83%8F%E6%88%96%E5%9B%BE%E6%A0%87%E5%AD%97%E4%BD%93%E5%9C%BA%E6%99%AF
img-src%20'none'%EF%BC%9A%E8%BF%9E%20<img%20src="> 都会失败，页面上所有 <img> 直接不渲染（控制台报 Refused to load the image）

为什么设置了 img-src 却还有图片被拦截？

根本原因往往是策略没覆盖完整加载链路，或被更高优先级指令覆盖。CSP 是“最小权限”模型，指令之间有继承和 fallback 关系。

如果没配 img-src，浏览器会 fallback 到 default-src —— 所以 default-src 'none' 但漏写 img-src，图片照样挂
<img src="blob:http://site.com/xxx"> 不受 img-src 控制，而是由 connect-src 或 script-src（取决于 blob 来源）间接影响
使用 <img src="https://third-party.com/a.jpg?x-oss-process=image/resize,p_40" referrerpolicy="no-referrer"> 不影响 CSP 校验，但某些 CDN 会因缺失 referrer 拒绝响应，看起来像被 CSP 拦了（其实是 403，不是 CSP violation）
开发工具 Network 面板看到 404 或 CORS error，不是 CSP 问题；只有 Console 出现 Refused to load the image + violates the following Content Security Policy 才是真 CSP 拦截

如何快速验证 img-src 是否生效

别等上线才发现——本地就能模拟，而且要测「边界情况」。

在 HTML head 中加：
```
<meta http-equiv="Content-Security-Policy" content="img-src 'self';">
```
，然后放一个 <img src="https://example.com/test.jpg?x-oss-process=image/resize,p_40">，看是否报错
用 curl 测响应头：curl -I https://yoursite.com/，确认返回头含 Content-Security-Policy: img-src 'self'（注意大小写和空格）
打开 DevTools → Application → Content Security Policy，Chrome 会直接列出当前生效的各指令及违规记录
故意触发一次违规（比如临时改成 img-src 'none'），再看 Console 是否出现 report-uri 或 report-to 发出的 JSON 报告（需配置了上报）