109

नवीनतम Angular 2 रिलीज़ उम्मीदवार के उन्नयन के बाद से, मेरे imgटैग:

<img class='photo-img' [hidden]="!showPhoto1" src='{{theMediaItem.photoURL1}}'>

ब्राउज़र त्रुटि फेंक रहे हैं:

मूल अपवाद: त्रुटि: संसाधन URL संदर्भ में असुरक्षित मान का उपयोग किया जाता है

Url का मान है:

http://veeu-images.s3.amazonaws.com/media/userphotos/116_1464645173408_cdv_photo_007.jpg

संपादित करें:

मैंने अन्य समाधान में किए गए सुझाव की कोशिश की है कि यह प्रश्न डुप्लिकेट माना जाता है, लेकिन मुझे वही त्रुटि मिल रही है।

मैंने नियंत्रक के लिए निम्न कोड जोड़ा है:

import {DomSanitizationService} from '@angular/platform-browser';

@Component({
  templateUrl: 'build/pages/veeu/veeu.html'
})
export class VeeUPage {
  static get parameters() {
    return [[NavController], [App], [MenuController], [DomSanitizationService]];
  }

  constructor(nav, app, menu, sanitizer) {

    this.app = app;
    this.nav = nav;
    this.menu = menu;
    this.sanitizer = sanitizer;

    this.theMediaItem.photoURL1 = this.sanitizer.bypassSecurityTrustUrl(this.mediaItems[1].url);
  }

मुझे अभी भी वही त्रुटि संदेश मिल रहा है।

EDIT2:

मैंने html को भी बदल दिया है:

<img class='photo-img' [hidden]="!showPhoto1" [src]='theMediaItem.photoURL1'>

मुझे अब भी वही त्रुटि संदेश मिलता है

angular

— बिल नोबल
स्रोत

मुझे इस बात पर स्पष्ट नहीं है कि मुझे क्या बदलना चाहिए। क्या मैं src = "{{something.else}}" को [src] = "something.else" में बदल दूं?

— बिल नोबल

1

बिल्कुल सही:[src]='theMediaItem.photoURL1'

— गुंटर जोचबॉयर

हां मैंने कोशिश की और मुझे वही त्रुटि संदेश मिला।

— बिल नोबेल

क्या Angular2 संस्करण आप उपयोग कर रहे हैं?

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

मुझे लगता है कि मैं 2.0.0-beta.15 का उपयोग कर रहा हूं (मैं आयनिक का उपयोग कर रहा हूं और पूरी तरह से जांच करने के लिए निश्चित नहीं हूं) जिस तरह से मैंने कोड जोड़ा है उसके लिए माफी मांगना मैं प्रोटोकॉल पर स्पष्ट नहीं हूं।

— बिल

95

मैं rc.4 का उपयोग कर रहा हूं और यह विधि ES2015 (ES6) के लिए काम करती है:

import {DomSanitizationService} from '@angular/platform-browser';

@Component({
  templateUrl: 'build/pages/veeu/veeu.html'
})
export class VeeUPage {
  static get parameters() {
    return [NavController, App, MenuController, DomSanitizationService];
  }

  constructor(nav, app, menu, sanitizer) {

    this.app = app;
    this.nav = nav;
    this.menu = menu;
    this.sanitizer = sanitizer;    
  }

  photoURL() {
    return this.sanitizer.bypassSecurityTrustUrl(this.mediaItems[1].url);
  }
}

HTML में:

<iframe [src]='photoURL()' width="640" height="360" frameborder="0"
    webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>

किसी फ़ंक्शन का उपयोग करने से यह सुनिश्चित होगा कि आपके द्वारा इसे पवित्रा करने के बाद मान नहीं बदलता है। यह भी ध्यान रखें कि आपके द्वारा उपयोग किया जाने वाला सैनिटाइजेशन फ़ंक्शन संदर्भ पर निर्भर करता है।

छवियों के लिए, bypassSecurityTrustUrlकाम करेगा , लेकिन अन्य उपयोगों के लिए आपको प्रलेखन का उल्लेख करना होगा :

https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html

— elkelk
स्रोत

3

" Rc4 " (और बाद में Helzgate RC3 को संदर्भित करता है ) क्या है? मेरा मतलब है, मैं इसे गीथब संस्करण में कैसे मैप करूं? गीथूब और एनपीएम दोनों में मुझे केवल 2.4.4 या 2.4.5 जैसे संस्करण दिखाई देते हैं। मैं वर्तमान में 2.4.4 पर हूं और ऐसा लगता है कि DOMSanitizer बदल गया है; इसलिए यह वह आयात है जिसकी आपको आवश्यकता है:import {DomSanitizer} from '@angular/platform-browser';

— लाल मटर

ओह, मुझे लगता कोणीय के GitHub शाखाओं के पास भेजेगा 2.4.xउदाहरण के लिए, लेकिन GitHub टैग की तरह, उम्मीदवारों को रिहा करने का उल्लेख करेंगे 2.0.0-rc3। और मैं आरसी 3 में देख सकता हूं , उदाहरण के लिए वर्ग का नाम अभी भी था DomSanitizationService।

— रेड मटर

1

this.sanitizer.bypassSecurityTrustResourceUrl(url)वीडियो के लिए

— प्रयागपाद

इस का उपयोग करने से पहले प्रलेखन को ध्यान से पढ़ें: bypassSecurityTrustUrl () चेतावनी: अविश्वसनीय उपयोगकर्ता डेटा के साथ इस पद्धति को कॉल करना आपके आवेदन को XSS सुरक्षा जोखिमों के लिए उजागर करता है! मुझे लगता है कि ऐसा करना सुरक्षित नहीं है, जब तक कि आप वास्तव में छवि स्रोत पर भरोसा करने के बारे में निश्चित नहीं हैं। यहां तक कि अगर यह एक सर्वर से आता है, अगर यह एक उपयोगकर्ता द्वारा अपलोड किया गया था, तो इस तरह के समाधान का दोहन करना संभव होगा।

— विल्ट

144

पाइप

// Angular
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';

/**
 * Sanitize HTML
 */
@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {
  /**
   * Pipe Constructor
   *
   * @param _sanitizer: DomSanitezer
   */
  // tslint:disable-next-line
  constructor(protected _sanitizer: DomSanitizer) {
  }

  /**
   * Transform
   *
   * @param value: string
   * @param type: string
   */
  transform(value: string, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
      case 'html':
        return this._sanitizer.bypassSecurityTrustHtml(value);
      case 'style':
        return this._sanitizer.bypassSecurityTrustStyle(value);
      case 'script':
        return this._sanitizer.bypassSecurityTrustScript(value);
      case 'url':
        return this._sanitizer.bypassSecurityTrustUrl(value);
      case 'resourceUrl':
        return this._sanitizer.bypassSecurityTrustResourceUrl(value);
      default:
        return this._sanitizer.bypassSecurityTrustHtml(value);
    }
  }
}

खाका

{{ data.url | safe:'url' }}

बस!

नोट: आपको इसकी आवश्यकता नहीं होनी चाहिए लेकिन यहां पाइप का घटक उपयोग है

  // Public properties
  itsSafe: SafeHtml;

  // Private properties
  private safePipe: SafePipe = new SafePipe(this.domSanitizer);

  /**
   * Component constructor
   *
   * @param safePipe: SafeHtml
   * @param domSanitizer: DomSanitizer
   */
  constructor(private safePipe: SafePipe, private domSanitizer: DomSanitizer) {
  }

  /**
   * On init
   */
  ngOnInit(): void {
    this.itsSafe = this.safePipe.transform('<h1>Hi</h1>', 'html');
  }

— Helzgate
स्रोत

33

इसे ठीक करने का सबसे सुरुचिपूर्ण तरीका: पाइप का उपयोग करें। यहाँ उदाहरण (मेरा ब्लॉग) है। तो आप बस url | safeसुरक्षा को बायपास करने के लिए पाइप का उपयोग कर सकते हैं ।

<iframe [src]="url | safe"></iframe>

विवरण के लिए npm पर प्रलेखन देखें: https://www.npmjs.com/package/safe-pipe

— फ़िलिप मल्लिक
स्रोत

24

इसे ठीक करने के लिए सुरक्षित पाइप का उपयोग करें।

अगर कोई नहीं है तो एक सुरक्षित पाइप बनाएं।

एनजी जीसी पाइप सुरक्षित
app.module.ts में सुरक्षित पाइप जोड़ें

घोषणाएँ: [SafePipe]
अपने टीएस में सुरक्षित पाइप की घोषणा करें

URL को सुरक्षित रूप से एक्सेस करने के लिए DOM सैनिटाइज़र और सेफ पाइप आयात करें

import { Pipe, PipeTransform} from '@angular/core';
import { DomSanitizer } from "@angular/platform-browser";

@Pipe({ name: 'safe' })

export class SafePipe implements PipeTransform {

constructor(private sanitizer: DomSanitizer) { }
transform(url) {
 return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

- src url के साथ सुरक्षित जोड़ें

<iframe width="900" height="500" [src]="link | safe"/>

— sjsj15
स्रोत

2

महान! एक बात, क्या यह 'एनजी जीसी पाइप सेफ' के बजाय 'एनजी जी पाइप सेफ' नहीं होना चाहिए, क्या स्पष्ट रूप से काम नहीं करेगा?

— जैकब-जान मोसलमैन

15

या तो आप दृश्य को सैनिटाइज़र को उजागर कर सकते हैं, या एक विधि को उजागर कर सकते हैं जो कॉल को बायपास करता है।

<img class='photo-img' [hidden]="!showPhoto1" 
    [src]='sanitizer.bypassSecurityTrustUrl(theMediaItem.photoURL1)'>

— नगुयệन वि ट्ट तुệंग
स्रोत

2

कोणीय सभी मानों को डिफ़ॉल्ट रूप से अविश्वसनीय मानता है। जब प्रॉपर्टी, विशेषता, शैली, वर्ग बाइंडिंग, या प्रक्षेप के माध्यम से एक वैल्यू को टेम्प्लेट से DOM में डाला जाता है, तो कोणीय मानों को त्याग देता है और बच जाता है।

इसलिए यदि आप DOM को सीधे जोड़ रहे हैं और सामग्री सम्मिलित कर रहे हैं, तो आपको इसे साफ करने की आवश्यकता है अन्यथा कोणीय त्रुटियों के माध्यम से होगा।

मैं पाइप बनाया है SanitizeUrlPipe इस के लिए

import { PipeTransform, Pipe } from "@angular/core";
import { DomSanitizer, SafeHtml } from "@angular/platform-browser";

@Pipe({
    name: "sanitizeUrl"
})
export class SanitizeUrlPipe implements PipeTransform {

    constructor(private _sanitizer: DomSanitizer) { }

    transform(v: string): SafeHtml {
        return this._sanitizer.bypassSecurityTrustResourceUrl(v);
    }
}

और यह है कि आप कैसे उपयोग कर सकते हैं

<iframe [src]="url | sanitizeUrl" width="100%" height="500px"></iframe>

यदि आप HTML जोड़ना चाहते हैं, तो SanitizeHtmlPipe मदद कर सकता है

import { PipeTransform, Pipe } from "@angular/core";
import { DomSanitizer, SafeHtml } from "@angular/platform-browser";

@Pipe({
    name: "sanitizeHtml"
})
export class SanitizeHtmlPipe implements PipeTransform {

    constructor(private _sanitizer: DomSanitizer) { }

    transform(v: string): SafeHtml {
        return this._sanitizer.bypassSecurityTrustHtml(v);
    }
}

यहाँ कोणीय सुरक्षा के बारे में अधिक पढ़ें ।

— सुनील गर्ग
स्रोत

1

मैं आमतौर पर safe pipeनिम्नलिखित के रूप में अलग पुन: प्रयोज्य घटक जोड़ता हूं

# Add Safe Pipe

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({name: 'mySafe'})
export class SafePipe implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) {
    }

    public transform(url) {
        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }
}

# then create shared pipe module as following 

import { NgModule } from '@angular/core'; 
import { SafePipe } from './safe.pipe';
@NgModule({
    declarations: [
        SafePipe
    ],
    exports: [
        SafePipe
    ]
})
export class SharedPipesModule {
}

# import shared pipe module in your native module

@NgModule({
    declarations: [],
    imports: [
        SharedPipesModule,
    ],
})
export class SupportModule {
}

<!-------------------
call your url (`trustedUrl` for me) and add `mySafe` as defined in Safe Pipe
---------------->
<div class="container-fluid" *ngIf="trustedUrl">
    <iframe [src]="trustedUrl | mySafe" align="middle" width="100%" height="800" frameborder="0"></iframe>
</div>

— जानकी
स्रोत

0

import {DomSanitizationService} from '@angular/platform-browser';
@Component({
 templateUrl: 'build/pages/veeu/veeu.html'
 })
  export class VeeUPage {
     trustedURL:any;
      static get parameters() {
               return [NavController, App, MenuController, 
              DomSanitizationService];
        }
      constructor(nav, app, menu, sanitizer) {
        this.app = app;
        this.nav = nav;
        this.menu = menu;
        this.sanitizer = sanitizer;  
        this.trustedURL  = sanitizer.bypassSecurityTrustUrl(this.mediaItems[1].url);
        } 
 }



 <iframe [src]='trustedURL' width="640" height="360" frameborder="0"
   webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>


User property binding instead of function.

— अणि
स्रोत

0

unsafe urlत्रुटि से बचने के लिए पृष्ठभूमि छवि के रूप में छवि को सेट करना संभव है :

<div [style.backgroundImage]="'url(' + imageUrl + ')'" class="show-image"></div>

सीएसएस:

.show-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-size: cover;        
}

— आगे आना
स्रोत

<img>: संसाधन URL संदर्भ में प्रयुक्त असुरक्षित मान

पाइप

खाका

बस!