窗口.__ INITIAL_STATE__仍然是在React Universal应用程序中将初始状态传递给客户端的首选方法吗？

Question

窗口.__ INITIAL_STATE__仍然是在React Universal应用程序中将初始状态传递给客户端的首选方法吗？

Tim*_*imo 13 javascript ecmascript-6 reactjs react-universal

我正在阅读一本关于React和Universal应用程序的书,其中作者声称以下是将初始状态从服务器传递到客户端的最佳实践:

server.js

import React from 'react';
import {renderToStaticMarkup} from 'react-dom/server';
import Myapp from '../MyApp';
import api from '../services';

function renderPage(html, initialData) {
    return `
        <html>
            <body>
                ${html}
            </body>
            <script>
                window.__INITIAL_STATE__ = ${JSON.stringify(initialData)};
            </script>
            <script src="bundle.js"></script>
        </html>
    `;
}

export default function(request, reply) {
    const initialData = api.getData();
    const html = renderToStaticMarkup(<MyApp />);
    reply(renderPage(html, initialData);
}

Run Code Online (Sandbox Code Playgroud)

然后,在客户端中,您将读出如下数据:

bundle.js

const initialData = window.__INITIAL_STATE__ || {};
const mountNode = document.getElementById('root');
ReactDOM.render(<MyApp />, mountNode);

Run Code Online (Sandbox Code Playgroud)

据我所知,初始状态首先转换为字符串,然后作为全局对象文字附加到窗口对象.

这个解决方案看起来非常粗糙.这本书是在2016年中期发布的.使用的方法window.__INITIAL_STATE__仍然是如何做到这一点还是有更好的解决方案？

例如,我可以想象,可以在单独的微服务调用中提供初始状态,然后也可以比将数据直接嵌入到文档中更好地缓存,因为这样初始状态数据必须每次传输页面刷新的时间,即使数据没有改变.

Answer 1

use*_*065 10

简单回答:是的.

但我不确定为什么没有人指出你有一个非常常见的XSS漏洞使用JSON.stringify(initialData)你想做的事情而不是:

import serialize from 'serialize-javascript';

 window.__INITIAL_STATE__ = ${serialize(initialData)};

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，4 月前
查看次数：	8624 次
最近记录：	7 年，8 月前