Стилизация генерируемого контента - Часть 1

Сегодня хочу рассказать о стилизации генерируемого контента в приложениях

Часто бывает так, что с сервера приходит контент с HTML разметкой, такой как тексты переводов или содержание статей. Иногда у нас есть функции, которые генерируют текст в зависимости от разных условий, например, текст с ценой и скидками в корзине для покупок

И в работе может быть нужно стилизовать определенные части этого контента. Как это сделать?

Давайте рассмотрим пример, когда нам нужно изменить цвет текста чисел. Для того, чтобы это сделать с минимальными изменениями в коде, мы можем добавить обертки с data-атрибутами в генерируемые строки

const lHours = `<span data-color="fiery-orange">${hours}</span>`

Читать 2 часть

Read in English 👀

#FrontendBeer #xss #dompurify #react (c) Frontend Beer

Стилизация генерируемого контента - Часть 2

Читать 1 часть

Затем, например в React, мы можем отрендерить этот текст с использованием dangerouslySetInnerHTML в HTML-теге. Однако, так как мы не всегда знаем, какой контент к нам придет, мы должны быть осторожными с XSS атаками. Для избежания таких атак, мы можем использовать специализированные утилиты, например библиотека xss

Вот пример использования этого инструмента:



<h1 className="text-wrapper" dangerouslySetInnerHTML={{ __html: xss(getText(2, 35, 35), xssOptions) }} />

А стилизовать можно вот так:

.text-wrapper {
  & [data-color="fiery-orange"] {
    color: var(--color-fiery-orange);
  }
}

Конечно, вы можете настроить и более сложные вещи, чем просто data-атрибуты, но я хотел продемонстрировать, как можно быстро добавить стили к определенным частям текста, не прибегая к сложным решениям с компонентами

В качестве альтернативы, вы также можете рассмотреть библиотеку DOMPurify

Пример с использованием библиотеки XSS в React можно найти здесь


Read in English 👀

#FrontendBeer #xss #dompurify #react (c) Frontend Beer