在 ExpressJS 中将变量传递给 JavaScript

IT技术 javascript node.js express ejs
2021-02-09 01:04:47

我对此完全迷失了;我正在使用 NodeJS 来获取 JSON,我需要将变量传递到我的页面并让 JavaScript 使用数据。

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

那是我的 Express 代码(对于测试来说非常简单);现在使用 EJS 我想收集这些我知道要在页面上呈现的数据很简单

<%= myVar %>

但是我需要能够在 JavaScript 中收集这些数据(如果可能在 .js 文件中)但现在只是为了在我尝试过的警报框中显示变量

在 Jade 中,它类似于alert('!{myVar}')!{JSON.stringify(myVar)}我可以在 EJS 中做类似的事情吗?我不需要任何字段,比如<input type=hidden>在 javascript 中获取字段的值。如果有人可以提供帮助,将不胜感激

6个回答

你可以使用这个(客户端):

<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>
@JoãoPimentelFerreira 您仍然可以使用 EJS 来“渲染”.js文件,如下所示:(app.engine('js', require('ejs').renderFile)并将.js文件放在“views”目录中)
2021-03-14 01:04:47
@robertklep 是的,看看这个例子:jsfiddle.net/k1x230d8(它只是发送一个警报)。这是有效的,因为JSON.stringify("</script><script>alert('test')</script><script>")返回"</script><script>alert('test')</script><script>"并且<%- %>运算符不会转义结果。
2021-03-27 01:04:47
@JoãoPimentelFerreira 您可以使用以下方法更改视图目录的位置(或设置多个) app.set('views', ...)
2021-03-28 01:04:47
@Kito 它可以工作iff myVar作为变量从 Express 传递到 EJS。你的小提琴跳过了这一步(如果用作模板,实际上会抛出一个 EJS 异常)。
2021-04-03 01:04:47
小心,因为如果 myVar 中有任何用户生成的内容,您的站点将容易受到 XSS 攻击
2021-04-13 01:04:47

这里的主要困难是避免 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}}

如果你有更复杂的对象,比如数组,你可以这样做:

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

否则,您之前看到的解决方案将不起作用

它在没有这个JSON.parse(JSON.stringify())技巧的情况下工作,但 VS Code 显示了“预期表达式”错误(即使使用 EJS 语言支持扩展)。现在没有了=D。
2021-03-31 01:04:47

试试这个:

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

这是我如何使它工作,在节点 js 中像这样传递 json

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

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

现在在 js 函数中

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

这对我很有效