无法在 [innerHTML] 中显示图像
Cannot display images in [innerHTML]
我的 Firebase 数据库的一个字段中存储了 HTML 数据,其中一些包含 <img src='[myImageUrl]'>
。在我的 HTML 文件中显示该字段时,图像已被阻止,我在控制台中收到以下消息:
GET unsafe:[myImageUrl] net::ERR_UNKNOWN_URL_SCHEME
通过几天的研究(在 Whosebug 和 independent 上),我已经实现了一个管道(如下)来清理和绕过安全性,但是我仍然有同样的问题。有人可以阐明这个问题并为我指明解决问题的正确方向吗?
pub.html
<div [innerHTML]="((publication$ | async)?.body) | safeHtml "></div>
safeHtml.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 上的单独实现上托管了相同的图像,并且图像显示没有任何问题。我已经确认每个实现的所有设置都是相同的。不知道为什么会这样,但看来我的代码不是问题。如果其他人遇到过这个问题,请告诉我。谢谢
经过几天的努力解决这个问题,我终于解决了这个问题。不确定我会称其为解决方案的适当解决方案。问题出在 [innerHTML] 呈现字段内容的方式。读取标签属性时,它会在属性值周围添加引号。
例如,如果您的字段包含 <img src="http://some-image.png">
,[innerHTML] 会呈现 <img src=""http://some-image.png"">
。请注意,重复引号是 src
值。这会导致服务器抛出 403 禁止错误或在某些情况下抛出不安全错误。
解决方法是简单地从值中删除引号,如下所示:<img src=http://some-image.png>
。所有标签属性(src、class、id 等)都是如此。
这感觉非常 'hacky',我很想找到一个真正的解决方案,但它有效并允许我继续前进。我希望这对遇到同样问题的人有所帮助。
我的 Firebase 数据库的一个字段中存储了 HTML 数据,其中一些包含 <img src='[myImageUrl]'>
。在我的 HTML 文件中显示该字段时,图像已被阻止,我在控制台中收到以下消息:
GET unsafe:[myImageUrl] net::ERR_UNKNOWN_URL_SCHEME
通过几天的研究(在 Whosebug 和 independent 上),我已经实现了一个管道(如下)来清理和绕过安全性,但是我仍然有同样的问题。有人可以阐明这个问题并为我指明解决问题的正确方向吗?
pub.html
<div [innerHTML]="((publication$ | async)?.body) | safeHtml "></div>
safeHtml.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 上的单独实现上托管了相同的图像,并且图像显示没有任何问题。我已经确认每个实现的所有设置都是相同的。不知道为什么会这样,但看来我的代码不是问题。如果其他人遇到过这个问题,请告诉我。谢谢
经过几天的努力解决这个问题,我终于解决了这个问题。不确定我会称其为解决方案的适当解决方案。问题出在 [innerHTML] 呈现字段内容的方式。读取标签属性时,它会在属性值周围添加引号。
例如,如果您的字段包含 <img src="http://some-image.png">
,[innerHTML] 会呈现 <img src=""http://some-image.png"">
。请注意,重复引号是 src
值。这会导致服务器抛出 403 禁止错误或在某些情况下抛出不安全错误。
解决方法是简单地从值中删除引号,如下所示:<img src=http://some-image.png>
。所有标签属性(src、class、id 等)都是如此。
这感觉非常 'hacky',我很想找到一个真正的解决方案,但它有效并允许我继续前进。我希望这对遇到同样问题的人有所帮助。