实现OWASP XSS防护规则1时innerHTML引号编码异常问题咨询

首先你需要先明确两个核心逻辑：

1. 你观察到的引号实体被浏览器转成字面量引号是标准行为，和XSS防护规则不冲突
2. 你对「DOM中存储编码后实体」的预期是对HTML实体和DOM存储逻辑的误解

为什么会出现你看到的现象 #

HTML实体是HTML文本格式的表示方式，不是DOM节点内容的存储格式。当你把编码后的字符串传给innerHTML时，浏览器会完成解析：

• 把&解析为&、<解析为<、"解析为"，最终DOM节点的内容里存储的就是这些字面量字符
• 你调用innerHTML读取内容时，浏览器会按照规范重新序列化DOM内容为HTML字符串，对于HTML元素主体内的引号，规范不要求转义，所以会直接返回"、'，不会返回实体编码

OWASP规则1的要求已经达成 #

OWASP规则要求你提前编码的核心目的是防止恶意输入被解析为HTML标签/脚本。举个例子：如果用户输入是"'><script>alert(1)</script>，你先按规则编码为"'><script>alert(1)</script>再传给innerHTML，浏览器解析后只会把这段内容渲染为原始的用户输入文本，不会执行脚本，防护目标已经完成，不需要DOM里存储编码后的实体。

实现你需求的方案 #

如果你需要留存编码后的实体内容用于验证，可以把编码后的字符串存在元素的自定义数据属性里，不会影响渲染效果，示例代码如下：

// 原始输入
const rawInput = `& < > " '`;
// 按OWASP规则1编码
const encodedContent = rawInput
  .replace(/&/g, '&amp;')
  .replace(/</g, '&lt;')
  .replace(/>/g, '&gt;')
  .replace(/"/g, '&quot;')
  .replace(/'/g, '&#x27;');

const renderEl = document.getElementById("encodingNotWorking");
// 赋值给innerHTML，渲染为原始字符，完成XSS防护
renderEl.innerHTML = encodedContent;
// 把编码后的内容存在自定义属性中，随时可取
renderEl.dataset.encoded = encodedContent;

// 读取编码后的内容展示
document.getElementById("actualCharacters").innerText = renderEl.dataset.encoded;

按照这个方案：页面渲染的是未编码的原始字符，你也可以随时拿到符合OWASP规则的编码后实体内容做校验。

内容的提问来源于stack exchange，提问作者user2719430