警告:清理不安全的样式值 url
[英] WARNING: sanitizing unsafe style value url
本文介绍了警告:清理不安全的样式值 url的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在我的 Angular 2 应用程序的组件模板中设置 DIV 的背景图像.但是，我的控制台中不断收到以下警告，但没有得到预期的效果...我不确定动态 CSS 背景图像是否由于 Angular2 中的安全限制或我的 HTML 模板损坏而被阻止.
这是我在控制台中看到的警告(我已将 img url 更改为 /img/path/is/correct.png:
<块引用>
警告:清理不安全的样式值 url(SafeValue 必须使用 [property]=binding:/img/path/is/correct.png(参见 http://g.co/ng/security#xss))(参见 http://g.co/ng/security#xss).
问题是我确实使用 Angular2 中的 DomSanitizationService 清理注入到我的模板中的内容.这是我的模板中的 HTML:
<div><div 类=标题"*ngIf="图像"[style.background-image]="'url(' + image + ')'">
<div class="zone"><div><div><h1 [innerHTML]="header"></h1>
<div class="zone__content">＜p*ngFor="let contentSegment of content"[innerHTML]="contentSegment"></p>
这是组件...
导入{DomSanitizationService,安全HTML，安全网址，安全风格来自'@angular/platform-browser';@成分({选择器:'示例'，templateUrl: 'src/content/example.component.html'})导出类 CardComponent 实现 OnChanges {公共头文件:SafeHtml；公开内容:SafeHtml[];公众形象:SafeStyle；公共 isActive:boolean;public isExtended:boolean;构造函数(私有消毒:DomSanitizationService){}ngOnChanges():void {地图(这个.元素，这个)；功能映射(元素:卡片，实例:卡片组件):无效{如果(元素){instance.header = instance.sanitization.bypassSecurityTrustHtml(element.header);instance.content = _.map(instance.element.content, (input:string):SafeHtml => {返回 instance.sanitization.bypassSecurityTrustHtml(input);});如果(元素.图像){/* 这里是问题...我也使用了 bypassSecurityTrustUrl */instance.image = instance.sanitization.bypassSecurityTrustStyle(element.image);} 别的 {instance.image = null;}}}}}
请注意，当我刚刚使用 [src]="image" 绑定到模板时，例如:
<img [src]="图像">
和 image 是使用 bypassSecurityTrustUrl 传递的，一切似乎都运行良好......谁能看到我做错了什么?
解决方案
您必须将整个 url 语句包装在 bypassSecurityTrustStyle 中:
<div class="header" *ngIf="image" [style.background-image]="image"></div>
还有
this.image = this.sanitization.bypassSecurityTrustStyle(`url(${element.image})`);
否则它不被视为有效的样式属性
I want to set the background image of a DIV in a Component Template in my Angular 2 app. However I keep getting the following warning in my console and I don't get the desired effect... I am unsure if the dynamic CSS background image is being blocked due to security restrictions in Angular2 or if my HTML template is broken.
This is the warning I see in my console (I have changed my img url to /img/path/is/correct.png:
WARNING: sanitizing unsafe style value url(SafeValue must use [property]=binding: /img/path/is/correct.png (see http://g.co/ng/security#xss)) (see http://g.co/ng/security#xss).
The thing is I do sanitize what is injected into my template using the DomSanitizationService in Angular2. Here is my HTML that I have in my template:
<div>
<div>
<div class="header"
*ngIf="image"
[style.background-image]="'url(' + image + ')'">
</div>
<div class="zone">
<div>
<div>
<h1 [innerHTML]="header"></h1>
</div>
<div class="zone__content">
<p
*ngFor="let contentSegment of content"
[innerHTML]="contentSegment"></p>
</div>
</div>
</div>
</div>
</div>
Here is the component...
Import {
DomSanitizationService,
SafeHtml,
SafeUrl,
SafeStyle
} from '@angular/platform-browser';
@Component({
selector: 'example',
templateUrl: 'src/content/example.component.html'
})
export class CardComponent implements OnChanges {
public header:SafeHtml;
public content:SafeHtml[];
public image:SafeStyle;
public isActive:boolean;
public isExtended:boolean;
constructor(private sanitization:DomSanitizationService) {
}
ngOnChanges():void {
map(this.element, this);
function map(element:Card, instance:CardComponent):void {
if (element) {
instance.header = instance.sanitization.bypassSecurityTrustHtml(element.header);
instance.content = _.map(instance.element.content, (input:string):SafeHtml => {
return instance.sanitization.bypassSecurityTrustHtml(input);
});
if (element.image) {
/* Here is the problem... I have also used bypassSecurityTrustUrl */
instance.image = instance.sanitization.bypassSecurityTrustStyle(element.image);
} else {
instance.image = null;
}
}
}
}
}
Please note that when I just bound to the template using [src]="image", for example:
<div *ngIf="image">
<img [src]="image">
</div>
and image was passed using bypassSecurityTrustUrl everything seemed to work well... can anyone see what I am doing wrong?
解决方案
You have to wrap the entire url statement in the bypassSecurityTrustStyle:
<div class="header" *ngIf="image" [style.background-image]="image"></div>
And have
this.image = this.sanitization.bypassSecurityTrustStyle(`url(${element.image})`);
Otherwise it is not seen as a valid style property
这篇关于警告:清理不安全的样式值 url的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
