一、 上传本地图片显示发生了unsage
- iframe 的 src 属性是资源 URL 安全上下文，因为不可信源可以在用户不知情的情况下执行某些不安全的操作。
- DomSanitizer 安全URL脚本访问
- XSS ：是网站 Angular 2 如何保护我们免受 XSS 攻击 Angular 2 中默认将所有输入值视为不受信任。当我们通过 property，attribute，样式，类绑定或插值等方式，将一个值从模板中插入到DOM中时，Angular 2 会自帮我们清除和转义不受信任的值。我们来看一下具体示例： 报错：unsafe value used in a resource URL context
在Angular4中，通过input:file上传选择图片本地预览的时候，通过window.URL.createObjectURL获取的url赋值给image的src出现错误：
WARNING: sanitizing unsafe URL value 下面介绍一下解决方法： html代码： 1 2 <input type="file" (change)="fileChange($event)" > <img [src]="imgUrl" alt=""> 其中，change方法会在每次选择图片后调用，image的src必须通过属性绑定的形式，使用插值表达式同样会出错
import { Component, OnInit } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'
@Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit {
imgUrl;
constructor( private sanitizer: DomSanitizer ){}
ngOnInit() { }
fileChange(event){ let file = event.target.files[0]; let imgUrl = window.URL.createObjectURL(file); let sanitizerUrl = this.sanitizer.bypassSecurityTrustUrl(imgUrl);
this.imgUrl = sanitizerUrl;
} } 首先，引入DomSanitizer，然后在构造器里面注入， 最重要的就是把window.URL.createObjectURL生成的imgUrl通过santizer的bypassSecurityTrustUrl方法，将它转换成安全路径。 最后将生成的安全的url赋值给imgUrl，此时就没有问题了~ https://blog.csdn.net/Neokekeke/article/details/78739035
