将变量从 ejs 传递到 javascript（渲染时服务器到客户端），同时避免 XSS 问题

Question

使用 ejs 将变量传递给 JavaScript 的公认方式似乎是这样的：

<script>
  var foo = <%- JSON.stringify(foo) %>;
</script>

但是我使用这种方法遇到了 XSS 问题，想知道是否有更好/更安全的方法。

This example 显示漏洞。

这是有效的，因为 JSON.stringify("</script><script>alert('test')</script><script>") 返回 "</script><script>alert('test')</script><script>" 并且 <%- %> 运算符不转义结果。

它也适用于对象：example here

<script>
var test = {
    "text": "</script><script>alert('test')</script><script>"
}
</script>

有没有更安全的方法来处理这个问题？

Answer 1

您可以在 JSON.stringify 之后使用 Base64 编码。这将避免与引号或 HTML 标记相关的所有风险，因为 Base64 仅包含“安全”字符以放入带引号的字符串中。

我在我的网站中使用的解决方案：

EJS 文件：

<script>
  var foo = <%- passValue(foo) %>
</script>

这将呈现为类似的东西（例如这里的 foo = null）：

<script>
  var page = JSON.parse(Base64.decode("bnVsbA=="))
</script>

服务器端 NodeJS：

function passValue(value) {
  return 'JSON.parse(Base64.decode("' + new Buffer(JSON.stringify(value)).toString('base64') + '"))'
}

客户端 JS（这是一个使用 Unicode 的 Base64 解码的实现，如果您愿意，可以使用另一个，但如果它支持 Unicode，请小心）：

var Base64={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=Base64._utf8_encode(e);while(f<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9\+\/\=]/g,"");while(f<e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=Base64._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/\r\n/g,"\n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}}

Answer 2

作为 Base64 编码的更简单替代方案，您还可以使用原生 JS 函数 encodeURI() 和 decodeURI()。它们可以正确转义 <script> 标记和引号，甚至支持 unicode 字符。

您的脚本将如下所示：

<script>
  var foo = JSON.parse(decodeURI("<%- encodeURI(JSON.stringify(foo)); %>"));
</script>

并设置foo = "</script><script>alert('test')</script><script>" 将导致以下由EJS 生成的HTML 源代码，这是非常安全的：

<script>
  var foo = JSON.parse(decodeURI("%22%3C/script%3E%3Cscript%3Ealert('test')%3C/script%3E%3Cscript%3E%22"));
</script>

就像 Raphaël 提到的那样，您还可以定义一个从 EJS 调用的服务器端函数，以简化此过程（如果使用频率更高的话）。

function passValue(value) {
  return 'JSON.parse(decodeURI("' + encodeURI(JSON.stringify(value)) + '"))';
}