如何安全地将 Redux 存储从服务器传递到客户端

Question

我正在开发一个带有服务器端渲染的 React 应用程序。该应用程序使用 Redux 进行状态管理，使用 Redux Saga 进行异步操作。在伪代码中，我现在在服务器端做的是：

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 步。现在，我正在将呈现的 React 组件和商店传递给一个 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是渲染的React组件，store是Redux store）

麻烦的是，上面的代码，具体

<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。

所以我的问题（看起来很愚蠢）是：传递 Redux 存储的正确方法是什么（HTML-转义字符串 JSON 对象）在 HTML 模板中发送给客户端，以及如何将该字符串转换回客户端上的 JavaScript 对象。

Answer 1

如果您愿意包含另一个模块来执行此操作，则可以尝试 serialize-javascript。它支持转义有害的 HTML 字符串。

如何安全地将 Redux 存储从服务器传递到客户端

How to safely pass Redux store from the server to the client

json

serverside-javascript

isomorphic-javascript

redux

server-side-rendering