Passing vars from ejs to javascript (server to client on render) while avoiding XSS issues

Question

It seems like the accepted way to pass variables to JavaScript using ejs is like so:

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

But I've ran into XSS issues using this method, and wanted to know if there was a better/safer way.

This example shows the vulnerability.

This works since JSON.stringify("</script><script>alert('test')</script><script>") returns "</script><script>alert('test')</script><script>" and the <%- %> operators do not escape the result.

It also works for objects: example here

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

Is there a safer way to handle this?

Answer 1

You can use Base64 encoding after JSON.stringify. This would avoid all risks related to quotes or HTML tags since Base64 only contains "safe" characters to put in a quoted string.

The solution I use in my website:

EJS file:

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

which will render into something like (for example here foo = null):

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

Server-side NodeJS:

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

Client-side JS (this is an implementation of Base64 decoding that works with Unicode, you can use another if you prefer but be careful if it supports 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

As a simpler alternative to Base64 encoding you can also use the native JS functions encodeURI() and decodeURI(). They escape <script> tags and quotes properly and even support unicode characters.

Your script would then look like this:

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

and setting foo = "</script><script>alert('test')</script><script>" would lead to following HTML source generated by EJS, which is perfectly safe:

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

Like Raphaël mentioned, you could also define a server side function to call from EJS to simplify this process if this is used more often.

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