Угловой 5: отображать HTML и XML из ответа сервера

Question

Угловой 5: отображать HTML и XML из ответа сервера

У меня есть сценарий, где мне нужно отобразить HTML и XML из той же строки, отправленной с сервера.

Ответ от сервера выглядит так:

This is sample text with <b>bold text</b> and also some xml like this <note><to>you</to><from>me</from><heading>title</heading><body>message</body></note>. As you can see it contains both xml to display and html to render.

Я старался:

text;
msg = 'This is sample text with <b>bold text</b> and also some xml like this <note><to>you</to><from>me</from><heading>title</heading><body>message</body></note>. As you can see it contains both xml to display and html to render.'

constructor(private domSanitizer: DomSanitizer) {
}

ngOnInit() {
    this.text = this.getInnerHTMLValue();
}

getInnerHTMLValue() {
    return this.domSanitizer.bypassSecurityTrustHtml(this.msg);
}

HTML:

<pre [innerText]="text"></pre>

Я получаю эту ошибку:

SafeValue must use [property]=binding:...

И когда я использую [innerHTML] вместо [innerText] XML был очищен.

Как я могу отобразить образец кода XML наряду с разбором HTML-тегов, таких как <b> теги? Как минимум, как я могу избавиться от этой ошибки?

1

angular xss angular-dom-sanitizer

Источник

user2275792 26 апр '18 в 20:37

1 ответ

Решение

Другие вопросы по тегам angular xss angular-dom-sanitizer

user4694994 26 апр '18 в 22:51 2018-04-26 22:51 · Accepted Answer · 2018-04-26 22:51

Боюсь, это будет невозможно. Посмотрите на спецификации WC3:

Пользовательские агенты должны рассматривать элементы и атрибуты, которые они не понимают, как семантически нейтральные; оставляя их в DOM (для процессоров DOM) и стилизуя их в соответствии с CSS (для процессоров CSS), но не выводя из них никакого смысла.

Это означает, что хотя элементы неизвестны вашему браузеру, они будут частью домена и, следовательно, не будут отображаться в тексте.

Ваши единственные решения будут либо кодировать все теги, кроме <b>, <i>,... сам: <note> -> <note> или использовать что-то вроде уценки для форматирования.

Как самый простой обходной путь, просто используйте msg без санации как есть:

<pre>{{msg}}</pre>

Поскольку это не будет интерпретироваться, дезинфекция не является необходимой. (Теги как <b> не будет интерпретироваться, конечно.)