在Angular中设置iframe src时报错unsafe value used in a resource URL context解决方法

转载于 2019-12-20 16:56:40 发布 · 3k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/Neokekeke/article/details/78738906

Vue2 专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何在Ionic2和TypeScript项目中处理外部URL资源的安全限制，通过引入DomSanitizer并使用bypassSecurityTrustResourceUrl方法，实现对iframe等元素加载外部资源的安全信任。

转载自：https://blog.youkuaiyun.com/Neokekeke/article/details/78738906

网上找了很多资料：才发现是Ionic2和TypeScript中对外部url资源链接做了安全限制

1.在需要使用外部url链接的ts文件中，引入DomSanitizer类

import { DomSanitizer } from '@angular/platform-browser'; 
 
export class safeHtml {  
  safeUrl: any;
  constructor(private sanitizer: DomSanitizer) {}

  //2.在需要使用转换后的url地方加上
  getSafeUrl(url){
      this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url); 
  }

2. html页面中 (这里以iframe标签为例)

<iframe [src]="safeUrl" style="width: 100%; height: 100%; border: none"></iframe>