Przekazywanie zmiennych do JavaScript w ExpressJS
Jestem całkowicie zagubiony w tym; używam NodeJS, aby pobrać JSON i muszę przekazać zmienną do mojej strony i mieć JavaScript używać danych.
app.get('/test', function(req, res) {
res.render('testPage', {
myVar: 'My Data'
});
To jest mój kod ekspresowy (bardzo prosty do celów testowych); teraz używając EJS chcę zebrać te dane, które Wiem, aby renderować na stronie jest po prostu
<%= myVar %>
Ale muszę być w stanie zebrać te dane w JavaScript (jeśli to możliwe w ramach .plik js) ale na razie tylko do wyświetlenia zmiennej w polu Alert mam tried
W Jade jest jak alert('!{myVar}')
lub !{JSON.stringify(myVar)}
. Czy Mogę zrobić coś podobnego w EJS. Nie potrzebuję żadnego pola jak <input type=hidden>
i biorąc wartość pola w javascript. Jeśli ktoś może pomóc być bardzo doceniony
6 answers
Możesz użyć tego (po stronie Klienta):
<script>
var myVar = <%- JSON.stringify(myVar) %>;
</script>
Możesz również zmusić EJS do renderowania pliku .js
:
app.get('/test.js', function(req, res) {
res.set('Content-Type', 'application/javascript');
res.render('testPage', { myVar : ... });
});
Jednak plik szablonu (testPage
) nadal musi mieć rozszerzenie .html
, W przeciwnym razie EJS go nie znajdzie(chyba że powiesz Express ' owi inaczej).
Jak zaznacza @ksloan w komentarzach: trzeba uważać co zawiera {[6] }. Jeśli zawiera treści generowane przez użytkowników, może to pozostawić witrynę otwartą na ataki script injection.
Możliwe rozwiązanie aby temu zapobiec:
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-28 14:10:06
Główną trudnością jest uniknięcie ryzyka XSS, jeśli myVar zawiera cudzysłowy, lub </script>
na przykład. Aby uniknąć tego problemu, proponuję użyć kodowania Base64 po JSON.stringify. Pozwoli to uniknąć wszelkiego ryzyka związanego z cudzysłowami lub znacznikami HTML, ponieważ Base64 zawiera tylko "bezpieczne" znaki do umieszczenia w cytowanym łańcuchu.
Rozwiązanie, które proponuję:
Plik EJS:
<script>
var myVar = <%- passValue(myVar) %>
</script>
Które renderuje w coś takiego (na przykład tutaj myVar = null):
<script>
var myVar = JSON.parse(Base64.decode("bnVsbA=="))
</script>
Po stronie serwera NodeJS:
function passValue(value) {
return 'JSON.parse(Base64.decode("' + new Buffer(JSON.stringify(value)).toString('base64') + '"))'
}
Js po stronie klienta (jest to implementacja dekodowania Base64, która działa z Unicode, możesz użyć innej, jeśli wolisz, ale uważaj, jeśli obsługuje 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}}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-20 12:10:15
Spróbuj tego:
<script type="text/javascript">
window.addEventListener('load', function(){
alert('<%= myVar %>');
});
</script>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-19 06:29:23
Jeśli masz bardziej złożone obiekty, takie jak tablica, możesz to zrobić:
<% if (myVar) { %>
<script>
myVar = JSON.parse('<%- JSON.stringify(myVar) %>');
</script>
<% } %>
W przeciwnym razie poprzednie rozwiązania nie będą działać
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-03 13:26:54
Zgodnie z dokumentacją Tutaj :
Przejdź do najnowszego wydania , Pobierz .ejs.js lub .ejs./ min.js.
Dołącz jedną z nich na swojej stronie, oraz ejs.render(str)
.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-05 22:17:27
W przyjętym rozwiązaniu JSON.parse nie powiedzie się, jeśli myVar ma właściwość z wartością z unescaped double quote. Więc lepiej traverseObj i escape każdej właściwości string.
Oto funkcja, która obejmuje mój przypadek:
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;
};
Niż w ejs wystarczy:
<%
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);
%>
A teraz możesz bezpiecznie transportować z nieopisaną składnią
window.product = <%-JSON.stringify(encodedProduct)%>;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-22 10:19:40