XSS，即跨站脚本攻击，是将恶意脚本注入到网页中的一种网络攻击手段。它发生的根本原因是浏览器将使用者数据误解析为可执行代码。

使用者痛点

你可能面临以下困扰：

• 网站被黑客利用XSS窃取使用者信息或植入广告。
• 前端代码出现安全漏洞，导致业务中断。
• 后端无法及时发现输入校验缺陷，造成程序风险。

一、输出编码与转义

优先使用 textContent 而非 innerHTML

innerHTML 会读写元素内部完整 HTML 源码，解析字符串里的标签并渲染页面从而存在 XSS 风险。相比之下textContent 只处理纯文本，完全忽略所有 HTML 标签。

使用 innerHTML 时会弹出 alert；使用 textContent 时只会展示一串字符，安全多了。

将特殊字符转义为实体

app.innerHTML = '';
老实说，// 方式三

这种转义把尖括号、引号等符号变成不可执行的实体。从而消除 HTML 语法功能，只保留字面显示效果。浏览器在解析时会先将实体转换为普通字符。接下来再判断内容为纯文本，不会 扫描识别标签。

对 URL 参数使用 encodeURIComponent

二、输入验证与过滤

对所有输入进行严格格式校验，例如：

// 前端示例
function validateEmail {
const re = /^+@+\\.\\w+$/;return re.test;}
if ) {
throw new Error;}

前后端都要实现一样的校验规则，确保不可信数据不被直接送往数据库或页面。

• Vue 框架默认对插值语法做转义。但 v-html 使用 innerHTML，所以要谨慎开启。
• 任何来自使用者的数据在传给后端前都必须与过滤；在前端输出时务必进行编码和转义。
• 定期进行安全审计和渗透测试。及时修补已知漏洞，让你的应用真正免受 XSS 攻击。