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商店）

麻烦的是，上面的代码，特别是

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

Answer 1

如果您可以使用其他模块执行此操作，则可以尝试serialize-javascript。它支持逃避有害的HTML字符串。

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

1 个答案: