在ExpressJS中向JavaScript传递变量

Question

我完全不知道该怎么做；我正在使用NodeJS获取一个JSON，我需要将这个变量传递到我的页面，并让JavaScript使用这些数据。

app.get('/test', function(req, res) {
    res.render('testPage', {
        myVar: 'My Data'
    });

这是我的Express代码（仅用于测试目的）; 现在，我想使用EJS收集这些数据，我知道如何简单地呈现在页面上。

那就是我的Express代码（非常简单，只用于测试）；现在我想使用EJS来获取这些数据，我知道如何在页面上渲染它们。

<%= myVar %>

但我需要能够在JavaScript中收集这些数据（如果可能的话，在.js文件中），但现在只需将变量显示在警告框中，我尝试过：

在Jade中，可以这样写：alert('!{myVar}')或!{JSON.stringify(myVar)}。我能否在EJS中做类似的事情？我不需要像<input type=hidden>这样的字段，并在JavaScript中取该字段的值。如有任何帮助，将不胜感激。

- Jetson John

Answer 1

你可以使用这个（客户端）：

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

你也可以让 EJS 渲染一个 .js 文件：

app.get('/test.js', function(req, res) {
  res.set('Content-Type', 'application/javascript');
  res.render('testPage', { myVar : ... });
});

然而，模板文件（testPage）仍然需要具有.html扩展名，否则 EJS 将无法找到它（除非你告诉 Express 不是这样）。

正如 @ksloan 在评论中指出的：你必须小心 myVar 包含什么内容。如果它包含用户生成的内容，则可能会使你的网站容易受到脚本注入攻击。

防止这种情况发生的一个可能的解决方案：

<script>
  function htmlDecode(input){
    var e = document.createElement('div');
    e.innerHTML = input;
    return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
  }
  var myVar = JSON.parse(htmlDecode("<%= JSON.stringify(myVar) %>"));
</script>

- robertklep

---

要小心，因为如果myVar中有任何用户生成的内容，您的网站可能容易受到XSS攻击。 - ksloan

@robertklep 是的，看这个例子：https://jsfiddle.net/k1x230d8/ （它只是发送一个警报）。这有效是因为 JSON.stringify("</script><script>alert('test')</script><script>") 返回"</script><script>alert('test')</script><script>"而 <%- %> 运算符 不会 对结果进行转义。 - ksloan

@Kito 只有当 myVar 从 Express 传递到 EJS 作为变量时，它才能正常工作。你的 fiddle 跳过了这一步骤（实际上，如果用作模板，会抛出 EJS 异常）。 - robertklep

@JoãoPimentelFerreira，你仍然可以使用EJS来“渲染”.js文件，像这样：app.engine('js', require('ejs').renderFile)（并将.js文件放在“views”目录中）。 - robertklep

@JoãoPimentelFerreira，您可以使用app.set('views', ...)更改视图目录的位置（或设置多个）。 - robertklep

Answer 2

这里的主要困难是避免XSS风险，如果myVar包含引号或</script>等字符。为了避免这个问题，我建议在JSON.stringify之后使用Base64编码。这将避免与引号或HTML标签相关的所有风险，因为Base64只包含可以放在引号字符串中的“安全”字符。

我提出的解决方案:

EJS文件：

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

这将渲染成类似于以下内容（例如，这里myVar = null）：

<script>
  var myVar = 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}}

- Raphaël Champeimont

Answer 3

如果您有更复杂的对象，比如数组，您可以这样做：

<% if (myVar) { %>
   <script>
      myVar = JSON.parse('<%- JSON.stringify(myVar) %>');
   </script>
<% } %>

否则，你之前看到的解决方案将无法起作用。

- Benjamin Fuentes

---

它在没有使用JSON.parse(JSON.stringify())技巧的情况下也能工作，但是VS Code会显示一个“需要表达式”的错误（即使使用了EJS语言支持扩展）。现在不再出现这个问题了 =D。 - Drarig29

Answer 4

试试这个：

<script type="text/javascript">
     window.addEventListener('load', function(){
         alert('<%= myVar %>');
     });
</script>

- karaxuna

Answer 5

这是我让它工作的方法，在Node.js中像这样传递JSON：

let j =[];
//sample json
j.push({data:"hi});

res.render('index',{json:j});

现在在JS函数中。

var json = JSON.parse('<%- JSON.stringify(json) %>');

这对我很有效。

- Jerin A Mathews

Answer 6

在已接受的解决方案中，如果myVar具有带有未转义双引号的值的属性，则JSON.parse将失败。因此最好遍历对象并转义每个字符串属性。

这是一个涵盖我的情况的函数：

function traverseObj (obj, callback)
{
    var result = {};
    if ( !isArray(obj) && !isObject(obj) ) {
         return callback(obj);
    }

    for ( var key in obj ) {
        if ( obj.hasOwnProperty(key) ) {
            var value = obj[key];
            if (isMongoId(value)){
                var newValue = callback(value.toString());
                result[key] = newValue;
            }
            else if (isArray ( value) ) {
                var newArr = [];
                for ( var i=0; i < value.length; i++ ) {
                    var arrVal = traverseObj(value[i], callback);
                    newArr.push(arrVal);
                }
                result[key] = newArr;
            }
            else if ( isObject(value) ) {
                result[key] = traverseObj(value, callback);
            }
            else {
                var newValue = callback(value);
                result[key] = newValue;
            }
        }
    }
    return result;
};

然后在ejs中，您只需：

<%
    var encodeValue = function(val) {
        if ( typeof val === 'string' ) {
            return sanitizeXSS(val); //use some library (example npm install xss)
        }
        return val;
    }

    var encodedProduct = ejs_utils.traverseObj(product, encodeValue);
%>

现在，您可以使用未转义的语法安全地传输它了。

window.product = <%-JSON.stringify(encodedProduct)%>;

- user732456

Answer 7

根据此处的文档：

前往最新版本，下载./ejs.js或./ejs.min.js。

在您的页面上包含其中之一，并使用ejs.render(str)。

- spitz

Answer 8

我有类似的问题。我得到了这个值。

var inJavascript = JSON.parse("<%= myVar %>");

- Mahmud