使用HTML上传图片时遇Content Security Policy错误求助

拒绝加载图片 'blob:http://localhost:1821/37fbc038-a2de-4fba-94cf-7168e0c22a83'，因其违反了以下Content Security Policy指令："img-src * data: https: 'self'"。请注意：'*'仅匹配带有网络协议（'http'、'https'、'ws'、'wss'）的URL，或协议与self协议匹配的URL。必须显式添加'blob:'协议。

问题根源 #

你的Content Security Policy（CSP）规则里，img-src指令没有显式包含blob:协议。虽然设置了*，但它只覆盖http/https/ws/wss这类标准网络协议，不包含blob这类特殊的本地协议，所以浏览器拦截了blob URL的图片加载。

修复步骤 #

修改CSP的img-src规则，加入blob:即可：

1. HTTP响应头方式 #

更新响应头中的CSP配置：

Content-Security-Policy: img-src * data: https: 'self' blob:

2. HTML Meta标签方式 #

如果是通过meta标签设置CSP，修改为：

<meta http-equiv="Content-Security-Policy" content="img-src * data: https: 'self' blob:">

修改完成后，浏览器就会允许加载blob协议的图片，上传预览这类场景就能正常工作了。

内容的提问来源于stack exchange，提问作者srajput