angular - bypassSecurityTrustResourceUrl 和 bypassSecurityTrustUrl 有什么区别

Question

我浏览了两个函数的 Angular 文档

bypassSecurityTrustUrl其中说

Bypass security and trust the given value to be a safe style URL, i.e. a value that can be used in hyperlinks or <img src>

bypassSecurityTrustResourceUrl其中说

Bypass security and trust the given value to be a safe resource URL, i.e. a location that may be used to load executable code from, like <script src>, or <iframe src>.

以上都用于绕过安全和信任。

我绕过了 <img src> 的 blob url ,所以在看文档之前，我的IDE(vscode)介绍了上面两个功能，我用了 bypassSecurityTrustResourceUrl我的代码就像...这样。

组件.ts

    this.fileService.getFileBlobUrl(imgsrc).subscribe(url => {
      this.domSanitizer.bypassSecurityTrustResourceUrl
      user.bloburl = this.domSanitizer.bypassSecurityTrustResourceUrl(url);
    });

组件.html

    <img [src]="user.bloburl" class="avatar" alt="avatar">

根据文档 bypassSecurityTrustUrl应该工作。但我使用了“bypassSecurityTrustResourceUrl”

它实际上正在工作!!!!

所以我的问题是这两个功能之间有什么区别。如果可以使用其中任何一个，为什么会有两个不同的功能？

Answer 1

我实际上是在为 SafeValue 创建管道s 并对此感兴趣。所以我开始挖掘，这是我发现的:

DomSanitizationService: sanitization() :

      case SecurityContext.URL:
        const type = getSanitizationBypassType(value);
        if (allowSanitizationBypassOrThrow(value, BypassType.Url)) {
          return unwrapSafeValue(value);
        }
        return _sanitizeUrl(String(value));
      case SecurityContext.RESOURCE_URL:
        if (allowSanitizationBypassOrThrow(value, BypassType.ResourceUrl)) {
          return unwrapSafeValue(value);
        }

所以这里 unwrapSafeValue函数在两种类型中都被调用，但下面我们有:

DomSanitizationService:

  bypassSecurityTrustUrl(value: string): SafeUrl { 
    return bypassSanitizationTrustUrl(value); 
  }
  bypassSecurityTrustResourceUrl(value: string): SafeResourceUrl {
    return bypassSanitizationTrustResourceUrl(value);
  }

所以这里调用了 2 个不同的函数，让我们更深入。

在 sanitization/bypass.ts我们可以找:

export function bypassSanitizationTrustUrl(trustedUrl: string): SafeUrl {
  return new SafeUrlImpl(trustedUrl);
}
export function bypassSanitizationTrustResourceUrl(trustedResourceUrl: string): SafeResourceUrl {
  return new SafeResourceUrlImpl(trustedResourceUrl);
}

几行我们可以发现它们之间的唯一区别在于返回的类:

class SafeUrlImpl extends SafeValueImpl implements SafeUrl {
  getTypeName() { return BypassType.Url; }
}
class SafeResourceUrlImpl extends SafeValueImpl implements SafeResourceUrl {
  getTypeName() { return BypassType.ResourceUrl; }
}

因为

if (actualType != null && actualType !== type) {
    // Allow ResourceURLs in URL contexts, they are strictly more trusted.
    if (actualType === BypassType.ResourceUrl && type === BypassType.Url) return true;
    throw new Error(
        `Required a safe ${type}, got a ${actualType} (see http://g.co/ng/security#xss)`);
  }

现在我们知道 ResourceUrl任何地方都允许 Url将是。