0

我将 HTML 数据存储在 Firebase 数据库的一个字段中，其中一些包含<img src='[myImageUrl]'>. 在我的 HTML 文件中显示该字段时，图像已被阻止，我在控制台中收到以下消息：

GET unsafe:[myImageUrl] net::ERR_UNKNOWN_URL_SCHEME

通过几天的研究（无论是在 stackoverflow 上还是独立的），我已经实现了一个管道（如下）来清理和绕过安全性，但是我仍然遇到同样的问题。有人可以对这个问题有所了解，并为我指明解决方案的正确方向吗？

pub.html

<div [innerHTML]="((publication$ | async)?.body) | safeHtml "></div>

安全HTML.pipe.ts

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

@Pipe({name: 'safeHtml'})

export class SafeHtmlPipe implements PipeTransform {
  constructor( private domSanitizer: DomSanitizer) {}

  transform(
    value: any,
    context: SecurityContext = SecurityContext.HTML,
  ): SafeValue | null {
    return this.bypassSecurityTrust(context, this.domSanitizer.sanitize(context, value) );
  }

  private bypassSecurityTrust(
    context: SecurityContext,
    purifiedValue,
  ): SafeValue | null {
    switch (context) {
      case SecurityContext.HTML:
        return this.domSanitizer.bypassSecurityTrustHtml(purifiedValue);
      case SecurityContext.STYLE:
        return this.domSanitizer.bypassSecurityTrustStyle(purifiedValue);
      case SecurityContext.SCRIPT:
        return this.domSanitizer.bypassSecurityTrustScript(purifiedValue);
      case SecurityContext.URL:
        return this.domSanitizer.bypassSecurityTrustUrl(purifiedValue);
      case SecurityContext.RESOURCE_URL:
        return this.domSanitizer.bypassSecurityTrustResourceUrl(purifiedValue);
      default:
        return null;
    }
  }
}

*** 更新 *** 这似乎是 Firebase 存储的问题。在测试期间，我在 Firebase 上的单独实现中托管了相同的图像，并且图像显示没有任何问题。我已经确认每个实现的所有设置都是相同的。不知道为什么会这样，但看来我的代码不是问题。如果其他人遇到过这个问题，请告诉我。谢谢

4

1 回答 1

1

经过几天试图解决这个问题，我终于解决了这个问题。不确定我是否会称其为像解决方案一样的适当解决方案。问题出在 [innerHTML] 呈现字段内容的方式上。读取标签属性时，它会在属性值周围添加引号。

例如，如果您的字段包含<img src="http://some-image.png">，则 [innerHTML] 呈现<img src=""http://some-image.png"">。请注意，重复引号是src值。这会导致服务器抛出 403 Forbidden 错误，或者在某些情况下抛出不安全错误。

解决方法是简单地从值中删除引号，如下所示：<img src=http://some-image.png>. 这适用于所有标签属性（src、class、id 等）。

这感觉非常“hacky”，我很想找到一个真正的解决方案，但它可以工作并让我向前迈进。我希望这可以帮助任何有同样问题的人。

于 2020-07-23T03:38:30.553 回答