VB.NET图片预览时出现Content Security Policy(CSP)加载拒绝问题

在VB.NET项目中，选择图片预览时浏览器报错：拒绝加载data:image格式图片，违反Content Security Policy指令img-src 'self'。本地运行时已添加包含img-src 'self' data:的CSP meta标签，能正常预览，但部署到服务器后该配置失效。

浏览器错误信息 #

Refused to load the image 'data:image/jpeg;base64,/9j/4AAQ[...].KACiiigD//2Q==' because it violates the following Content Security Policy directive: "img-src 'self'".

已添加的META标签 #

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' data:; style-src 'self' 'unsafe-inline';" />

图片预览JavaScript代码 #

function previewImage(fileUpload, imgPreviewId) {
    var file = fileUpload.files[0];
    if (file) {
        var reader = new FileReader();
        reader.onload = function (e) {
            var imgPreview = document.getElementById(imgPreviewId);
            imgPreview.src = e.target.result;
            imgPreview.style.display = 'block';
        }
        reader.readAsDataURL(file);
    }
    else {
        var imgPreview = document.getElementById(imgPreviewId);
        imgPreview.src = '';
        imgPreview.style.display = 'none';
    }
}

VB页面代码 #

<tr>
    <td>
        <div style="display: flex; gap: 10px; margin-top: 10px">
            <asp:Label ID="frontimg" runat="server" Text="Front Image"></asp:Label>
            <asp:FileUpload runat="server" ID="Frtimg" accept=".jpg,.png,.jpeg" onchange="previewImage(this, 'imgFrontPreview')"/>
            <asp:HyperLink runat="server" ID="frontimgView" Text="View" Target="_blank"></asp:HyperLink>
        </div>
    </td>
    <td>
        <div>
            <img id="imgFrontPreview" style="display: none; width: 200px; height: 150px;  margin-top: 10px;" />
        </div>
    </td>
    <td>
    </td>
</tr>

解决办法 #

1. 检查服务器端CSP配置 #

服务器（IIS、Apache、Nginx）的HTTP响应头CSP规则优先级高于页面meta标签，需确认服务器是否添加了覆盖性的CSP配置：

• IIS：进入站点的「HTTP响应头」设置，查看是否存在Content-Security-Policy项，若有则修改img-src规则为'self' data:
• Apache：检查.htaccess或主配置文件中的Header set Content-Security-Policy指令，更新img-src包含data:
• Nginx：查看站点配置中的add_header Content-Security-Policy项，确保img-src包含'self' data:

2. 排查页面CSP规则冲突 #

检查页面是否存在多个CSP meta标签，或服务器端代码动态生成了CSP响应头，导致自定义meta标签被覆盖。可通过浏览器开发者工具「网络」面板，查看页面请求的响应头，确认实际生效的CSP规则。

3. 清除缓存 #

客户端或服务器端缓存了旧页面资源，会导致新的meta标签未生效。可清除浏览器缓存后刷新页面，或在服务器端设置页面禁用缓存，重新部署后测试。

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