Tôi muốn đặt hình nền của DIV trong Mẫu thành phần trong ứng dụng Angular 2 của mình. Tuy nhiên, tôi tiếp tục nhận được cảnh báo sau trong bảng điều khiển của mình và tôi không nhận được hiệu quả mong muốn ... Tôi không chắc liệu hình nền CSS động có đang bị chặn do các hạn chế bảo mật trong Angular2 hay không hoặc nếu mẫu HTML của tôi bị hỏng.
Đây là cảnh báo tôi thấy trong bảng điều khiển của mình (Tôi đã thay đổi url img của mình thành /img/path/is/correct.png:
CẢNH BÁO: khử trùng url giá trị kiểu không an toàn (SafeValue phải sử dụng [property] = binding: /img/path/is/correct.png (xem http://g.co/ng/security#xss )) (xem http: // g.co/ng/security#xss ).
Vấn đề là tôi làm vệ sinh những gì được tiêm vào mẫu của tôi bằng cách sử dụng DomSanitizationServicetrong Angular2. Đây là HTML của tôi mà tôi có trong mẫu của mình:
<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>Đây là thành phần ...
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;
}
}
}
}
}Xin lưu ý rằng khi tôi chỉ liên kết với mẫu bằng [src] = "image", ví dụ:
<div *ngIf="image">
<img [src]="image">
</div>và imageđã được thông qua bằng cách sử dụng bypassSecurityTrustUrlmọi thứ dường như hoạt động tốt ... bất cứ ai có thể thấy những gì tôi đang làm sai?