Есть ли способ избежать строк HTML, ТОГДА применить html-разметку в Angular?

Question

У меня есть форма поиска в Angular, которая получает объект из базы данных, которая содержит массив строк. Я использовал трубу, которая окружала бы запрос <mark></mark> к строке результата, что выделило бы поисковый запрос в результате, что очень удобно. Пока все хорошо.

Я сейчас пытаюсь вернуть и выделить результаты, которые являются html-type строками, содержащими HTML-разметку. Здесь возникает трудность.

Простое отображение массива результатов не удастся, потому что Angular автоматически очищает HTML.

WARNING: sanitizing HTML stripped some content, see 
http://g.co/ng/security#xss

Итак, я использовал здесь реализацию Angular safe pipe, чтобы обойти санитарные условия: https://medium.com/@swarnakishore/angular-safe-pipe-implementation-to-bypass-domsanitizer-stripping-out-content-c1bf0f1cc36b

return this.sanitizer.bypassSecurityTrustHtml(value);

В этот момент HTML-разметка будет отображаться в результатах, что не очень хорошо. Поэтому я построил Escape-канал HTML для преобразования html в коды символов ...

return value.toString().replace(new RegExp('/</g'), '&lt;').replace(new 
RegExp('/>/g'), '&gt;');

Связывание с component.html

{{result.value | safe: 'html' | escapehtml | highlight: 
this.search.get('query').value }}

Теперь мой экранированный html будет отображаться в результатах, но канал выделения также будет экранирован, показывая <mark>query</mark> вместо выделения запрашиваемого текста.

Есть ли здесь какой-то подход в Angular, чтобы получить то, что я ищу (экранированные строки HTML с разметкой html), или мне нужно отказаться от своей выделенной трубы и просто показать escapedHTML после sanitization?

Answer 1

Практически все, что вы придумали, приведет к появлению уязвимости в системе безопасности, которая позволяет внедрить xxs.Лучше всего разбить вашу строку на 3 части, начать, выделить и закончить и визуализировать ее с помощью

{{start}}<mark>{{highlight}}</mark>{{end}}