আমি আমার কৌনিক 2 অ্যাপ্লিকেশনে একটি উপাদান টেম্পলেটে একটি ডিআইভির পটভূমি চিত্রটি সেট করতে চাই। তবে আমি আমার কনসোলে নিম্নলিখিত সতর্কতাটি পেয়ে যাচ্ছি এবং আমি পছন্দসই প্রভাব পাচ্ছি না ... অ্যাঙ্গুলার 2 এর সুরক্ষা বিধিনিষেধের কারণে গতিশীল সিএসএস ব্যাকগ্রাউন্ড চিত্রটি ব্লক করা হয়েছে বা আমার এইচটিএমএল টেমপ্লেটটি নষ্ট হয়ে গেছে কিনা তা সম্পর্কে আমি নিশ্চিত।
এটি আমার কনসোলে আমি সতর্কতাটি দেখছি (আমি আমার ইমগ url এতে পরিবর্তন করেছি /img/path/is/correct.png:
সতর্কতা: অনিরাপদ শৈলীর মান url স্যানিটাইজ করা (SafeValue অবশ্যই [সম্পত্তি] = বাইন্ডিং ব্যবহার করতে হবে: /img/path/is/correct.png (দেখুন http://g.co/ng/ সুরক্ষা #xss )) (দেখুন http: // g.co/ng/ সুরক্ষা#xss )।
জিনিসটি হ'ল আমি আমার টেম্পলেটটিতে DomSanitizationServiceইনজুলার 2 ব্যবহার করে যা সারণি করে তা স্যানিটাইজ করি । এখানে আমার এইচটিএমএলটি আমার টেম্পলেটটিতে রয়েছে:
<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>এই উপাদানটি এখানে ...
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;
}
}
}
}
}দয়া করে মনে রাখবেন যে আমি যখন [src] = "চিত্র" ব্যবহার করে কেবলমাত্র টেমপ্লেটের সাথে আবদ্ধ থাকি:
<div *ngIf="image">
<img [src]="image">
</div>এবং সমস্ত কিছু imageব্যবহার করে উত্তীর্ণ হয়েছে bypassSecurityTrustUrlযা ভালভাবে কাজ করেছে বলে মনে হচ্ছে ... কেউ কী দেখতে পাচ্ছে যে আমি কী ভুল করছি?