[英]Angular - innerHTML, escape less/greater than characters, but leave <br /> untouched
So I have an Angular 8 app with a table that is displaying parsed XML content, but there are some cases where a string can contain所以我有一个 Angular 8 应用程序,其中包含一个显示解析的 XML 内容的表格,但在某些情况下,字符串可以包含
tags that needs to be parsed as HTML, but also other content braced in less/greater than signs, for example .需要被解析为 HTML 的标签,还有其他内容用小于/大于符号支撑,例如 . I'm using [innerHTML] to inject it to a tag, but these braced strings get cut out.
我正在使用 [innerHTML] 将其注入标签,但这些带支撑的字符串被剪掉了。 I've tried using DomSanitizer like this:
我试过像这样使用 DomSanitizer:
public sanitizeDsxText(text: any): any {
return this.sanitizer.bypassSecurityTrustHtml(text);
}
But unfortunately, that didn't work either.但不幸的是,这也不起作用。 Have anyone ever faced a similar issue and can provide a simple solution?
有没有人遇到过类似的问题并且可以提供一个简单的解决方案? I will appreciate it greatly :),
我将不胜感激:),
EDIT: As per request, to be more precise.编辑:根据要求,更准确地说。 I have a like this:
我有一个这样的:
<td class="dsx-table__cell" [innerHTML]="item.target?.txt">
</td>
Text in "item.target?.txt" looks like this: "Cześć wam, tu bliźniaki dwa <br/> Paprika – siostra, brat <FAR/OFF>" *
“item.target?.txt”中的文本如下所示:
"Cześć wam, tu bliźniaki dwa <br/> Paprika – siostra, brat <FAR/OFF>" *
And the <bt/>
get parsed like it should, to normal <br>
tag, but <FAR/OFF>
get cut out - I need to find a way to only parse <br>
's and leave other strings in brackets not parsed.并且
<bt/>
被解析为正常的<br>
标记,但<FAR/OFF>
被删除 - 我需要找到一种方法只解析<br>
并将其他字符串留在括号中而不是解析。
I'm late to the party.我参加聚会迟到了。 I've created a Angular pipe that either allows you to selectively allow tags or have the option to convert them to HTML entities.
我创建了一个 Angular 管道,它允许您有选择地允许标签或可以选择将它们转换为 HTML 实体。
Here's the code:这是代码:
import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";
import DOMPurify from "dompurify";
@Pipe({
name: "safeHtml",
})
export class SafeHtmlPipe implements PipeTransform {
constructor(private domSanitizer: DomSanitizer) {
// How to securely allow target attribute
// https://github.com/cure53/DOMPurify/issues/317
DOMPurify.addHook("afterSanitizeAttributes", function (node: Element) {
// set all elements owning target to target=_blank
if ("target" in node) {
(node as Element).setAttribute("target", "_blank");
(node as Element).setAttribute("rel", "noopener");
}
});
}
transform(html: string, convertToEntity: boolean, additionalTags?: string[]): string {
if (html.length > 0) {
// we don't want tags such as `<input>` or any form elements
// from being displayed, and at the same time allows certain
// tags element for styling
const sanitizeOptions = {
FORBID_TAGS: ["script", "form", "input", "select", "textarea"],
ADD_TAGS: ["b", "i", "em", "span"],
ALLOW_UNKNOWN_PROTOCOLS: true,
// NOTE: we enable this one if in case the addHook method has unexpected behavior
// ADD_ATTR: ["target"],
};
if (additionalTags && additionalTags.length) {
sanitizeOptions.ADD_TAGS.push(...additionalTags);
}
let sanitizedContent = html;
if (convertToEntity) {
sanitizedContent = this.escapeHtml(html);
} else {
sanitizedContent = DOMPurify.sanitize(html, sanitizeOptions);
}
return this.domSanitizer.bypassSecurityTrustHtml(sanitizedContent) as string;
}
return html;
}
private escapeHtml(str: string): string {
// DOMSanitizer or DOMPurify doesn't have options to convert special characters
// to html entities
return str
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
}
Usage:用法:
img
and a
tagsimg
和a
标签<div class="modal-body" [innerHTML]="message | safeHtml: false:['img', 'a']"></div>
<p [innerHTML]="content | safeHtml: true"></p>
Well turns out it's either too complicated or impossible to do with DomSanitizer, so the solution we chose was to parse it differently on back-end -事实证明,使用 DomSanitizer 要么太复杂要么不可能,所以我们选择的解决方案是在后端以不同的方式解析它 -
tags are returned normally in JSON response, but every other string braced in "<>" has it replaced with HTML entities and it works like it should.标签通常在 JSON 响应中返回,但每个其他用“<>”括起来的字符串都将其替换为 HTML 实体,并且它的工作方式应该如此。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.