URL 清理导致嵌入式 YouTube 视频的刷新

Posted 2023-02-24

【中文标题】URL 清理导致嵌入式 YouTube 视频的刷新

【英文标题】：URL sanitization is causing refresh of the embedded YouTube video

【发布时间】：2017-01-18 15:36:42

【问题描述】：

我的 AngularJS 2 应用程序有问题（我使用的是 AngularJS 2 的 RC5 版本）。似乎经过清理的 URL 正在触发更改检测，然后更新下面的 div，尽管我的组件状态没有任何更改。

从用户的角度来看，这表现为在播放视频时重新加载视频。

所以在我的组件视图中我有：

<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 框架中触发的东西刷新。

如果我用硬编码的 URL 替换上面的 html sn-p，问题就会消失：

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

所以我怀疑是 URL 清理造成的。

谁能指出我正确的方向？将其 URL 绑定到组件上的属性的嵌入式 YouTube 视频的工作示例可能是？

【参考方案1】：

想通了。

对于任何有兴趣的人。问题是在我的 html 中使用了这个函数

   [src]="getTrustedYouTubeUrl(item)"

当我在服务中加载数据并将 iframe 绑定更改为此时，更改代码以计算安全 url 后，重新加载的副作用就消失了

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

请注意，我现在绑定到一个属性。

【讨论】：

在使用 [src]='sanitizer.bypassSecurityTrustResourceUrl(this.Url)' 几个月后，我突然出现了同样的问题。我不知道它为什么开始（角度 4.4 并且没有更新它）。但是，您的解决方案解决了它。谢谢！

@Anthony 你是怎么解决的？我现在有同样的问题，我正在使用 Angular 2。我也在使用 [src]='sanitizer.bypassSecurityTrustResourceUrl(this.Url)，但是当我将 src 绑定到一个属性时，我得到“错误错误：需要一个安全的 ResourceURL，得到了一个 URL（见g.co/ng/security#xss）”消息。

@handris 见我上面的回答。

在加载数据时如何更改计算安全 url 的代码？我无法解决这个问题:(

【参考方案2】：

我会尝试将它与 pure pipe

一起使用

Angular 仅在检测到对 输入值。纯粹的改变要么是对原始输入的改变 值（字符串、数字、布尔值、符号）或更改的对象引用 （日期、数组、函数、对象）。

管道可能看起来像（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（尝试按下按钮）

【讨论】：

谢谢，我会试试的。我已经找到了另一种解决方法，但这似乎是一个有趣的想法。

无法获取 /SafeValue%20must%20use%20[property]=binding:%20https://www.youtube.com/embed/wyVM1evRxNw%20(见%20http://g.co /ng/安全

不错的解决方案！ Plunker 由于某种原因无法正常工作，这是最新版本Plunker Example（使用 Angular v4.2.3）

@istibekesi 谢谢。我修复了 plunker

很好的解决方案我喜欢它。工作就像 Angular 5 中的魅力。谢谢

【参考方案3】：

结合之前的答案使其以这种方式工作：

component.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);

模板.html

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

【讨论】：

正是我所需要的......这种应用程序允许消毒剂只运行一次。

这个问题已通过我的自动闪烁谷歌地图解决。谢谢

【参考方案4】：

您可以保留原来的解决方案，只使用changeDetection: ChangeDetectionStrategy.OnPush

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

【参考方案5】：

<iframe #ytplayer    frameborder="0" src="">
</iframe>    

@ViewChild('ytplayer', null) ytPlayer: ElementRef;

ngOnInit() 
  this.ytPlayer.nativeElement.src = this.act.iframe;

由于使用了 sanitizer.bypassSecurityTrustResourceUrl 而发生重新加载。 所以我们不应该使用它。 我觉得这样更舒服。 谢谢。