Рендеринг необработанного HTML в Blazor с помощью MarkupString
На днях я создавал компонент, который должен был отображать HTML-код, полученный из CMS. У меня была строка HTML в переменной, и я просто поместил ее в шаблон, например @myHtml. И, конечно же, Blazor избегал всего и отображал настоящие теги в виде текста на странице. Не то, что я хотел.
Проблема
По умолчанию Blazor кодирует любую строку, отображаемую в шаблоне. Итак, если у вас есть:
[[[ТОК_1]]]
И вы делаете это:
[[[ТОК_2]]]
На странице вы увидите буквальный текст <strong>Hello</strong> <em>world</em> вместо Hello world. Blazor делает это специально, чтобы предотвратить XSS-атаки, что является правильным поведением по умолчанию.
Решение: MarkupString
Если вам действительно нужно отобразить необработанный HTML, вы заключаете строку в MarkupString:
<div>@((MarkupString)content)</div>
И все! Теперь Blazor будет отображать HTML как фактическую разметку. Вы также можете присвоить его переменной:
[[[ТОК_6]]]
[[[ТОК_7]]]
Реальный пример
Я извлекал контент блога из API, и мне нужно было отобразить его в компоненте предварительного просмотра. В контенте были все виды HTML — заголовки, блоки кода, ссылки, изображения. Вот примерно как это выглядело:
[[[ТОК_8]]]
Работает отлично. HTML из API отображается как фактическая разметка.
Будьте осторожны с ненадежным контентом
Это важно: MarkupString не очищает HTML. Он отображает все, что вы ему дадите, включая теги <script>. Поэтому, если контент получен пользователем или из ненадежного источника, вам необходимо сначала его очистить.
В Blazor нет встроенного средства очистки HTML, но вы можете использовать такую библиотеку, как HtmlSanitizer:
[[[ТОК_12]]]
<div>@SafeHtml(untrustedContent)</div>
Это удаляет опасные элементы, такие как обработчики <script>, onclick и другие элементы, которые вы не хотите отображать из пользовательского контента.
Когда его использовать
Я использую MarkupString для:
- Содержимое CMS или уценка, преобразованные в HTML на стороне сервера.
- Вывод расширенного текстового редактора
- Предварительный просмотр шаблонов электронной почты
- Любой готовый HTML из надежных источников.
Все, что исходит от пользователя, всегда сначала очищайте. Лучше перестраховаться, чем потом сожалеть.
Надеюсь, вам понравился пост! Не стесняйтесь обращаться ко мне в любой социальной сети по адресу @emimontesdeoca.