如何将 HTML 作为字符串传递并绕过安全性？

Question

我想使用 ionic-alert-controller 向用户显示消息。此消息是富文本，可能包含链接，警报实际上允许这些链接，并且对于大多数链接来说就像一个魅力。

但是（当链接是指向另一个应用程序的深层链接时）Angular 有时会认为它们不安全，从而使链接无法点击。我怎样才能防止这种行为？警报只接受字符串作为消息，不接受 SafeHTML。

this.a : string = getRichTextFromServer();

// EXAMPLE
// this.a = `<a href="www.google.de">works like a charm</a>
// Hello Hello <b>Example Text</b>
// <a href="sd-viewer://testlink">UNSAFE LINK</a>
// `;

// Some links are marked as unsafe
this.alertCtrl.create({
      message: this.a
    });
    
    
// Doesn't compile as message is only allowed to be a string
this.alertCtrl.create({
      message: this.domSan.bypassSecurityTrustHTML(this.a)
    });
    
// Gives error that function must be used with property binding
this.alertCtrl.create({
      message: this.domSan.bypassSecurityTrustHTML(this.a).toString()
    });
    
// Some links are marked as unsafe again
this.alertCtrl.create({
      this.ds.sanitize(SecurityContext.HTML,
        this.ds.bypassSecurityTrustHtml(a)
      )
    });

我可以在这里做什么？

编辑：HTML（在我的示例中存储在“a”中）是从后端动态加载的，因此在编译时不知道。因此，在运行时对其进行编辑以将 RichText 转换为 Angular 语法似乎很 hacky。

Answer 1

嗨，我昨天在这里回答了这个问题： How to bind object into iframe src

您可以创建管道并使用 domsanitizer

喜欢这个

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer} from '@angular/platform-browser';

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
} 

然后将你的管道添加到应用模块

@NgModule({
   declarations : [
     ...
     SafePipe
   ],
})

在 html 中你可以这样使用它（url 是你不安全的 url）

<a href="{{url | safe}}">UNSAFE LINK</a>

如果有帮助，请将我的答案标记为正确，谢谢！