Question

我使用DocumentsService从服务器获取图像文件之后，我使用URL.createObjectURL(result)从服务器响应创建图像URL，一切似乎都正常，但我不断收到有关 { {1}} ，并且看不到图片。

sanitizing unsafe URL

在组件中，我已经注入了服务并

@Injectable()
export class DocumentsService {

    public url:string = 'api.server.url'

    constructor(private http: HttpClient , private dom: DomSanitizer) {
    }

    public getImageUrl(imageId: string): Observable<any> {

        let requestOptions = {
            params: {
                id: imageId
            },
            responseType: "blob"
        };

        return this._restClientService.get(this.url, requestOptions).map(result => {
            let url = URL.createObjectURL(result);
            return this.dom.bypassSecurityTrustUrl(url);   
        });
    }
}

在模板中，我使用一个函数来检查使用的图像是否存在

this._doc.getImageUrl(doc.id)
          .do(console.log) // => SafeUrlImpl {changingThisBreaksApplicationSecurity: "blob:http://localhost:4200/2b9b4820-c7d0-4920-a094-cb3e4cc47c7c"}
          .subscribe(url => this.photoUrl = url)
      }

模板

public getImagePath(): string {
    if (this.photoUrl) {
      return this.photoUrl; //  after get the image from documents service
    }
    return FilesUrls.BlankAvatar;
  }

我不断收到此错误，我想我错过了一些事情

“警告：清理不安全的URL值SafeValue必须使用 [属性] =绑定： blob：http://localhost:4200/79dd8411-44a8-4e08-96d2-ad6d889c1056（请参阅 http://g.co/ng/security#xss）（请参阅http://g.co/ng/security#xss）”

Answer 1

我认为您不会在SafeUrl之后退还bypassSecurityTrustUrl。

查看适用于https://stackblitz.com/edit/angular-bqqumm的版本

代码必须类似于：

return this._restClientService.get(this.url, requestOptions).map(result => {
     let url = URL.createObjectURL(result);
     return this.dom.bypassSecurityTrustUrl(url);    
})

Answer 2

我发现问题与模板有关，我在使用{{getImage Path()}}，根据错误消息，我必须使用属性绑定而不是插值字符串。

<img [src]="getImagePath()" alt="user image">

Answer 3

使用绑定自动清理时，要使用属性设置值，您需要使用上下文DomSanitizer.sanitize调用SecurityContext.URL。顺便说一句，这是不正确的：src="{{getImagePath()}}"应该是[attr.src]="getImagePath()"

Answer 4

当使用图像给我同样的问题时，这对我有用。

HTML：

def caffeine_calc(amount):
  x1 = 0.5*amount
  x2 = 0.5*x1
  x3 = 0.5*x2
  print('After 6 hours:' + str(x1) + ' mg')
  print('After 12 hours:' + str(x2) + 'mg')
  print('After 18 hours:' + str(x3) + 'mg')

caffeine_calc(float(input("Please enter the amount of caffeine you want to calculate: ")))

组件：

After 6 hours:20.0 mg
After 12 hours:10.0mg
After 18 hours:5.0mg

使用DomSanitizer后，图片网址仍然不安全

4 个答案: