使用Angular 2的资源URL上下文中使用的不安全值

Question

由于升级到最新的Angular 2发布候选版本,我的img标签引发了错误.

img标签:

<img class='photo-img' [hidden]="!showPhoto1" src='{{theMediaItem.photoURL1}}'>

生成浏览器错误:

http://veeu-images.s3.amazonaws.com/media/userphotos/116_1464645173408_cdv_photo_007.jpg

网址的价值是:

import {DomSanitizationService} from '@angular/platform-browser';

@Component({
  templateUrl: 'build/pages/veeu/veeu.html'
})
export class VeeUPage {
  static get parameters() {
    return [[NavController], [App], [MenuController], [DomSanitizationService]];
  }

  constructor(nav, app, menu, sanitizer) {

    this.app = app;
    this.nav = nav;
    this.menu = menu;
    this.sanitizer = sanitizer;

    this.theMediaItem.photoURL1 = this.sanitizer.bypassSecurityTrustUrl(this.mediaItems[1].url);
  }

编辑:

我已经尝试过在另一个解决方案中提出的建议,这个问题应该是重复的,但我得到了同样的错误.

我已将以下代码添加到控制器:

<img class='photo-img' [hidden]="!showPhoto1" [src]='theMediaItem.photoURL1'>

我仍然收到相同的错误消息.

EDIT2:

我还将html更改为:

<img class='photo-img' [hidden]="!showPhoto1" src='{{theMediaItem.photoURL1}}'>

我仍然得到相同的错误消息

Answer 1

方法1:

import { DomSanitizer } from '@angular/platform-browser';

...

constructor(public sanitizer: DomSanitizer){}

...然后在HTML中:

    <iframe [src]='sanitizer.bypassSecurityTrustResourceUrl(myurl)' width="640" height="360" frameborder="0"
        webkitallowfullscreen mozallowfullscreen allowfullscreen>
    </iframe>

方法2:

我不得不首先在代码中进行清理,因为Vimeo不会在Edge上最大化

这只是一个例子,重点是,首先在代码中清理,但是你喜欢

对象界面:

import { SafeUrl } from '@angular/platform-browser';
export class Book {
   constructor(public title: string, public videoURL?: SafeUrl) {}
}

服务(例如):

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { Book } from '../features/models/book';
import { DomSanitizer } from '@angular/platform-browser';

@Injectable()

export class BookService {
    constructor(
        private sanitizer: DomSanitizer
    ) {}
    getBooks (): Observable<Book[]> {    
        return new Observable( observer => {
            observer.next(
                    new Book(
                        'Some Book Title', 
                        this.sanitizer.bypassSecurityTrustResourceUrl(
                           'https://player.vimeo.com/video/12345678'
                        )
                    ),
                    new Book(
                        'Second BookTitle',
                        this.sanitizer.bypassSecurityTrustResourceUrl(
                            'https://player.vimeo.com/video/91011121'
                        )
                    )
                )
            });

    }
}

Answer 2

我正在使用rc.4,这种方法适用于ES2015(ES6):

import {DomSanitizationService} from '@angular/platform-browser';

@Component({
  templateUrl: 'build/pages/veeu/veeu.html'
})
export class VeeUPage {
  static get parameters() {
    return [NavController, App, MenuController, DomSanitizationService];
  }

  constructor(nav, app, menu, sanitizer) {

    this.app = app;
    this.nav = nav;
    this.menu = menu;
    this.sanitizer = sanitizer;    
  }

  photoURL() {
    return this.sanitizer.bypassSecurityTrustUrl(this.mediaItems[1].url);
  }
}

在HTML中:

<iframe [src]='photoURL()' width="640" height="360" frameborder="0"
    webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>

使用函数将确保在清理后值不会更改.另请注意,您使用的清理功能取决于上下文.

对于图像,bypassSecurityTrustUrl将起作用,但对于其他用途,您需要参考文档:

https://angular.io/docs/ts/latest/api/platform-b​​rowser/index/DomSanitizer-class.html

Answer 3

解决这个问题最优雅的方法是:使用管道.这是一个例子(我的博客).因此,您可以简单地使用url | safe管道来绕过安全性.

<iframe [src]="url | safe"></iframe>

Answer 4

您可以将清理程序公开给视图,或者公开将调用转发给bypassSecurityTrustUrl的方法

<img class='photo-img' [hidden]="!showPhoto1" 
    [src]='sanitizer.bypassSecurityTrustUrl(theMediaItem.photoURL1)'>

Answer 5

使用安全管道对其进行修复。

• 如果您还没有，请创建一个安全的管道。

  ng gc管道安全

• 在app.module.ts中添加安全管道

  声明：[SafePipe]

• 在您的ts中声明安全管道

导入Dom消毒剂和安全管道以安全地访问URL

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);
  }
}

-使用src网址添加安全

<iframe width="900" height="500" [src]="link | safe"/>

Answer 6

默认情况下，Angular 将所有值视为不受信任。当一个值从模板插入到 DOM 中时，通过属性、属性、样式、类绑定或插值，Angular 会清理和转义不受信任的值。

因此，如果您直接操作 DOM 并插入内容，则需要对其进行清理，否则 Angular 会出错。

我为此创建了管道SanitizeUrlPipe

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

@Pipe({
    name: "sanitizeUrl"
})
export class SanitizeUrlPipe implements PipeTransform {

    constructor(private _sanitizer: DomSanitizer) { }

    transform(v: string): SafeHtml {
        return this._sanitizer.bypassSecurityTrustResourceUrl(v);
    }
}

这就是你可以使用的方式

<iframe [src]="url | sanitizeUrl" width="100%" height="500px"></iframe>

如果您想添加 HTML，那么SanitizeHtmlPipe可以提供帮助

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

@Pipe({
    name: "sanitizeHtml"
})
export class SanitizeHtmlPipe implements PipeTransform {

    constructor(private _sanitizer: DomSanitizer) { }

    transform(v: string): SafeHtml {
        return this._sanitizer.bypassSecurityTrustHtml(v);
    }
}

在此处阅读有关 Angular 安全性的更多信息。