node.js 在 ExpressJS 中将变量传递给 JavaScript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16098397/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pass variables to JavaScript in ExpressJS
提问by Jetson John
I am completely lost on this; I am using NodeJS to fetch a JSON and I need to pass the variable to my page and have JavaScript use the data.
我对此完全迷失了；我正在使用 NodeJS 来获取 JSON，我需要将变量传递给我的页面并让 JavaScript 使用数据。
app.get('/test', function(req, res) {
res.render('testPage', {
myVar: 'My Data'
});
That is my Express code (very simple for testing purposes); now using EJS I want to gather this data which I know to render on the page is simply
那是我的 Express 代码（对于测试来说非常简单）；现在使用 EJS 我想收集这些我知道要在页面上呈现的数据很简单
<%= myVar %>
But I need to be able to gather this data in JavaScript (if possible within a .js file) but for now just to display the variable in an Alert box I have tried
但是我需要能够在 JavaScript 中收集这些数据（如果可能在 .js 文件中）但现在只是为了在我尝试过的警报框中显示变量
In Jade it is like alert('!{myVar}')or !{JSON.stringify(myVar)}. Can I do something similar in EJS. I don't need any field like <input type=hidden>and taking the value of the field in javascript. If anyone can help be much appreciated
在 Jade 中，它类似于alert('!{myVar}')或!{JSON.stringify(myVar)}。我可以在 EJS 中做类似的事情吗？我不需要任何字段，比如<input type=hidden>在 javascript 中获取字段的值。如果有人可以提供帮助，将不胜感激
回答by robertklep
You could use this (client-side):
你可以使用这个（客户端）：
<script>
var myVar = <%- JSON.stringify(myVar) %>;
</script>
You could also get EJS to render a .jsfile:
你也可以让 EJS 渲染一个.js文件：
app.get('/test.js', function(req, res) {
res.set('Content-Type', 'application/javascript');
res.render('testPage', { myVar : ... });
});
However, the template file (testPage) would still need to have the .htmlextension, otherwise EJS won't find it (unless you tell Express otherwise).
但是，模板文件 ( testPage) 仍然需要具有.html扩展名，否则 EJS 将找不到它（除非您另外告诉 Express）。
As @ksloan points out in the comments: you do have to be careful what myVarcontains. If it contains user-generated content, this may leave your site open for script injection attacks.
正如@ksloan 在评论中指出的那样：您必须小心所myVar包含的内容。如果它包含用户生成的内容，这可能会使您的站点容易受到脚本注入攻击。
A possible solution to prevent this from happening:
防止这种情况发生的可能解决方案：
<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>
回答by Rapha?l Champeimont
The main difficulty here is to avoid XSS risks if myVar contains quotes, or </script>for example. To avoid this problem, I propose to use Base64encoding 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.
如果 myVar 包含引号，或者</script>例如，这里的主要困难是避免 XSS 风险。为了避免这个问题，我建议在 JSON.stringify 之后使用Base64编码。这将避免与引号或 HTML 标记相关的所有风险，因为 Base64 仅包含“安全”字符以放入带引号的字符串中。
The solution I propose:
我提出的解决方案：
EJS file:
EJS文件：
<script>
var myVar = <%- passValue(myVar) %>
</script>
which will render into something like (for example here myVar = null):
这将呈现为类似的东西（例如这里 myVar = null）：
<script>
var myVar = JSON.parse(Base64.decode("bnVsbA=="))
</script>
Server-side NodeJS:
服务端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):
客户端 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}}
回答by Benjamin Fuentes
if you have more complex objects like an array, you can do this :
如果你有更复杂的对象，比如数组，你可以这样做：
<% if (myVar) { %>
<script>
myVar = JSON.parse('<%- JSON.stringify(myVar) %>');
</script>
<% } %>
otherwise, previous solutions you have seen will not work
否则，您之前看到的解决方案将不起作用
回答by karaxuna
Try this:
尝试这个：
<script type="text/javascript">
window.addEventListener('load', function(){
alert('<%= myVar %>');
});
</script>
回答by Jerin A Mathews
Heres how i made it work, in node js pass the json like this
这是我如何使它工作，在节点 js 中像这样传递 json
let j =[];
//sample json
j.push({data:"hi});
res.render('index',{json:j});
now in js function
现在在 js 函数中
var json = JSON.parse('<%- JSON.stringify(json) %>');
This worked well for me
这对我很有效
回答by user732456
In the accepted solution JSON.parse will fail if myVar has a property with value with unescaped double quote. So better traverseObj and escape each string property.
在已接受的解决方案中，如果 myVar 具有带有未转义双引号的值的属性，则 JSON.parse 将失败。所以更好地 traverseObj 并转义每个字符串属性。
Here is a function that covers my case:
这是一个涵盖我的案例的函数：
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;
};
Than in ejs you simply has to:
与在 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);
%>
and now you can transport is safely with unescaped syntax
现在您可以使用未转义的语法安全地传输
window.product = <%-JSON.stringify(encodedProduct)%>;
回答by spitz
Per the documentation here:
根据此处的文档：
Go to the Latest Release, download ./ejs.js or ./ejs.min.js.
转到最新版本，下载 ./ejs.js 或 ./ejs.min.js。
Include one of these on your page, and ejs.render(str).
在您的页面上包含其中之一，并且ejs.render(str).
