- codingsoho.com

Angularv4.初体验

9 安全嵌入视频 Safely Embed a Video

09 -- Safely Embed a Video

下面我们往网页上插入一段视频。

这个视频可以来自youtube或者youku

以youku为例，点击<embed src='[http://player.youku.com/player.php/sid/XMzY1NzU3NjAwNA](http://player.youku.com/player.php/sid/XMzY1NzU3NjAwNA)==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>

在video-list.component.html插入代码

  <div style="position: relative;height: 0;padding-bottom: 56.25%">
    <embed [src]=[http://player.youku.com/player.php/sid/XMzY1NzU3NjAwNA](http://player.youku.com/player.php/sid/XMzY1NzU3NjAwNA)==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>
  </div>

如果直接插入网站，会报警链接不安全，所以我们需要做一些处理。

VideoListComponent.html:6 ERROR Error: unsafe value used in a resource URL context (see http://g.co/ng/security#xss)

这儿方括号表示angular

用getEmbedUrl代码代替纯链接。

  <div style="position: relative;height: 0;padding-bottom: 56.25%">
    <iframe [src]='getEmbedUrl(item)' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></iframe>
  </div>

在video-list.component.ts添加下面代码

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

  videoList = [
    {
      name: 'Item 1',
      slug: 'item-1',
      embed: `XMzU5MjI4NTI3Mg`,
    },
    {
      name: 'Item 2',
      slug: 'item-2',
      embed: `XMzU5MjI4NTI3Mg`,
    },
    {
      name: 'Item 3',
      slug: 'item-3',
      embed: null,
    }
  ]

  getEmbedUrl(item){
    return this.sanitizer.bypassSecurityTrustResourceUrl('[http://player.youku.com/player.php/sid/](http://player.youku.com/player.php/sid/)' + item.embed + '==/v.swf')
  }