Я работаю над приложением React с рендерингом на стороне сервера. Приложение использует Redux для управления состоянием и Redux Saga для асинхронных действий. В псевдокоде, что я делаю на стороне сервера прямо сейчас:Как безопасно передавать сервер Redux с сервера клиенту
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. Сейчас я передаю тонированное Реагировать компонент и магазин к 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
является магазин Перевождь)
Проблема, приведенный выше код, спецификации ifically
<script>
var __data = <%-JSON.stringify(store) %>;
</script>
не избежать HTML, так что, если мой магазин содержит строку с <script>
тегом, он будет действовать HTML и открывает приложение для атак XSS.
Если вместо <%- %>
использования <%= %>
так: var __data = "<%= JSON.stringify(store) %>";
, я получаю строку, которая является недопустимым в формате JSON:
"{"greetingReducer":{"message":"Hello world!"} etc.
, который я не знаю, как преобразовать обратно в допустимый формат JSON.
Так что мой вопрос (глупо, как это может показаться): что это правильный способ прохождения магазина Redux (HTML маскирования строки объекта JSON) в шаблоне HTML клиента и как превратить эту строку вернуться к объекту JavaScript на клиенте.
Спасибо! 'serialize-javascript' сделал трюк – azangru