У меня есть многостраничный веб-сайт, который использует React в качестве прославленного инструментария виджетов (разные пакеты на разных страницах).Однако некоторое состояние виджета сохраняется в сеансе входа в систему. Когда пользователь снова открывает страницу, компоненты должны перезагрузить свое начальное состояние.В настоящее время я делаю это следующим образом:
- Обслуживание страницы вместе с ее JS-пакетом
- AJAX, извлекающее состояние с сервера, когда все смонтировано
Этоказалось расточительным, поскольку бэкэнд уже знал, какова страница, и начальное состояние виджетов.Поэтому я подумал о том, чтобы отобразить начальное состояние как простой объект внутри обслуживаемой страницы и заставить объект извлекать его при монтировании.
Моя первоначальная попытка визуализировала начальное состояние как:
[some other HTML ... ]
<script>
var WIDGET_INITIAL_STATE = {
startDate: '...',
filters: ['filter1', 'filter2', ... ]
}
</script>
А затем с помощью этого глобального в настройке компонента.Конечно, это опасно небезопасно, поскольку filters
управляется вводом текста, поэтому, если ввести </script> [ arbitrary HTML ] <script>
, вышеприведенное будет:
<script>
var WIDGET_INITIAL_STATE = {
startDate: '...',
filters['<script>
[arbitrary HTML]
</script>', 'filter2']
}
</script>
, что катастрофически плохо.
Однако, если я проявлю должную осмотрительность и проведу дезинфекцию на стороне сервера, в React не будет простого способа рендеринга, так как передача строки вида <script>
отразит это буквально, согласно этой странице..
Единственное решение, которое я вижу, чтобы заставить это работать таким образом, - это избегать оскорбительных символов при выходе из Юникода.
Примечание: я знаю, что это весьма неортодоксально, ноЯ хочу увидеть что-нибудь получше, если не что иное, как мысленное упражнение.