如何安全地將Redux存儲從服務器傳遞到客戶端

我正在使用服務器端呈現的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攻擊。

如果不是<%- %>使用<%= %>像這樣：var __data = "<%= JSON.stringify(store) %>";，我得到一個字符串，它是無效的JSON：

"{&#34;greetingReducer&#34;:{&#34;message&#34;:&#34;Hello world!&#34;} etc.

這我不知道如何轉化回有效的JSON。

所以我的問題（愚蠢的，因爲它可能看起來）是：什麼是在HTML模板傳遞一個終極版商店（HTML轉義的JSON對象的字符串）到客戶端，以及如何變換串的正確方法回到客戶端上的JavaScript對象。

來源

2016-09-29 azangru

如果您可以使用另一個模塊來執行此操作，則可以嘗試serialize-javascript。它支持轉義有害的HTML字符串。

來源

2016-09-29 19:19:21

謝謝！ 'serialize-javascript'做了訣竅 – azangru

如何安全地將Redux存儲從服務器傳遞到客戶端

回答

相關問題