Ich arbeite an einer React-App mit serverseitigen Rendering. Die App verwendet Redux für die Statusverwaltung und Redux Saga für asynchrone Aktionen. In Pseudo-Code, gerade jetzt, was ich auf der Server-Seite tue, ist:Wie Redux-Store sicher vom Server an den Client übergeben
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)
Mein Problem ist, mit Schritt 4. Im Moment ist ich vorbei das Reagieren gemacht Komponente und der Laden zu einer ejs Ansicht, die in etwa wie folgt aussieht diese:
<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>
(in dem obigen Code ist app die gerenderte React Komponente und store ist die Redux store)
Problem ist, dass der obige Code, spec ifically
<script>
var __data = <%-JSON.stringify(store) %>;
</script>
nicht html entkommen, so dass, wenn Sie meinen Speicher einen String mit dem <script>-Tag enthält, wird es gültig html sein, und öffnet die App zu XSS-Attacken.
Wenn statt <%- %> Verwendung <%= %> wie so: var __data = "<%= JSON.stringify(store) %>";, ich eine Zeichenfolge erhalten, die ungültige JSON ist:
"{"greetingReducer":{"message":"Hello world!"} etc.
, die ich bin nicht sicher, wie man gültige JSON umwandeln zurück.
Also meine Frage (dumm, wie es scheinen mag) ist: Was einen Redux Shop von vorbei (HTML-Escape-Sequenzen eines JSON-Objekt) in der HTML-Vorlage an den Client ein richtiger Weg ist und wie diese Zeichenfolge verwandeln zurück zu einem JavaScript-Objekt auf dem Client.
Vielen Dank! 'serialize-javascript' hat es geschafft – azangru