受CSP保护的iframe内通过XHR保存文档的技术咨询

我来帮你搞定这个问题！首先咱们得先搞清楚为啥XHR保存文档会失败——你的CSP规则里漏了管控XHR请求的关键指令，导致浏览器直接拦截了这些请求。

问题根源 #

当前你的CSP配置只定义了default-src、style-src、child-src和frame-src，但XHR、Fetch这类网络请求是由connect-src指令专门管控的。虽然default-src会作为未显式配置指令的 fallback，但如果你的XHR请求目标不在default-src允许的范围内（比如跨域的后端服务），依然会被浏览器拦截。

具体解决方案 #

调整你的CSP规则，新增connect-src指令，把iframe内项目需要发起XHR请求的所有可信主机都加进去：

// 在原有CSP规则基础上添加connect-src指令
String cspPolicy = "default-src 'self';" +
                   "style-src 'self';" +
                   "child-src 'self' " + getAllowedHosts() + " " + getDomain() + ";" +
                   "frame-src 'self' " + getAllowedHosts() + " " + getDomain() + ";" +
                   "connect-src 'self' " + getAllowedHosts() + " " + getDomain() + ";";

关键细节说明 #

• 'self'：允许iframe内的Spring Boot项目向自身的后端API发起请求，这是保存文档最常见的场景。
• getAllowedHosts()：如果保存文档需要调用外部可信服务，把这些服务的域名/IP加到这个方法的返回值里。
• getDomain()：确保顶层项目的域名被纳入允许范围，避免如果XHR请求是向顶层项目后端发送时被拦截。

额外注意事项 #

• 别过度放宽规则：只添加实际需要的主机，保持CSP的安全性，避免引入不必要的风险。
• 测试验证：修改配置后，打开浏览器开发者工具的「控制台」，确认没有CSP相关的报错，同时检查XHR请求是否能正常完成并返回成功状态。
• 跨域场景补充：如果iframe内项目的XHR是跨域请求（比如向顶层项目后端发请求），除了配置CSP，还要确保后端设置了正确的CORS规则，允许来自iframe域名的请求。

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