XSS 防御转义规则笔记

一、转义规则概述

核心目标：防止用户输入被浏览器解析为可实行代码，确保输入始终被视为数据而非代码。
关键计谋：根据数据嵌入的上下文环境（HTML、JavaScript、CSS 等），对特殊字符进行转义或编码。

---

二、差异上下文的转义规则

---

1. HTML 正文（标签之间）

场景：用户输入直接插入到 HTML 标签内部。
 

1. <div>用户输入内容</div>

复制代码

转义规则：
字符转义后的实体防御目的<<防止插入新标签（如 <script>）>>防止闭合已有标签&&防止 HTML 实体被解析 示例：

• 攻击输入：<img src=x onerror=alert(1)>
  
• 转义后：<img src=x onerror=alert(1)>
  
• 效果：表现为文本，无法实行。
  

---

2. HTML 属性值

场景：用户输入插入到 HTML 属性值中（非变乱属性）。
 

1. <input value="用户输入内容">

复制代码

转义规则：
字符转义后的实体防御目的""防止闭合属性，注入新属性或变乱''同上（适用于单引号属性）&&防止 URL 伪协议（如 javascript:） 示例：

• 攻击输入：" onclick="alert(1)
  
• 转义后：" onclick="alert(1)
  
• 效果：无法闭合属性，变乱注入失败。
  

---

3. JavaScript 上下文

场景：用户输入插入到 JavaScript 代码或变乱属性中。
 

1. <script>var username = "用户输入内容";</script>
2. <button οnclick="用户输入内容">点击</button>

复制代码

转义规则：
字符转义方式防御目的"\"防止闭合字符串'\'同上（单引号字符串）\\\防止转义后续字符</script><\/script>防止提前结束脚本块 示例：

• 攻击输入：";alert(1);//
  
• 转义后：\";alert(1);//
  
• 效果：var username = "\";alert(1);//"; → 语法错误。
  

---

4. URL 上下文

场景：用户输入插入到 URL 属性中。

1. <a href="用户输入内容">链接</a>

复制代码

转义规则：
防御步调说明协议白名单校验只答应 http://、https:// 等安全协议URL 编码生存字符使用 encodeURIComponent() 转义特殊符号（如 空格→%20）克制 javascript: 伪协议直接拦截或替换 示例：

• 攻击输入：javascript:alert(1)
  
• 防御后：javascript%3Aalert(1) 或直接拦截。
  

---

5. CSS 上下文

场景：用户输入插入到 CSS 属性中。

1. <div style="color:用户输入内容">文本</div>

复制代码

转义规则：
字符转义方式防御目的"\22（十六进制）防止闭合 CSS 字符串'\27（十六进制）同上()转义或删除防止调用危险函数（如 expression） 示例：

• 攻击输入：red;);expression(alert(1))
  
• 转义后：red;\);expression\(alert\(1\)\) → 无法实行。
  

---

三、通用防御原则

• 上下文感知：根据数据最终嵌入的位置（HTML/JS/CSS）选择转义方式。
  
• 编码优先：始终对用户输入进行编码，而非依赖黑名单过滤。
  
• 使用安全 API：
  
  
  
  • 制止 innerHTML，优先使用 textContent。
    
  • 使用框架（React/Vue）的自动转义机制。
    
  
  
• 启用 CSP：通过内容安全计谋限制脚本泉源。
  
  1. Content-Security-Policy: default-src 'self'

  复制代码

---

四、常用转义工具

场景工具作用HTML 转义Lodash _.escape转义 < > & " 'JS 转义JSON.stringify()自动处置惩罚字符串中的特殊字符富文本过滤DOMPurify清算危险标签，生存安全 HTMLURL 编码encodeURIComponent()转义 URL 生存字符

---

五、总结

攻击场景防御要点类比HTML 标签转义 < > &拆解乐高积木的拼接卡扣HTML 属性转义 " '封死信封的封口处JavaScript转义 " ' \粘牢代码字符串的胶水URL校验协议 + 编码生存字符检查快递地点的安全性 核心头脑：通过转义让浏览器始终将用户输入视为数据，而非代码。多层防御（转义 + CSP + 安全 API）是反抗 XSS 的关键！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。