json - create - server side rendering react redux
Cómo pasar de manera segura la tienda de Redux del servidor al cliente (1)
Puede intentar serialize-javascript si está de acuerdo con incluir otro módulo para hacer esto. Tiene soporte para escapar cadenas HTML dañinas.
Estoy trabajando en una aplicación React con representación del lado del servidor. La aplicación usa Redux para la administración del estado y Redux Saga para acciones asíncronas. En pseudocódigo, lo que estoy haciendo en el lado del servidor ahora mismo es:
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)
Mi problema es con el paso 4. En este momento, estoy pasando el componente React prestado y la tienda a una vista de ejs que se ve más o menos así:
<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>
(en el código anterior, la app es el componente React representado, y la store es la tienda Redux)
El problema es, el código anterior, específicamente
<script>
var __data = <%-JSON.stringify(store) %>;
</script>
no escapa a html, por lo que si mi tienda contiene una cadena con la etiqueta <script> , será html válido y se abrirá la aplicación a los ataques XSS.
Si en lugar de <%- %> utiliza <%= %> como lo siguiente: var __data = "<%= JSON.stringify(store) %>"; , Recibo una cadena JSON no válida:
"{"greetingReducer":{"message":"Hello world!"} etc.
que no estoy seguro de cómo volver a transformarme en JSON válido.
Así que mi pregunta (por más tonta que parezca) es: ¿cuál es la forma correcta de pasar una tienda de Redux (cadena de caracteres JSON con escape de HTML) en la plantilla HTML al cliente y cómo transformarla en un objeto de JavaScript en el cliente.