Grails项目中JS文件如何用encodeAsHTML解决DOM XSS问题？

嘿，我懂你遇到的困境了——在Grails里我们习惯用encodeAsHTML()这类服务器端方法处理转义，但前端JS文件里没法直接调用这些Grails内置函数对吧？别担心，咱们有两种靠谱的方式来修复这个DOM XSS漏洞，我给你举个简短的例子：

方案1：前端实现HTML转义函数（适合前端处理数据的场景） #

你可以自己写一个轻量的转义函数，模拟GrailsencodeAsHTML()的功能，把特殊字符转换成HTML实体，这样即使item.fileName里藏了<script>之类的恶意代码，也只会被当成文本显示，不会被浏览器执行。

// 自定义HTML转义函数，对应Grails的encodeAsHTML
function encodeAsHTML(str) {
  if (!str) return '';
  // 依次转义最危险的几个特殊字符
  return str.replace(/&/g, '&')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
}

// 修复你原来的漏洞代码
const unsafeFileNamePart = item.fileName.substring(33);
const safeFileNamePart = encodeAsHTML(unsafeFileNamePart);
cell1.innerHTML = '<div name="caCertFileName">' + safeFileNamePart + '</div>';

方案2：服务器端提前转义（更安全，适合数据来自后端的场景） #

如果item.fileName是从Grails控制器传递过来的，那优先在服务器端完成转义，再把安全的数据传给前端JS：

第一步：在Grails控制器里转义

def yourControllerAction() {
  // 假设item是从数据库/服务获取的对象
  def safeFileName = item.fileName.encodeAsHTML()
  // 把转义后的数据传到GSP
  render model: [safeFileName: safeFileName]
}

第二步：在GSP里把安全数据传给JS

<script>
  // 直接使用服务器端已经转义好的值
  const item = { fileName: "${safeFileName}" };
  // 此时再截取拼接就不会有XSS风险了
  cell1.innerHTML = '<div name="caCertFileName">' + item.fileName.substring(33) + '</div>';
</script>

额外提示：如果你用Backbone的Underscore模板 #

如果你的项目用了Underscore模板渲染内容，模板本身支持自动转义——用<%- 变量 %>代替<%= 变量 %>，它会自动帮你转义HTML特殊字符，比如：

<!-- Underscore模板示例 -->
<script type="text/template" id="fileTemplate">
  <div name="caCertFileName"><%- fileNamePart %></div>
</script>

这样就不用手动写转义函数啦～

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