4

我正在开发一个带有服务器端渲染的 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 存储）

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

<script>
    var __data = <%-JSON.stringify(store) %>;
</script>

不转义 html，因此如果我的商店包含带有<script>标签的字符串，它将是有效的 html，并打开应用程序以遭受 XSS 攻击。

如果不是像这样<%- %>使用: ，我会得到一个无效 JSON 的字符串：<%= %>var __data = "<%= JSON.stringify(store) %>";

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

我不确定如何转换回有效的 JSON。

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

4

1 回答 1

4

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

于 2016-09-29T19:19:21.840 回答