web-dev-qa-db-ja.com

ExpressJSでJavaScriptに変数を渡す

私はこれで完全に失われます。 NodeJSを使用してJSONを取得し、ページに変数を渡し、JavaScriptでデータを使用する必要があります。

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

それが私のエクスプレスコードです（テスト目的で非常に簡単です）。 EJSを使用して、ページにレンダリングすることがわかっているこのデータを収集したいだけです。

_<%= myVar %>
_

ただし、JavaScriptでこのデータを収集できる必要があります（可能な場合は.jsファイル内）が、今のところは、私が試したAlertボックスに変数を表示するだけです。

Jadeでは、alert('!{myVar}')または!{JSON.stringify(myVar)}に似ています。 EJSで同様のことができますか。 _<input type=hidden>_のようなフィールドは必要なく、javascriptでフィールドの値を取得します。誰もが大いに感謝するのを助けることができれば

javascriptnode.jsexpressejs
36
Jetson John

これを使用できます（クライアント側）：

<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>
64
robertklep

ここでの主な難点は、myVarに引用符が含まれる場合、または</script> 例えば。この問題を回避するには、JSON.stringifyの後にBase64 encodingを使用することを提案します。 Base64には引用符付き文字列に入れる「安全な」文字のみが含まれているため、これにより引用符またはHTMLタグに関連するすべてのリスクが回避されます。

私が提案する解決策：

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}}
6
Raphaël Champeimont

これを試して：

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

配列のようなより複雑なオブジェクトがある場合、これを行うことができます：

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

そうしないと、以前に見たソリューションが機能しません

2
Benjamin Fuentes

私はそれをどのように機能させたか、ノードjsでjsonをこのように渡します

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

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

今js関数で

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

これは私のためにうまくいった

1
Jerin A Mathews

受け入れられたソリューションでは、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)%>;
0
user732456

ドキュメントごとに here ：

最新リリース に移動し、。/ ejs.jsまたは./ejs.min.jsをダウンロードします。

これらのいずれかをページに含め、ejs.render(str)を含めます。

0
spitz