XSS 跨站脚本完整预防方案（前端 + 后端 + 服务端配置多层防护）

一、核心原则：永远不信任用户输入

所有来自前端的数据（URL 参数、表单、评论、Cookie、localStorage、接口传参）全部视为不可信数据，不能直接渲染到页面。

二、后端通用防御（拦截存储型、反射型XSS）

限制输入长度、过滤危险标签评论、昵称、留言等场景，黑名单过滤脚本标签；富文本场景使用白名单，仅允许安全标签（<b> <i>），剔除所有事件属性。

统一输出编码数据渲染到HTML、JS、CSS、URL 不同场景，使用对应编码规则，不能一套转义通用。

三、前端专项防御（解决DOM 型 XSS）

DOM 型 XSS 漏洞只存在前端 JS，后端无法拦截，重点规范 DOM 操作：

禁止使用危险DOM 方法 不使用：innerHTML、document.write、eval()、setTimeout("字符串代码")、location.href=可控参数 推荐安全写法：textContent、setAttribute 纯文本渲染。

URL 参数单独解析校验 拼接跳转地址时，使用 encodeURIComponent 编码参数，防止插入 javascript: 伪协议。

不直接读取localStorage、URL 参数拼入页面代码。

四、HTTP 响应头加固（全局强力防护）

1. CSP 内容安全策略（最有效拦截恶意脚本执行）

服务端返回响应头，规定页面仅允许加载指定域名脚本，禁止内联脚本、eval 执行。 示例基础头：

作用：即使存在注入漏洞，恶意JS 也无法执行。

2. Cookie 防护，防止 Cookie 被脚本窃取

HttpOnly：JS 无法读取 Cookie，杜绝 XSS 偷会话

Secure：仅 HTTPS 下传输 Cookie

SameSite：防止跨站携带 Cookie，辅助防御钓鱼 + XSS

3. X-XSS-Protection 浏览器内置防护

开启浏览器自带XSS 过滤器，检测到恶意脚本直接拦截页面渲染。

五、富文本编辑器特殊处理（极易产生存储XSS）

1.后端使用专业HTML 过滤库（DOMPurify、Java HtmlCleaner）清洗内容；

2.不允许onxxx 事件、iframe、script、svg onload 等危险内容；

3.上传图片地址校验域名，防止注入恶意脚本链接。

六、开发& 运维流程规范

1.代码审计：上线前检测innerHTML、危险拼接、未过滤参数；

2.渗透测试：定期扫描存储/ 反射 / DOM 三类 XSS 漏洞；

3.第三方组件管控：老旧jQuery、编辑器插件常存在 XSS 漏洞，及时更新；

4.接口鉴权：重要操作增加验证码、二次确认，就算会话被盗也无法完成资金操作。

七、结合网安宣传反问标语（适配学习、时间、赚钱）

1.不愿花时间学习XSS 多层防护，网站被注入恶意脚本，用户数据与营收怎能保全？

2.只忙着运营赚钱，忽略XSS 防御知识学习，跨站窃取漏洞爆发时损失谁来承担？

3.不懂CSP、输入转义等防护手段，放任 XSS 漏洞留存，辛苦搭建的盈利平台是否不堪一击？

阅读原文：点击这里​