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

【问题标题】：How to safely pass Redux store from the server to the client如何安全地将 Redux 存储从服务器传递到客户端
【发布时间】：2017-02-07 18:23:05
【问题描述】：

我正在开发一个带有服务器端渲染的 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 组件和 store 传递给一个大致如下所示的 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 存储）

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

<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 模板中的 Redux 存储（JSON 对象的 HTML 转义字符串）传递给客户端的正确方法是什么以及如何将该字符串转换回客户端上的 JavaScript 对象。

【问题讨论】：

我使用这种方法将数据从服务器发送到客户端，但这种方式我的商店出现在源 html 中，并不是一个好方法。我认为应该有另一种方法，但我很难找到它。
你找到其他方法了吗？

标签： json redux serverside-javascript isomorphic-javascript server-side-rendering

【解决方案1】：

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

【讨论】：