4
私はサーバー側のレンダリングでReactアプリケーションを開発中です。このアプリは、状態管理にはReduxを使用し、非同期アクションにはRedux Sagaを使用します。擬似コードでは、私は今、サーバ側で行っていますと、次のとおりです。Reduxストアをサーバーからクライアントに安全に渡す方法
1) initialize Redux store and run Redux saga on it
2) wait until all necessary data is fetched
3) render React component to string
4) send rendered React component to the client
(along with the populated store for rehydration on the client side)
私の問題は私が渡しています、今のステップ4であるリアクトレンダリングコンポーネントとおおよそのように見えるejsビューへのストアこれ：
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="/styles.css">
<script>
var __data = <%-JSON.stringify(store) %>;
</script>
</head>
<body>
<main><%- app %></main>
<script type="text/javascript" src="/vendor.js"></script>
<script type="text/javascript" src="/bundle.js"></script>
</body>
</html>
（上記のコードでは、appがレンダリングされている成分を反応させ、そしてstoreはReduxのストアである）
トラブルは、上記のコード、スペックでありますifically
<script>
var __data = <%-JSON.stringify(store) %>;
</script>
は、HTMLをエスケープしていないので、私の店は<script>タグを持つ文字列が含まれている場合、それは有効なHTMLになり、XSS攻撃にアプリを開きます。
場合は代わりにそのような<%- %>使用<%= %>の：私は戻って有効なJSONに変換する方法を確認していない
"{"greetingReducer":{"message":"Hello world!"} etc.
：var __data = "<%= JSON.stringify(store) %>";、私は無効JSON文字列を取得します。
だから私の質問（それが見えるかもしれませんように愚かな）は次のとおりです。クライアントにHTMLテンプレートで（JSONオブジェクトのHTMLエスケープ文字列）Reduxのストアを渡すと、その文字列を変換する方法の適切な方法は何クライアント上のJavaScriptオブジェクトに戻します。
ありがとうございました！ 'serialize-javascript'がトリックをしました – azangru