node.js 將變量傳遞給ExpressJS中的JavaScript



3 Answers

這裡的主要困難是如果myVar包含引號,或者例如</script> ,則避免XSS風險。 為了避免這個問題,我建議在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}}
javascript node.js express ejs

我完全迷失了; 我正在使用NodeJS來獲取JSON,我需要將變量傳遞給我的頁面並讓JavaScript使用數據。

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

這是我的Express代碼(非常簡單,用於測試目的); 現在使用EJS我想收集這些我知道要在頁面上呈現的數據

<%= myVar %>

但我需要能夠在JavaScript中收集這些數據(如果可能的話,在.js文件中),但現在只是為了在Alert框中顯示變量我試過了

在Jade中它就像alert('!{myVar}')!{JSON.stringify(myVar)} 。 我可以在EJS中做類似的事嗎? 我不需要任何字段,如<input type=hidden>並在javascript中獲取字段的值。 如果有人可以幫助我們非常感激




如果你有像數組這樣的更複雜的對象,你可以這樣做:

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

否則,您見過的先前解決方案將無效




在公認的解決方案中,如果myVar具有帶非轉義雙引號值的屬性,則JSON.parse將失敗。 所以更好的traverseObj並轉義每個字符串屬性。

這是一個涵蓋我的案例的函數:

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)%>;



Related