Безопасно ли отправлять html разметку для рендера react.createElement?

Question

[Алексей]

Добрый вечер)
На сервере хранится объект в виде:

const text = {
    'type': 'h1',
    'props': {
        'key': 1
    },
    'element':  'Заголовок'
}

И отправляется на клиент при запросе
Реакт получив данный объект рендерит html разметку

export default function test () {
 return React.createElement(
    text.type,
    text.props,
    text.element
   )
}

Идея в том, чтобы хранить как-то готовую структуру html в базе данных и отправлять на клиент при необходимости. Далее этот объект с данными преобразуется в нормальный вид с помощью React.createElement
больше не придумал, как текстовый файл с сервера преобразовать в код...
Суть вопроса: безопасно ли так делать и как данный вид кода воспринимается программистами со стажем?)
Я всего-лишь самоучка без знакомых программистов

Comments

[Василий Банников]

Оба варианта выглядят очень подозрительно. Какая вообще задача?

[alex4answ]

какой-то кал если честно, то есть вы отказались от jsx, храните все в объектах подобных react элементам, что происходит?
Зачем вам это?
Как это поддерживать и понимать структуру?

[Алексей]

Василий Банников, Идея в том, чтобы хранить как-то готовую структуру html в базе данных и отправлять на клиент при необходимости. А вот как отрендерить уже на клиенте, пока идей нет

alex4answ, С сервера отправляется json текст в виде "<h1>text</h1>" Я хочу его преобразовать в html разметку для отображения в браузере. Видел метод dangerouslySetInnerHTML, но он я так понимаю очень опасен. Поэтому для удобства сделал объект, подобный react элементам

Поймите меня правильно) Я не отказываюсь от jsx, просто в одном конкретном компоненте я хотел бы загружать готовую html структуру, которая приходит с сервера по определенному условию, а лишнее не грузится на клиент. Придумал только с React.createElement

Может посоветуйте, что-то более простое и лучшее решение?

[alex4answ]

Алексей, делайте правильную валидацию, очищайте от опасных моментов, что через createElement, что через dangerouslySetInnerHTML передавать сырые данные - плохая идея.

Это по сути одно и тоже в вашем случае, вставляя html в createElement как children, вы не делайте ваш код безопасным )

[Алексей]

alex4answ, ясно, я понял, спасибо)

передавать сырые данные - плохая идея

вставляя html в createElement как children

Даже если я передаю просто текст без всяких лишних кодов языка программирования?

[alex4answ]

Алексей, нет, только если вы не доверяете данным, если вы литерал вставили типа:

const text = "text";
<div>{text}</div>

то это безопасно

[Василий Банников]

Алексей,

но он я так понимаю очень опасен.

Он супер опасен, если html сгенерирован пользователем.