react ssr

https://reactjs.org/docs/react-dom-server.html

https://redux.js.org/docs/recipes/ServerRendering.html

redux

1. 对每个请求创建一个全新的store
2. 可选地dispatch action
3. 从store中获取数据
4. 把数据传递给客户端

　　在客户端，也会创建一个全新的store，拿以上发送回来的state来进行store的初始化。redux在服务端的唯一工作就是给浏览器提供初始化的数据state。初始的状态通过window.__PRELOADED_STATE__来内嵌到html中。在客户端获取这个值来创建store即可。

　　如果初始化的数据是异步的，可以异步获取完数据之后，在回调函数中执行renderToString和res.end。在异步数据到来之前，服务器会维持着这个连接。

　　客户端通过调用react-dom提供的hydrate来进行混合。

　　redux ssr demo：https://github.com/947133297/ssr/tree/master/react/redux-example

延伸阅读：https://scotch.io/tutorials/react-on-the-server-for-beginners-build-a-universal-react-and-node-app

对XSS的防范

　　假如初始的state依赖于用户提供的参数，而且服务端state获取完了之后，state会被手动json序列化到一个script标签中，假如state的数据中有script标签，则恶意的脚本可以在浏览器端运行。举例子如下：

// 模拟ssr，渲染状态依赖于请求参数，并且把渲染结果输出到浏览器端执行
function xss(queryParam){
    document.write(`
        <script>
            console.log( ${JSON.stringify(queryParam)})
        </script>
    `)
}

正常的执行：

进行攻击：

生成的html如下：

可见恶意脚本被执行了。防范的措施可以对序列化的字符串进行简单转义，如：

JSON.stringify(state).replace(/</g, '\\u003c')

或者使用一些其他序列化库，如 serialize-javascript.