चेतावनी: असुरक्षित शैली मूल्य url को सैनिटाइज़ करना

Question

मैं अपने कोणीय 2 ऐप में एक घटक टेम्पलेट में एक डीआईवी की पृष्ठभूमि छवि सेट करना चाहता हूं। हालाँकि मुझे अपने कंसोल में निम्नलिखित चेतावनी मिलती रहती है और मुझे वांछित प्रभाव नहीं मिलता है ... मैं अनिश्चित हूं कि क्या एंगुलर 2 में सुरक्षा प्रतिबंधों के कारण डायनेमिक सीएसएस पृष्ठभूमि छवि अवरुद्ध हो रही है या यदि मेरा एचटीएमएल टेम्पलेट टूट गया है।

यह वह चेतावनी है जिसे मैं अपने कंसोल में देखता हूं (मैंने अपना img url बदल दिया है /img/path/is/correct.png:

चेतावनी: असुरक्षित शैली मान url (SafeValue का उपयोग करना आवश्यक है] [बंधन] = बाइंडिंग: /img/path/is/correct.png ( http://g.co/ng/security#xss देखें )) ( http: // देखें) g.co/ng/security#xss )।

बात यह है कि मैं DomSanitizationServiceAngular2 का उपयोग करते हुए अपने टेम्पलेट में क्या इंजेक्ट करता हूं । यहाँ मेरा HTML है जो मेरे टेम्पलेट में है:

<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] = "image" का उपयोग करके टेम्पलेट के लिए बाध्य होता हूं, तो:

<div *ngIf="image">
    <img [src]="image">
</div>

और सब कुछ अच्छी तरह से काम करने के लिए लग रहा imageथा पारित किया गया था bypassSecurityTrustUrl... क्या कोई देख सकता है कि मैं क्या गलत कर रहा हूं?

Comments

क्या आपको अपने प्रश्न का हल मिला। मेरे पास एक ही मुद्दा है और अभी भी एक समाधान खोजने की कोशिश कर रहा है। अग्रिम में धन्यवाद!

— एस.के.

Answer 1

आपको पूरा urlविवरण लपेटना होगा bypassSecurityTrustStyle:

<div class="header" *ngIf="image" [style.background-image]="image"></div>

और है

this.image = this.sanitization.bypassSecurityTrustStyle(`url(${element.image})`);

अन्यथा इसे वैध शैली की संपत्ति के रूप में नहीं देखा जाता है

Comments

पियरेडुक, पृष्ठभूमि-छवि आईएस के लिए ज्ञान के किसी भी शब्द को ऊपर के रूप में बायपास किया जाता है, लेकिन फिर एंगुलर 2 चुपचाप इसे अनदेखा करता है? मैं एक नया प्रश्न पोस्ट कर सकता हूं, लेकिन मुझे लगता है कि इसके उत्तर के लिए इसका काफी जर्मन है।

— डेविड फ़फ़र

@DavidPfeffer न्याय करना मुश्किल है जहाँ चीजें किसी भी कोड को देखे बिना गलत हो जाती हैं :) मैं नवीनतम कोणीय 2 में इस कोड का उपयोग करता हूं और यह अभी भी काम कर रहा है ..

— Poul Kruijt

मैं यह समझ गया। आपके द्वारा सैनिटाइजेशन को बायपास करने के बाद, यदि मान अमान्य है, तो Angular2 चुपचाप इसकी उपेक्षा करता है।

— डेविड फेफर

आपको चक्कर आना चाहिए और यह केवल स्वच्छता के साथ खिलवाड़ के बिना काम करेगा।

— yglodt

मेरे लिए Angular8 में काम किया। मुझे लगता है कि सफाई करना सबसे अच्छा है ... यह एक कारण से मौजूद है। @yglodt।

— सीन हॉल

Answer 2

इस का उपयोग करें <div [ngStyle]="{'background-image':'url('+imageUrl+')'}"></div>मेरे लिए समस्या हल हो गई।

Comments

सुरक्षित और सरल।

— केनमोर

अपनी तरह के शब्दों के लिए धन्यवाद @Kenmore। मुझे खुशी है कि मैं मदद कर सकता हूं। चीयर्स।

— iedia इबिकाडे

@ सैमी-रोजर्स गीक क्या मैं इमेज टैग में समान कोड लिख सकता हूं?

— अर्जुन

तुम मेरा दिन बचाओ!

— वाडईहैप

वाक्पटु। धन्यवाद।

— माइंडसेक्ट टीम

Answer 3

यदि रैखिक-ढाल के साथ पृष्ठभूमि छवि ( *ngFor)

राय:

<div [style.background-image]="getBackground(trendingEntity.img)" class="trending-content">
</div>

वर्ग:

import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';

constructor(private _sanitizer: DomSanitizer) {}

getBackground(image) {
    return this._sanitizer.bypassSecurityTrustStyle(`linear-gradient(rgba(29, 29, 29, 0), rgba(16, 16, 23, 0.5)), url(${image})`);
}

Comments

आपने मेरा दिन बचाया

— थमारैसेलवम

पूरी तरह से काम करता है :))

— अभिजीत श्रीवास्तव

@AbhijitSrivastava मैंने thumbnailMediumIcon = this.sanitizer.bypassSecurityTrustUrl(url ($ {थंबनेल}) )और लिखा [style.backgroundImage]="thumbnailMediumIcon"। आपने कौन से कोणीय संस्करण का उपयोग किया? मैंने बैकग्राउंड-इमेज की भी कोशिश की। क्या यह अभी भी काम कर रहा है? मैं अन्य दृष्टिकोण पसंद नहीं है?

— एमटीजेड

@ आभिजात श्रीवास्तव धन्यवाद! मेरी गलती, मैंने thumbnail

— MTZ

getBackgroundदृश्य के अंदर कॉल करने की अनुशंसा नहीं की जाती है , क्योंकि कोणीय को bypassSecurityTrustStyleप्रत्येक बार उस दृश्य को ताज़ा करना पड़ता है। Console.log अंदर जोड़ने है कि परीक्षण करने के लिए getBackgroundऔर आप उस समारोह प्रत्येक क्लिक करें या उपयोगकर्ता स्क्रॉल घटना पर कहा जाता है देखेंगे

— मार्सिन

Answer 4

Angular2 के लिए इस आसान पाइप की जाँच करें :

1. में SafePipeकोड, स्थानापन्न DomSanitizationServiceके साथDomSanitizer

2. SafePipeअगर आपके प्रदान करते हैंNgModule

3. <div [style.background-image]="'url(' + your_property + ')' | safe: 'style'"></div>

Answer 5

Https://angular.io/api/platform-browser/DomSanitizer पर डॉक्स के आधार पर , ऐसा करने का सही तरीका स्वच्छता का उपयोग करना प्रतीत होता है। कम से कम कोणीय 7 में (यह नहीं जानते कि यह पहले से बदल गया है)। यह मेरे लिए काम किया:

import { Component, OnInit, Input, SecurityContext } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

constructor(
    private sanitizer: DomSanitizer
) { }

this.sanitizer.sanitize(SecurityContext.STYLE, 'url(' + this.image + ')');

Re SecurityContext, https://angular.io/api/core/SecurityContext देखें । मूल रूप से यह सिर्फ इस दुश्मनी है:

enum SecurityContext {
  NONE: 0
  HTML: 1
  STYLE: 2
  SCRIPT: 3
  URL: 4
  RESOURCE_URL: 5
}

Comments

यह आज तक का जवाब है। इसे छोटा भी किया जा सकता है:this.sanitizer.bypassSecurityTrustStyle(`url('${this.image} ')`);

— ज़ाहमा

@Zahema मुझे विश्वास नहीं है कि प्रदान किए गए उत्तर के बराबर है। bypassSecurityTrustStyleसुरक्षा को नजरअंदाज करते हुए सुरक्षा को sanitize(SecurityContext.STYLE, style)मजबूत करता है। मैं sanitizeउचित के साथ उपयोग करने की सलाह दूंगा SecurityContext।

— ऑस्कर

@ ज़ेमा bypassSecurityTrustStyleएक ऐसी वस्तु लौटाता है जिसे एक्सेस नहीं किया जा सकता (कम से कम मैं ऐसा नहीं कर सकता था) [ngStyle]। sanitize(SecurityContext.STYLE, style)इसके बजाय एक सादे स्ट्रिंग देता है।

— अलेक्जेंडर फिंक

@ ऑस्कर मैं सहमत हूं लेकिन किसी कारण से यह हमेशा सभी परिदृश्यों में अपेक्षित रूप से काम नहीं करता है। bypassSecurityTrustStyleयह मूल रूप से क्रूर है।

— ज़हामा

Answer 6

मुझे एंगुलर 7. में इमेज टैग में डायनेमिक यूआरएल जोड़ने के दौरान भी यही मुद्दा मिला था। मैंने बहुत खोज की और इसका हल खोजा।

सबसे पहले, घटक फ़ाइल में कोड के नीचे लिखें।

constructor(private sanitizer: DomSanitizer) {}
public getSantizeUrl(url : string) {
    return this.sanitizer.bypassSecurityTrustUrl(url);
}

अब अपने HTML इमेज टैग में, आप इस तरह लिख सकते हैं।

<img class="image-holder" [src]=getSantizeUrl(item.imageUrl) />

आप अपनी आवश्यकता के अनुसार item.imageUrl के अनुसार लिख सकते हैं

मुझे इस साइट से एक संदर्भ मिला। गतिशील urls । आशा है कि यह समाधान आपकी मदद करेगा :)

Comments

यह छवियों के लिए काम करता है, लेकिन पृष्ठभूमि शैली के रूप में उपयोग करते हुए प्रश्न URL के बारे में था, जिसका यह उत्तर असंबंधित है

— Amirreza

Answer 7

केवल इस चेतावनी को मुद्रित करने के लिए एक खुला मुद्दा है अगर वास्तव में कुछ साफ किया गया था: https://github.com/angular/angular/pull/10272

जब यह चेतावनी मुद्रित की जाती है तो मैं विस्तार से नहीं पढ़ता जब कुछ भी साफ नहीं किया गया था।

Comments

उन लोगों के लिए जो यहां आ सकते हैं: उस मुद्दे को हल कर दिया गया है। यह केवल चेतावनी प्रिंट करता है यदि यह HTML को पवित्र करता है और हर समय नहीं।

— फ्लेमुसिडू

मैं जानना चाहता था कि क्या ऐसा करना गलत अभ्यास है? क्या मुझे यह चेतावनी नहीं देने की कोशिश करनी चाहिए?

— अमृत ​​15

जब आप इसे उपयोगकर्ता द्वारा प्रदान की गई सामग्री (जैसे इनपुट फ़ील्ड से पाठ या डेटाबेस या आपके द्वारा नियंत्रित अन्य स्रोतों से लोड की गई उपयोगकर्ता सामग्री) पर लागू करते हैं, तो आपको बहुत सतर्क होना चाहिए । इस तरह से आप कोणीय बताते हैं कि स्वाभाविक रूप से असुरक्षित सामग्री के रूप में व्यवहार किया जाना चाहिए। भरोसेमंद। यह स्थिर सामग्री के लिए उपयोग करने के लिए पूरी तरह से ठीक है, जिसे आप नियंत्रित करते हैं, जैसे कि स्थिरांक, पर्यावरण चर, निर्माण के समय से गुजरते हैं, मूल्यों की गणना केवल ऐसे सुरक्षित मूल्यों से की जाती है।

— गुंटर ज़ोचबॉकर

Answer 8

किसी के लिए जो पहले से ही चेतावनी दे रहे हैं कि आप क्या सुझाव देते हैं, कोणीय 5 में अपग्रेड करने से पहले, मुझे टेम्प्लेट में उनका उपयोग SafeStyleकरने stringसे पहले अपने प्रकारों को मैप करना होगा। कोणीय 5 के बाद, अब ऐसा नहीं है। image: SafeStyleइसके बदले मुझे अपने मॉडल बदलने पड़े image: string। मैं पहले से ही [style.background-image]संपत्ति के बंधन का उपयोग कर रहा था और पूरे यूआरएल पर सुरक्षा को दरकिनार कर रहा था ।

आशा है कि यह किसी की मदद करता है।

Answer 9

चूंकि कोणीय एक समर्पित सैनिटाइज़िंग लाइब्रेरी नहीं है, इसलिए यह किसी भी जोखिम को नहीं लेने के लिए संदिग्ध सामग्री के प्रति अति उत्साही है। आप एक समर्पित पुस्तकालय के लिए सैनिटाइजिंग को सौंप सकते हैं, उदाहरण के लिए - DOMPurify। यहाँ एक रैपर लाइब्रेरी है जिसे मैंने आसानी से Angular के साथ DOMPurify का उपयोग करने के लिए बनाया है।

https://github.com/TinkoffCreditSystems/ng-dompurify

यह HTML को घोषित रूप से पवित्र करने के लिए एक पाइप है:

<div [innerHtml]="value | dompurify"></div>

एक बात ध्यान में रखना है कि DOMPurify HTML / SVG को सैनिटाइज़ करने के लिए बहुत अच्छा है, लेकिन CSS नहीं। तो आप CSS को संभालने के लिए Angular के CSS sanitizer को प्रोवाइडर कर सकते हैं:

import {NgModule, ɵ_sanitizeStyle} from '@angular/core';
import {SANITIZE_STYLE} from '@tinkoff/ng-dompurify';

@NgModule({
    // ...
    providers: [
        {
            provide: SANITIZE_STYLE,
            useValue: ɵ_sanitizeStyle,
        },
    ],
    // ...
})
export class AppModule {}

यह आंतरिक - हेंस ɵउपसर्ग है, लेकिन यह है कि कैसे कोणीय टीम अपने स्वयं के संकुल के साथ-साथ वैसे भी इसका उपयोग करती है।

Answer 10

मेरे मामले में, मुझे डिस्प्ले कंपोनेंट मिलने से पहले इमेज URL मिल गया और इसे बैकग्राउंड इमेज के रूप में उपयोग करना चाहते हैं ताकि उस URL का उपयोग करने के लिए मुझे Angular को बताना पड़े कि यह सुरक्षित है और इसका उपयोग किया जा सकता है।

.Ts फ़ाइल

userImage: SafeStyle;
ngOnInit(){
    this.userImage = this.sanitizer.bypassSecurityTrustStyle('url(' + sessionStorage.getItem("IMAGE") + ')');
}

.Html फ़ाइल में

<div mat-card-avatar class="nav-header-image" [style.background-image]="userImage"></div>

Comments

कृपया इसे समझाने के लिए अपने उत्तर को संपादित करें और ध्यान दें कि यह किसी भी मौजूदा की तुलना में बेहतर उत्तर क्यों है।

— ड्रैगन्थोउट्स