HTML安全防护需五方面协同：一、用户输入严格转义与过滤，用DOMPurify净化富文本、JSON.parse替代eval、模板引擎启用自动转义；二、设置CSP白名单响应头，禁用unsafe-inline/eval，启用report-uri；三、补充X-XSS-Protection和X-Content-Type-Options头，结合HSTS；四、用X-Frame-Options或frame-ancestors防点击劫持，辅以JS跳转防御；五、禁用javascript:伪协议、document.write()，校验跳转URL协议。
如果您的HTML页面面临恶意脚本注入、跨站脚本（XSS）、点击劫持或开放重定向等风险，则可能是由于前端缺乏基础安全防护机制。以下是针对HTML层面实施的有效防护策略：
一、对用户输入进行严格转义与过滤
未经处理的用户输入直接插入HTML会导致XSS漏洞，必须在渲染前对特殊字符进行HTML实体编码，防止浏览器将其解析为可执行代码。
1、使用DOMPurify库对富文本内容进行净化：引入后，调用DOMPurify.sanitize(dirtyHTML)再写入innerHTML。
2、服务端返回JSON数据时，前端避免使用eval()或new Function()解析，改用JSON.parse()并校验字段类型与长度。
立即学习“前端免费学习笔记（深入）”；
3、在模板引擎中启用自动转义功能，如Handlebars默认开启{{}}转义，需显式使用{{{}}}才绕过——除非绝对必要，否则禁用三花括号语法。
二、设置严格的Content-Security-Policy响应头
CSP通过白名单机制限制资源加载来源，能有效缓解XSS、数据注入和内联脚本执行等攻击。
1、在HTTP响应头中添加Content-Security-Policy字段，例如：Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com; object-src 'none'; base-uri 'self'。
2、禁止使用unsafe-inline和unsafe-eval：移除所有内联on事件处理器（如onclick）和
3、启用report-uri或report-to指令收集违规行为，配合CSP Report分析工具定位潜在绕过点。
三、启用X-XSS-Protection与X-Content-Type-Options头
这些传统但仍有实效的响应头可作为CSP的补充防护层，尤其对老旧浏览器提供兼容性保护。
1、设置X-XSS-Protection: 1; mode=block，强制启用浏览器内置XSS过滤器并阻止反射型攻击页面渲染。
2、设置X-Content-Type-Options: nosniff，防止MIME类型嗅探导致HTML被误解析为可执行脚本。
3、结合Strict-Transport-Security头确保所有通信强制走HTTPS，避免中间人篡改响应头。
四、防范点击劫持的X-Frame-Options与frame-ancestors指令
攻击者常将目标网站嵌入透明iframe诱使用户在不知情下触发敏感操作，需明确限制页面被嵌套权限。
1、配置X-Frame-Options: DENY，完全禁止该页面被任何frame、iframe或object嵌入。
2、若需部分可信站点嵌入，改用CSP中的frame-ancestors指令：Content-Security-Policy: frame-ancestors 'self' https://partner.example.com。
3、在HTML中添加JavaScript防御脚本作为后备：if (window.top !== window.self) { window.top.location = window.self.location; }。
五、禁用危险的HTML属性与API调用
部分HTML属性和Web API具备高危副作用，应从开发源头规避其使用场景。
1、禁用javascript:伪协议链接，将替换为
2、避免使用document.write()动态写入内容，该方法在页面加载完成后调用会清空整个文档树。
3、对location.href、location.assign()等跳转操作进行白名单校验，拒绝包含javascript:、data:、vbscript:等危险协议的URL。
