कैसे निर्धारित करें <iframe src = "..."> बिना exception असुरक्षित मान ’अपवाद के?

164

मैं एक ट्यूटोरियल पर काम कर रहा हूँ जिसमें एक iframe srcविशेषता शामिल है:

<iframe width="100%" height="300" src="{{video.url}}"></iframe>

यह एक अपवाद फेंकता है:

Error: unsafe value used in a resource URL context
at DomSanitizationServiceImpl.sanitize...

मैंने पहले से ही [src]बिना किसी सफलता के साथ बाइंडिंग का उपयोग करने की कोशिश की है ।

angular

— टीजे।
स्रोत

344

अद्यतन v8

नीचे उत्तर काम करते हैं लेकिन XSS सुरक्षा जोखिमों के लिए आपके आवेदन को उजागर करते हैं! । उपयोग करने के बजाय this.sanitizer.bypassSecurityTrustResourceUrl(url), इसका उपयोग करने की सिफारिश की जाती हैthis.sanitizer.sanitize(SecurityContext.URL, url)

अपडेट करें

के लिए RC.6 ^ संस्करण उपयोग DomSanitizer

Plunker

और एक अच्छा विकल्प इसके लिए शुद्ध पाइप का उपयोग कर रहा है:

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);
  }
}

AppModule SafePipeके declarationsसरणी में अपना नया जोड़ना याद रखें । ( प्रलेखन पर देखा के रूप में )

@NgModule({
   declarations : [
     ...
     SafePipe
   ],
})

एचटीएमएल

<iframe width="100%" height="300" [src]="url | safe"></iframe>

Plunker

यदि आप embedटैग का उपयोग करते हैं तो यह आपके लिए दिलचस्प हो सकता है:

कैसे angular2 rc.6 के साथ एम्बेड HTML टैग पर sanitize करें जो pdf प्रदर्शित करता है

पुराना संस्करण RC.5

आप DomSanitizationServiceइस तरह से लाभ उठा सकते हैं :

export class YourComponent {
  url: SafeResourceUrl;
  constructor(sanitizer: DomSanitizationService) {
    this.url = sanitizer.bypassSecurityTrustResourceUrl('your url');
  }
}

और फिर urlअपने टेम्पलेट में बांधें :

<iframe width="100%" height="300" [src]="url"></iframe>

निम्नलिखित आयात जोड़ना न भूलें:

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

प्लंकर का नमूना

— yurzui
स्रोत

1

@FugueWeb ऐसा इसलिए है क्योंकि आयनिक 2 आज कोणीय RC4 का उपयोग कर रहा है। github.com/driftyco/ionic/blob/master/…

— yurzui

2

मैं Ionic2 का उपयोग कर रहा हूं। मैं एक पाइप की घोषणा करता हूं

Pipe({ name: 'safe' }) export class SafePipe implements PipeTransform {   constructor(private sanitizer: DomSanitizer) {}   transform(url): any { 	return this.sanitizer.bypassSecurityTrustResourceUrl(url);   }    }

और टेम्पलेट में कहता हूं <iframe width="100%" height="315" src="{{url}} | safe" frameborder="0" allowfullscreen></iframe>। लेकिन यह त्रुटि 'असुरक्षित मान' के साथ काम नहीं करता है। कृपया मदद करें

— Insane Rose

1

@ आइनेन रोज मुझे लगता है कि यह [src]="url | safe"सिर्फ ब्रैकेट को हटा देना चाहिए

— yurzui

7

@yurzui I ने अद्यतन v8 के लिए आपकी सिफारिश का पालन किया। हालाँकि जब मैं उपयोग कर this.sanitizer.sanitize(SecurityContext.URL, url)रहा हूँ तो मुझे एक त्रुटि मिल रही है "त्रुटि त्रुटि: संसाधन URL संदर्भ में उपयोग किया गया असुरक्षित मान" II इसे this.sanitizer.bypassSecurityTrustResourceUrl(url)ठीक काम करने के लिए बदल देता है। कोई भी विचार क्या गलत हो सकता है?

— कोस्मोनफ़ट

2

this.sanitizer.sanitize(SecurityContext.URL, url)काम नहीं करता है और this.sanitizer.bypassSecurityTrustResourceUrl(url)काम करता है लेकिन स्थैतिक कोड विश्लेषण में उच्च सुरक्षा भेद्यता मुद्दा उठाता है, जो मुझे इसे उत्पादन में जाने से रोकता है। इसे ठीक करने के लिए एक रास्ता चाहिए

— cjkumaresh

28

यह एक मेरे लिए काम करता है।

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

@Component({
    moduleId: module.id,
    selector: 'player',
    templateUrl: './player.component.html',
    styleUrls:['./player.component.scss'],
    
})
export class PlayerComponent implements OnInit{
    @Input()
    id:string; 
    url: SafeResourceUrl;
    constructor (public sanitizer:DomSanitizer) {
    }
    ngOnInit() {
        this.url = this.sanitizer.bypassSecurityTrustResourceUrl(this.id);      
    }
}

— vikvincer
स्रोत

यह दृष्टिकोण मेरे लिए काम करता है क्योंकि मैं 1 जगह पर इसका उपयोग करता हूं। अन्यथा पाइप दृष्टिकोण बेहतर है।

— नारेक टुटीशियन

@Pang यह कैसे काम करता है? मेरे पास वही मुद्दा है जो मैं अपने पैरामीटर को url में जोड़ना चाहता हूं मैं इन कोड का उपयोग कर रहा हूं "@Input () पैरामीटरForFB: संख्या = this.selectedStudent.schoolId url: string =" design.mydeentsents.com/jq-3d-flip-book /index.html?id=$ {पैरामीटरForFB} "; urlSafe: SafeResourceUrl;" लेकिन पैरामीटर में फेस इशू काम नहीं कर रहा है।

— अर्जुन वाल्मीकि

15

यह मुझे कोणीय 5.2.0 में काम करता है

sarasa.Component.ts

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

@Component({
  selector: 'app-sarasa',
  templateUrl: './sarasa.component.html',
  styleUrls: ['./sarasa.component.scss']
})

export class Sarasa implements OnInit {
  @Input()
  url: string = "https://www.mmlpqtpkasjdashdjahd.com";
  urlSafe: SafeResourceUrl;

  constructor(public sanitizer: DomSanitizer) { }

  ngOnInit() {
    this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
  }

}

sarasa.Component.html

<iframe width="100%" height="100%" frameBorder="0" [src]="urlSafe"></iframe>

बस आज के लिए इतना ही!!!

— Lrodriguez84
स्रोत

7

constructor(
 public sanitizer: DomSanitizer, ) {

 }

मैं 4 घंटे से संघर्ष कर रहा था। समस्या img टैग में थी। जब आप वर्ग ब्रैकेट का उपयोग 'src' पूर्व: [src] के लिए करते हैं। आप इस कोणीय अभिव्यक्ति {{}} का उपयोग नहीं कर सकते। आप बस नीचे दिए गए ऑब्जेक्ट उदाहरण से सीधे देते हैं। यदि आप कोणीय अभिव्यक्ति {{}} देते हैं। आपको प्रक्षेप त्रुटि मिलेगी।

पहले मैंने देशों को पुनरावृत्त करने के लिए ngFor का उपयोग किया
```
*ngFor="let country of countries"
```
दूसरा आपने इसे img टैग में डाला है। यह बात है।
```
<img [src]="sanitizer.bypassSecurityTrustResourceUrl(country.flag)"
height="20" width="20" alt=""/>
```

— कुमारसन पेरुमल
स्रोत

ध्यान रखें कि HTML के अंदर फंक्शन कॉल डालना एक बुरा विचार है क्योंकि इसे कहा जाता है कि हर समय ChangeDetector परिवर्तनों की जांच करेगा।

— karoluS

1

मैं इस मुद्दे में भी भाग गया, लेकिन अपने कोणीय मॉड्यूल में एक सुरक्षित पाइप का उपयोग करने के लिए, मैंने सुरक्षित-पाइप एनपीएम पैकेज स्थापित किया, जिसे आप यहां पा सकते हैं । FYI करें, यह Angular 9.1.3 में काम करता है, मैंने Angular के किसी भी अन्य संस्करण में इसकी कोशिश नहीं की है। यहाँ आप इसे चरण दर चरण कैसे जोड़ते हैं:

पैकेज स्थापित करें npm के माध्यम से सुरक्षित-पाइप स्थापित करें या यार्न सुरक्षित-पाइप जोड़ें। यह पैकेज.जन फ़ाइल में आपकी निर्भरता में इसका एक संदर्भ संग्रहीत करेगा, जो आपको पहले से ही एक नया कोणीय प्रोजेक्ट शुरू करने से होना चाहिए।
SafePipeModule मॉड्यूल को अपनी Angular मॉड्यूल फ़ाइल में NgModule.imports में इस तरह जोड़ें:
```
import { SafePipeModule } from 'safe-pipe';

@NgModule({
    imports: [ SafePipeModule ]
})
export class AppModule { }
```
इस तरह से कोणीय घटक के लिए टेम्पलेट में एक तत्व के लिए सुरक्षित पाइप जोड़ें जो आप अपने NgModule में आयात कर रहे हैं:

<element [property]="value | safe: sanitizationType"></element>

HTML तत्व में सेफपाइप के कुछ विशिष्ट उदाहरण यहां दिए गए हैं:

<div [style.background-image]="'url(' + pictureUrl + ')' | safe: 'style'" class="pic bg-pic"></div>
<img [src]="pictureUrl | safe: 'url'" class="pic" alt="Logo">
<iframe [src]="catVideoEmbed | safe: 'resourceUrl'" width="640" height="390"></iframe>
<pre [innerHTML]="htmlContent | safe: 'html'"></pre>

— LRitter
स्रोत

-1

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

# 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>

— जानकी
स्रोत

-8

बधाई! ¨ ^ ^ मेरे पास आपके लिए एक आसान और कुशल समाधान है, हाँ!

<iframe width="100%" height="300" [attr.src]="video.url"></iframe

[attr.src] src "video.url" के बजाय और {{video.url}} नहीं

महान ;)

— Smaillns
स्रोत

5

यह स्ट्रिंग मानों के लिए कोई अंतर नहीं करता है।

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

1

यह काम नहीं करता है। त्रुटि संदेश प्राप्त करनाunsafe value used in a resource URL context

— डेरेक लियांग

तो, आप html5 वीडियो टैग का उपयोग कर सकते हैं, लेकिन यदि आप iframe (कई कारणों से) का उपयोग करने के लिए जोर देते हैं, तो अन्य समाधान देखें जो DOMSanitizationService का उपयोग करते हैं ..

— Smaillns

इसलिए यदि आप 'वीडियो' टैग का उपयोग कर रहे हैं, तो यह

<video>               <source [src]=video.url  type="video/mp4" />                Browser not supported             </video>

वास्तव में इस तरह होगा , आप इसे दस्तावेज़ों को निष्क्रिय करने के लिए भी उपयोग कर सकते हैं .. यदि आपको वीडियो टैग का उपयोग करते समय कोई परेशानी है, तो मैं यहाँ हूं;)

— Smaillns