答案：保障HTML在线代码安全需四层防护。1. 输入净化：用DOMPurify等工具过滤script标签和onerror等危险属性，禁用javascript:协议；2. 沙箱隔离：通过iframe sandbox限制权限，避免共享主站Cookie，使用postMessage安全通信；3. CSP策略：设置严格内容安全策略，禁止未授权脚本执行，优先使用nonce或hash机制；4. 服务端控制：在无网络容器中渲染，限制资源与超时，防止代码注入。四者联动可有效防范XSS、恶意执行等风险。
在现代Web开发中，HTML在线代码运行环境（如代码编辑器、沙箱预览、在线教学平台）越来越常见。这类功能虽然提升了用户体验，但也带来了不小的安全风险。若不加以防护，攻击者可能利用这些入口实施XSS、恶意脚本执行、钓鱼等攻击。以下是保障HTML在线代码安全的关键实践。
1. 严格过滤和净化用户输入
用户提交的HTML代码必须经过严格的清洗，防止嵌入恶意脚本或危险标签。
- 使用成熟的HTML净化库，如DOMPurify（前端）或jsoup（后端），自动移除script、iframe、onerror、onclick等可执行行为的标签和属性。
- 禁止内联JavaScript和CSS表达式（如
javascript:、expression()）。 - 限制允许的HTML标签范围，例如只允许p、div、span、img（且限制src协议为https）等基本结构。
2. 使用iframe沙箱隔离渲染环境
预览用户HTML内容时，应将其置于独立的iframe中，并启用沙箱策略以限制权限。
- 设置
sandbox="allow-same-origin allow-scripts"并根据需要逐步放开权限，避免使用allow-top-navigation等高风险选项。 - 将iframe指向一个独立域名或临时blob URL，避免与主站共享cookie和localStorage。
- 可通过postMessage实现父页面与沙箱页的安全通信，但需验证消息来源。
3. 内容安全策略（CSP）强制防护
CSP是防止XSS攻击的重要防线，能有效阻止未授权资源加载和脚本执行。
立即学习“前端免费学习笔记（深入）”；
- 对预览页面设置严格CSP头，例如：
Content-Security-Policy: default-src 'none'; img-src https:; style-src 'unsafe-inline'; script-src 'unsafe-eval'（按需调整） - 禁用
'unsafe-inline'和'unsafe-eval'，除非确实无法避免。 - 结合nonce或hash机制，仅允许特定脚本运行。
4. 服务端渲染隔离与超时控制
若涉及服务端解析或转换用户HTML（如生成截图、SEO预渲染），必须加强隔离。
- 在无网络访问权限的容器中运行渲染任务（如Docker + 网络隔离）。
- 限制资源使用：CPU、内存、执行时间，防止DoS攻击。
- 不直接执行用户代码，避免Node.js或PHP模板注入。
基本上就这些。只要做到输入净化、运行隔离、策略限制和服务端防护四层联动，就能大幅降低HTML在线代码带来的安全风险。安全不是一次配置，而是持续监控和更新的过程。
