React渲染后端已转义字符串出现双重转义如何解决

你判断的完全正确，双重转义来自React的默认渲染机制：React在渲染{}包裹的字符串变量时，会自动对所有特殊字符做HTML实体转义，从根源上阻断XSS风险。
你在后端用express-validator的.escape()提前把用户输入做了转义，比如单引号'被转成了'，这个字符串传给React后，里面的&字符会被React二次转义为&，最终浏览器就会把'当成普通文本展示出来。
你观察到的硬编码现象也能佐证这个逻辑：直接写在JSX标签文本位置的内容会在JSX编译阶段处理HTML实体，但是通过{}传入的字符串变量，React会一律按纯文本处理，自动做转义，不会解析里面的HTML实体。

有两种可落地的方案，优先选第一种：

• 方案1（推荐）：移除后端的提前转义逻辑
  React本身的默认文本渲染已经自带完整的XSS防护，你完全不需要在后端提前对用户输入做HTML转义。直接把校验链里的.escape()删掉，将原始用户输入存入MongoDB即可。后端返回原始字符串给前端后，React会自动完成必要的转义，既不会出现双重转义问题，也不会有XSS风险。
  这也是前后端分离架构下的通用实践：转义逻辑交给最终渲染的层处理，不要在数据存储/传输层提前做和渲染层绑定的转义，避免重复转义问题。
• 方案2（适合存量数据已经做了转义、不方便改后端逻辑的场景）：前端拿到数据后先做HTML实体解码，再交给React渲染
  不需要引入第三方解码库，用浏览器原生API就能实现安全的实体解码，没有XSS风险：

  // 工具函数：解码HTML实体
  const decodeHTML = (str) => {
    const dummy = document.createElement('textarea');
    dummy.innerHTML = str;
    return dummy.value;
  }
  
  // 组件中使用
  const renderComment = () => {
    const decodedAuthor = decodeHTML(author);
    const decodedText = decodeHTML(text);
    return (
      <Wrapper>
        <Author>{decodedAuthor}</Author>
        <Text>{decodedText}</Text>
        <Date>{date}</Date>
      </Wrapper>
    )
  }
  

  这个方法利用textarea元素的纯文本特性：给它的innerHTML赋值转义后的字符串，浏览器会自动解析实体还原成原始文本，取value的时候拿到的就是解码后的原始字符串，全程不会执行任意脚本，安全无副作用。解码后的原始字符串交给React渲染时，会由React完成一次标准转义，最终展示结果正常。

• 不要为了解决这个问题使用dangerouslySetInnerHTML：这个API会跳过React的XSS防护，一旦输入校验有疏漏很容易引发安全问题，完全没有必要为了这个场景使用。
• 不要自己写正则替换HTML实体：HTML实体的覆盖范围很广，手写正则很容易出现匹配不全的问题，稳定性远不如浏览器原生解析方案。

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