我正在写一个Angular应用程序,我有一个HTML响应,我想显示。
我怎么做呢?如果我简单地使用绑定语法{{myVal}},它将编码所有HTML字符(当然)。
我需要以某种方式将一个div的innerHTML绑定到变量值。
我正在写一个Angular应用程序,我有一个HTML响应,我想显示。
我怎么做呢?如果我简单地使用绑定语法{{myVal}},它将编码所有HTML字符(当然)。
我需要以某种方式将一个div的innerHTML绑定到变量值。
当前回答
这里已经提供了简短的回答:使用<div [innerHTML]="yourHtml">绑定。
然而,这里提到的其他建议可能具有误导性。当你绑定到这样的属性时,Angular有一个内置的清除机制。因为Angular不是一个专门的消毒库,所以它对可疑内容过于热心,不愿冒任何风险。例如,它将所有SVG内容清除为空字符串。
您可能会听到一些建议,通过使用DomSanitizer将内容标记为安全的bypassSecurityTrustXXX方法来“消毒”您的内容。也有使用管道的建议,该管道通常被称为safeHtml。
所有这些都是误导,因为它实际上绕过了消毒,而不是消毒你的内容。这可能是一个安全问题,因为如果您对用户提供的内容或任何您不确定的内容这样做,您就会为恶意代码攻击敞开大门。
如果Angular通过内置的清理功能删除了你需要的某些东西,你可以做的不是禁用它,而是将实际的清理工作委托给擅长这项任务的专用库。例如——DOMPurify。
我已经为它做了一个包装器库,这样就可以很容易地在Angular中使用它: https://github.com/TinkoffCreditSystems/ng-dompurify
它还有一个管道来声明式地净化HTML:
<div [innerHtml]="value | dompurify"></div>
与这里建议的管道的不同之处在于,它实际上通过DOMPurify进行消毒,因此适用于SVG。
编辑:Angular不再在Ivy渲染器中对CSS进行消毒,所以下面的信息(出于历史考虑)是不相关的:
要记住的一件事是,DOMPurify很适合净化HTML/SVG,但不适用于CSS。所以你可以提供Angular的CSS消毒器来处理CSS:
import {NgModule, ɵ_sanitizeStyle} from '@angular/core';
import {SANITIZE_STYLE} from '@tinkoff/ng-dompurify';
@NgModule({
// ...
providers: [
{
provide: SANITIZE_STYLE,
useValue: ɵ_sanitizeStyle,
},
],
// ...
})
export class AppModule {}
它是内部的——因此有了ɵ前缀,但这也是Angular团队在他们自己的包中使用它的方式。该库也适用于Angular Universal和服务器端渲染环境。
其他回答
只是在目前为止所有精彩的回答中补充一点:如果你正在使用[innerHTML]来渲染Angular组件,并且对它不能像我一样工作感到沮丧,可以看看我写的ngx-dynamic-hooks库来解决这个问题。
有了它,您可以从动态字符串/html加载组件,而不会影响安全性。它实际上也像[innerHTML]一样使用Angular的DOMSanitizer,但保留了加载组件的能力(以一种安全的方式)。
在这部《斯塔克布利茨》中可以看到它的作用。
这里已经提供了简短的回答:使用<div [innerHTML]="yourHtml">绑定。
然而,这里提到的其他建议可能具有误导性。当你绑定到这样的属性时,Angular有一个内置的清除机制。因为Angular不是一个专门的消毒库,所以它对可疑内容过于热心,不愿冒任何风险。例如,它将所有SVG内容清除为空字符串。
您可能会听到一些建议,通过使用DomSanitizer将内容标记为安全的bypassSecurityTrustXXX方法来“消毒”您的内容。也有使用管道的建议,该管道通常被称为safeHtml。
所有这些都是误导,因为它实际上绕过了消毒,而不是消毒你的内容。这可能是一个安全问题,因为如果您对用户提供的内容或任何您不确定的内容这样做,您就会为恶意代码攻击敞开大门。
如果Angular通过内置的清理功能删除了你需要的某些东西,你可以做的不是禁用它,而是将实际的清理工作委托给擅长这项任务的专用库。例如——DOMPurify。
我已经为它做了一个包装器库,这样就可以很容易地在Angular中使用它: https://github.com/TinkoffCreditSystems/ng-dompurify
它还有一个管道来声明式地净化HTML:
<div [innerHtml]="value | dompurify"></div>
与这里建议的管道的不同之处在于,它实际上通过DOMPurify进行消毒,因此适用于SVG。
编辑:Angular不再在Ivy渲染器中对CSS进行消毒,所以下面的信息(出于历史考虑)是不相关的:
要记住的一件事是,DOMPurify很适合净化HTML/SVG,但不适用于CSS。所以你可以提供Angular的CSS消毒器来处理CSS:
import {NgModule, ɵ_sanitizeStyle} from '@angular/core';
import {SANITIZE_STYLE} from '@tinkoff/ng-dompurify';
@NgModule({
// ...
providers: [
{
provide: SANITIZE_STYLE,
useValue: ɵ_sanitizeStyle,
},
],
// ...
})
export class AppModule {}
它是内部的——因此有了ɵ前缀,但这也是Angular团队在他们自己的包中使用它的方式。该库也适用于Angular Universal和服务器端渲染环境。
正确的语法如下:
<div [innerHTML]="theHtmlString"></div>
文档参考
Angular 2+支持渲染HTML的[innerHTML]属性绑定。如果以其他方式使用插值,则它将被视为字符串。
转换成。html文件
<div [innerHTML]="theHtmlString"></div>
导入.ts文件
theHtmlString:String = "enter your html codes here";
Angular 2.0.0和Angular 4.0.0 final
对于安全的内容
<div [innerHTML]="myVal"></div>
DOMSanitizer
潜在的不安全HTML需要使用angular的DOM杀毒器显式地标记为受信任,这样就不会剥离潜在的不安全内容
<div [innerHTML]="myVal | safeHtml"></div>
用一根管子
@Pipe({name: 'safeHtml'})
export class Safe {
constructor(private sanitizer:DomSanitizer){}
transform(style) {
return this.sanitizer.bypassSecurityTrustHtml(style);
//return this.sanitizer.bypassSecurityTrustStyle(style);
// return this.sanitizer.bypassSecurityTrustXxx(style); - see docs
}
}
在RC.1中,有些样式不能使用绑定语法添加
文档:https://angular.io/api/platform-browser/DomSanitizer
安全警告
相信用户添加的HTML可能会带来安全风险。之前提到的文档状态:
调用任意一个bypassSecurityTrust…api禁用Angular内置的对传入值的处理功能。仔细检查和审计进入此调用的所有值和代码路径。确保任何用户数据都为此安全上下文进行了适当的转义。更多详细信息请参见《安全指南》。
角标记
类似的
class FooComponent {
bar = 'bar';
foo = `<div>{{bar}}</div>
<my-comp></my-comp>
<input [(ngModel)]="bar">`;
with
<div [innerHTML]="foo"></div>
不会导致Angular在foo中处理任何特定于Angular的东西。 Angular在构建时用生成的代码替换Angular特定的标记。在运行时添加的标记不会被Angular处理。
要添加包含特定于angular的标记(属性或值绑定、组件、指令、管道等)的HTML,需要添加动态模块并在运行时编译组件。 如何在Angular 2.0中使用/创建动态模板来编译动态组件?