4

Я работаю над приложением 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:

"{&#34;greetingReducer&#34;:{&#34;message&#34;:&#34;Hello world!&#34;} etc. 

, который я не знаю, как преобразовать обратно в допустимый формат JSON.

Так что мой вопрос (глупо, как это может показаться): что это правильный способ прохождения магазина Redux (HTML маскирования строки объекта JSON) в шаблоне HTML клиента и как превратить эту строку вернуться к объекту JavaScript на клиенте.

ответ

4

Вы можете попробовать serialize-javascript, если у вас все в порядке, включая другой модуль. У этого есть поддержка, чтобы избежать вредных строк HTML.

+0

Спасибо! 'serialize-javascript' сделал трюк – azangru

Смежные вопросы