部署CSP策略后Edge/Chrome本地PDF预览失败的解决方案咨询

问题根源 #

Chrome和Edge的内置PDF阅读器依赖blob:、filesystem:协议及Web Worker来渲染本地文件，当前CSP策略未允许这些资源访问，导致被浏览器拦截；Firefox的PDF阅读器实现逻辑不同，不受此限制。

具体修改方案 #

1. 补充CSP指令，允许PDF阅读器所需资源 #

在基础CSP策略中添加/更新以下指令：

• 新增worker-src：支持PDF渲染用到的Web Worker线程
• 更新script-src、object-src：允许阅读器加载blob:、filesystem:协议的资源

修改后的代码如下：

List<String> cspPolicies = new ArrayList<String>();
String originLocationRef = "'self'";

cspPolicies.add("default-src 'self'");
// 更新script-src，添加blob:
cspPolicies.add("script-src " + originLocationRef + " 'unsafe-inline' 'unsafe-eval' blob:");
// 更新object-src，添加blob: filesystem:
cspPolicies.add("object-src " + originLocationRef + " 'unsafe-inline' blob: filesystem:");
cspPolicies.add("style-src " + originLocationRef + " 'unsafe-inline'");
cspPolicies.add("img-src " + originLocationRef + " data:");
cspPolicies.add("form-action " + originLocationRef + " 'unsafe-inline'");
// 添加worker-src指令
cspPolicies.add("worker-src 'self' blob:");

if (APP_USE_AUDIOS_OR_VIDEOS) {
    cspPolicies.add("media-src " + originLocationRef + " 'unsafe-inline'");
}

if (APP_USE_WEBFONTS) {
    cspPolicies.add("font-src " + originLocationRef + " 'unsafe-inline'");
}

cspPolicies.add("connect-src * 'unsafe-inline'");
this.policies = cspPolicies.toString().replaceAll("(\\[|\\])", "").replaceAll(",", ";").trim();

2. 调整iframe Sandbox配置（若通过iframe加载PDF） #

如果PDF是通过iframe加载的，在现有sandbox参数基础上添加allow-top-navigation，确保阅读器能正常交互：

if (isFrame) {
    policiesBuffer.append(";").append("frame-src 'self' blob: filesystem:;sandbox allow-forms allow-same-origin allow-scripts allow-popups allow-downloads allow-top-navigation");
    if (INCLUDE_MOZILLA_CSP_DIRECTIVES) {
        policiesBuffer.append(";").append("frame-ancestors 'self'");
    }
}

3. 验证修改 #

清除浏览器缓存后重新测试：

• Chrome/Edge可使用内置阅读器正常打开本地PDF
• 无需依赖Adobe Acrobat扩展

关键说明 #

• blob:和filesystem:是Chrome/Edge内置PDF阅读器处理本地文件的核心协议，必须在CSP中明确允许
• worker-src用于支持PDF渲染时的后台线程，缺失会导致渲染失败
• allow-top-navigation允许阅读器在必要时进行页面跳转，部分场景下是功能正常运行的必需项

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