如何在 Angular 5 中允许不安全的 HTML

Question

您好，我正在为我的 Web 应用程序使用 Angular 5。我的用例是从 Java 服务返回一些动态创建的 html 内容，并在 Angular 组件中使用相同的内容。我能够通过 DomSanitizer 绕过角度安全性，但点击事件仍然无法正常工作。

下面是我的代码。

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import DOMPurify from 'dompurify';
declare var angular: any;

@Pipe({
    name: 'safeHtml'
})
export class SafeHtmlPipe implements PipeTransform {

    constructor(protected sanitizer: DomSanitizer) {}

    public transform(value: any): any {
        const sanitizedContent = DOMPurify.sanitize(value);
        console.log(sanitizedContent);
        return this.sanitizer.bypassSecurityTrustHtml(sanitizedContent);

    }
}

这是你用来绕过不受信任的 html 的有角度的 safeHtml 管道。

Component.ts - 用于服务调用

import { Component, OnInit } from '@angular/core';
import {ViewReviewService} from '../../services/view-review-service';
import {Response} from '@angular/http';

@Component({
  selector: 'app-sample-hit',
  templateUrl: './sample-hit.component.html',
  styleUrls: ['./sample-hit.component.css']
})
export class SampleHitComponent implements OnInit {
  sampleData: any;
  
  constructor(private viewReviewService: ViewReviewService) { }

  ngOnInit() {
    
    this.hitSample();
  }

  hitSample() {
    this.viewReviewService.hitSample().subscribe((res: Response) =>  {
      console.log(res['_body']);
      this.sampleData =  res['_body'];
    });
  }

  
  callSampleFunction(value: string) {
    console.log('hit hit ' + value);
  }
}

This.sampleData = '<a> This is my a tag</a>
                  <a (click)="callSampleFunction(value1)"> This tag will call function</a>
                  <a (click)="callSampleFunction(value2)"> This tag will call same function with 
                  different value</a>
                  <p> other html </a>'

component.html

<div [innerHTML]="sampleData | safeHtml" >
</div>

我还需要做什么。请帮忙？

Answer 1

注入的 html 不会被“棱角化”，因此像 (click) 这样的绑定将不起作用。

您必须使用纯 JavaScript，例如 "onClick"="someJsFunction"。然后我不知道如何从 JS 代码调用组件代码（你必须能够做到这一点，例如从浏览器控制台）。

一个讨厌的解决方法是通过设置全局变量来公开组件实例。

Answer 2

您不能通过添加 (click) 来制作可点击元素，因为它是一个角度事件，不会在 [innerHTML] 内编译。但是，有一种类似于您的简单方法如下：

1- 从后端或管道中为您的 HTML 元素添加一个唯一的类，如下所示：

public transform(value: any): any {
    const sanitizedContent = DOMPurify.sanitize(value);
    console.log(sanitizedContent);
    return this.sanitizer.bypassSecurityTrustHtml(this.modify(sanitizedContent));

}

modify(text: string){
 // add class here to your text and return it

}

假设你的类名是 someClass

This.sampleData = '<a class="someClass"> This is my a tag</a>
                  <a (click)="callSampleFunction(value1)"> This tag will call function</a>
                  <a (click)="callSampleFunction(value2)"> This tag will call same function with 
                  different value</a>
                  <p> other html </a>'

2-在你的component.ts文件中视图初始化事件之后你可以添加如下代码：

  ngAfterViewInit() {
    // assume dynamic HTML was added before
    const elementList = this.elRef.nativeElement.querySelectorAll('.someClass');
    if (elementList) {
        for (const element of elementList) {
        element.addEventListener('click', this.callSampleFunction.bind(this));
         // bind an event listener to every element with the class someClass
      }

    } 
  }