angular - 需要一个安全的 HTML，得到一个 Style

Question

我正在开发一个组件来动态加载 html 内容并验证加载的样式并防止将应用样式与动态模板的样式混合。

这是我的 html 组件:

<div class="modal-header">
  <h4 class="modal-title">{{title}}</h4>
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body" [innerHTML]="content | htmlParse">
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-primary" (click)="activeModal.close('Close click')">Aceptar</button>
</div>

自定义管道:

@Pipe({name: 'htmlParse'})
 export class HtmlParserPipe implements PipeTransform {
  constructor(private sanitized: DomSanitizer) {
  }

   transform(value) {
     return this.sanitized.bypassSecurityTrustStyle(value);
   }
  }

收到的错误是这个:

 Error: Required a safe HTML, got a Style (see http://g.co/ng/security#xss)
at DomSanitizerImpl.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DomSanitizerImpl.checkNotSafeValue (platform-browser.js:1831)
at DomSanitizerImpl.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DomSanitizerImpl.sanitize (platform-browser.js:1800)
at setElementProperty (core.js:21109)
at checkAndUpdateElementValue (core.js:21061)
at checkAndUpdateElementInline (core.js:21008)
at checkAndUpdateNodeInline (core.js:23359)
at checkAndUpdateNode (core.js:23325)
at debugCheckAndUpdateNode (core.js:23959)
at debugCheckRenderNodeFn (core.js:23945)
at Object.eval [as updateRenderer] (GenericContentModalComponent.html:7)

Answer 1

请试试这个对我有用 bypassSecurityTrustHtml