URL消毒導致嵌入式YouTube視頻刷新

我的AngularJS 2應用程序出現問題（我正在使用AngularJS 2的RC5版本）。看起來，一個已過濾的URL正在觸發更改檢測，然後更新下面的div，儘管我的組件狀態沒有任何更改。URL消毒導致嵌入式YouTube視頻刷新

從用戶角度來看，這表現爲它在播放時重新加載視頻。

所以在我的組件視圖中我有：

<div *ngIf="isVideo(item)"> 
    <iframe [src]="getTrustedYouTubeUrl(item)" scrolling="no" frameborder="0" allowfullscreen></iframe>   
</div>

的功能在上面的組件代碼的實現是：

getTrustedYouTubeUrl(linkedVideo:LinkedVideoModel) { 
    return this.sanitizer.bypassSecurityTrustResourceUrl(linkedVideo.video.url); 
}

在調試器中我看到，DIV被刷新相當頻繁，通過在AngularJS 2框架中觸發的東西。

問題消失，如果我替換HTML片段以上硬編碼的URL：

<div *ngIf="isVideo(item)"> 
    <iframe src="<hardcoded youtube url here>" scrolling="no" frameborder="0" allowfullscreen></iframe>   
</div>

所以我懷疑URL消毒導致它。

任何人都可以指向正確的方向嗎？一個嵌入式YouTube視頻的實例可以將其URL綁定到組件上的某個屬性？

來源

2016-09-10 ayls

想通了。

對於任何有興趣的人。這個問題在我的HTML中使用這個功能

[src]="getTrustedYouTubeUrl(item)"

重裝副作用消失了，一旦我改變了代碼，以計算安全的URL時，數據在我的業務加載，改變了IFRAME結合本

<iframe [src]="item.video.safeUrl" scrolling="no" frameborder="0" allowfullscreen></iframe>

請注意我現在綁定到一個屬性。

來源

2016-09-10 18:53:51 ayls

在使用[src] ='sanitizer.bypassSecurityTrustResourceUrl（this.Url）'幾個月後，我剛剛彈出這個問題。我不知道它爲什麼開始（角4.4和沒有更新它）。但是，您的解決方案解決了它。謝謝！ – Anthony

@Anthony你是怎麼解決它的？我現在有同樣的問題，我正在使用Angular 2.我也使用[src] ='sanitizer.bypassSecurityTrustResourceUrl（this.Url），但是當我將src綁定到屬性時，我得到「錯誤錯誤：需要一個安全的ResourceURL，有一個URL（見http://g.co/ng/security#xss）「消息。 – handris

@ handris查看我上面的答案。 – Anthony

我會嘗試與pure pipe

使用它

Angular executes a pure pipe only when it detects a pure change to the input value. A pure change is either a change to a primitive input value (String, Number, Boolean, Symbol) or a changed object reference (Date, Array, Function, Object).

管可能看起來像（RC.6 - DomSanitizer成爲代替DomSanitizationService）：

@Pipe({ name: 'safe' }) 
export class SafePipe implements PipeTransform { 
    constructor(private sanitizer: DomSanitizer) {} 
    transform(url) { 
    return this.sanitizer.bypassSecurityTrustResourceUrl(url); 
    } 
}

並將其用作以下內容：

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

Plunker Example（試推按鈕）

來源

2016-09-10 18:51:34 yurzui

謝謝，我會盡力的。我已經找到了另一種解決方法，但這似乎是一個有趣的想法。 – ayls

無法獲取/SafeValue%20must%20use%20[property]=binding:%20https://www.youtube.com/embed/wyVM1evRxNw%20(see%20http://g.co/ng/security – user3561494

不錯的解決方案！由於某種原因，Plunker不工作，這是一個最新版本[Plunker示例]（http://embed.plnkr.co/NEp3dZsJ7i8pKDOoJB8C/）（使用Angular v4.2.3） – istibekesi

您可以保留原來的解決方案，只是使用changeDetection: ChangeDetectionStrategy.OnPush

<div *ngIf="isVideo(item)"> 
    <iframe [src]="getTrustedYouTubeUrl(item)" scrolling="no" frameborder="0" allowfullscreen></iframe>   
</div>

來源

2017-12-31 21:56:09

結合以前的答案得到它的工作是這樣的：

組件。TS（只有相關的部分）

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

constructor( 
    private sanitizer: DomSanitizer 
) { 
    this.sanitizer = sanitizer; 
} 

ngOnInit() { 
this.getTrustedUrl('http://someUrl'); 
} 

getTrustedUrl(url:any){ 
this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url); 
}

template.html

<iframe  
    [src]='this.safeUrl'> 
</iframe>

來源

2018-01-08 16:59:11 Anthony

URL消毒導致嵌入式YouTube視頻刷新

回答

相關問題