如何安全展示用户提交的HTML报告？同域安全防护问询

核心风险在于同域名环境下，恶意脚本可通过XSS窃取用户认证令牌（如Cookie、LocalStorage中的token），进而冒充用户操作。你提到的CSP策略有一定防护作用，但需结合多维度措施构建完整安全体系：

一、升级CSP策略，覆盖全场景限制 #

单一的connect-src 'self'防护范围有限，建议配置更严格的策略：

Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self'; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self';

• 细节说明：
  • default-src 'none'：默认禁止所有资源加载，仅开放明确允许的类别
  • script-src 'self'：仅允许加载同域名脚本，若用户报告必须用内联脚本，可临时添加'unsafe-inline'，但优先建议用户将脚本抽离为外部文件
  • style-src 'self' 'unsafe-inline'：允许同域名样式及必要内联样式（多数HTML报告依赖内联样式）
  • frame-src 'none'：禁止嵌入第三方框架，防范点击劫持或嵌套恶意页面
  • object-src 'none'：禁用Flash、Java Applet等高危插件

二、隔离用户内容与核心站点的认证数据 #

这是防范令牌窃取的关键手段：

• 用子域名托管用户内容：比如将用户报告放在user-content.example.org/user1/my-report，主站保留在example.org。利用浏览器同源策略，主站设置Cookie为Domain=example.org; Secure; HttpOnly; SameSite=Strict，子域名脚本便无法读取该Cookie
• 同域名下限制Cookie作用域：将主站认证Cookie的Path设为非用户内容路径（如/dashboard），用户访问/user1/my-report时，浏览器不会携带认证Cookie

三、对上传的HTML进行内容清洗 #

从源头过滤恶意代码：

• 移除危险标签与属性：删除<script>、<iframe>、<object>等标签，以及onclick、onload、javascript:伪协议等事件属性，可借助DOMPurify这类成熟的HTML清洗库实现
• 限制资源引用范围：仅允许引用同域名或可信CDN的资源，禁止加载第三方未知域名的脚本、样式或图片

四、补充配置浏览器安全头 #

配合CSP强化防护：

• X-XSS-Protection: 1; mode=block：启用浏览器内置XSS防护，检测到攻击时直接阻止页面加载
• X-Frame-Options: DENY：禁止页面被第三方网站嵌入，防范点击劫持
• X-Content-Type-Options: nosniff：强制浏览器按声明的MIME类型解析资源，避免恶意文件被当作脚本执行
• Strict-Transport-Security: max-age=31536000; includeSubDomains：强制全站使用HTTPS，防范中间人攻击

五、限制用户脚本的执行权限 #

若用户报告确实需要脚本支持，可通过以下方式降低风险：

• 使用沙箱iframe：将用户HTML嵌入带sandbox属性的iframe，如<iframe sandbox="allow-same-origin allow-scripts allow-styles" src="/user1/my-report"></iframe>，限制脚本访问父页面、发送跨域请求等权限
• 禁用敏感存储访问：通过页面注入脚本限制document.cookie、localStorage的读取，但该方式不如同源隔离可靠

总结：单一CSP不足以完全防护，建议优先采用子域名隔离用户内容+严格CSP+HTML内容清洗的组合方案，配合安全头加固，才能有效防范认证令牌窃取等安全问题。

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