কীভাবে if অনিরাপদ মান` ব্যতিক্রম ব্যতীত <iframe src = "…"> সেট করবেন?

Question

আমি একটি iframe srcবৈশিষ্ট্যের সেটিং জড়িত একটি টিউটোরিয়ালটিতে কাজ করছি :

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

এটি একটি ব্যতিক্রম ছোঁড়ে:

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

আমি ইতিমধ্যে [src]কোন সাফল্যের সাথে বাইন্ডিং ব্যবহার করার চেষ্টা করেছি ।

Answer 1

আপডেট ভি 8

নীচে উত্তরগুলি কাজ করে তবে আপনার আবেদনটি এক্সএসএস সুরক্ষা ঝুঁকিতে প্রকাশ করে! । পরিবর্তে ব্যবহার করার পরিবর্তে 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);
  }
} 

আপনার নতুন অ্যাড মনে রাখবেন SafePipeথেকে declarationsAppModule অ্যারে। ( ডকুমেন্টেশনে যেমন দেখা যায় )

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

এইচটিএমএল

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

Plunker

আপনি যদি embedট্যাগ ব্যবহার করেন তবে এটি আপনার জন্য আকর্ষণীয় হতে পারে:

• কিভাবে কৌনিক 2 আরসি 6 দিয়ে এমডি এমডি এইচটিএমএল ট্যাগে স্যানিটাইজ অক্ষম করে যা পিডিএফ প্রদর্শন করে

---

পুরানো সংস্করণ আরসি .৫

আপনি এর 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';

প্লাঙ্কার নমুনা

Comments

@ ফিউগওয়েব এর কারণ ionic2 আজ কৌনিক আরসি 4 ব্যবহার করছে। github.com/driftyco/ionic/blob/master/…

— yurzui

আমি আয়নিক 2 ব্যবহার করছি। আমি একটি পাইপ ঘোষণা করি 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>। তবে ত্রুটিটি 'অনিরাপদ মান' দিয়ে কাজ করে না। দয়া করে সহায়তা করুন

— উন্মাদ গোলাপ

@ ইনসান রোজ আমি অনুমান করি এটি [src]="url | safe"ঠিক বন্ধনী অপসারণ করা উচিত

— ইউরোজুই

@Yurzui আমি আপডেট করা v8 এর জন্য আপনার প্রস্তাবনা অনুসরণ করেছি। তবে আমি যখন ব্যবহার this.sanitizer.sanitize(SecurityContext.URL, url)করি তখন আমি একটি ত্রুটি পাচ্ছি "এররর ত্রুটি: একটি উত্সের URL প্রসঙ্গে ব্যবহৃত অনিরাপদ মান" II এটি this.sanitizer.bypassSecurityTrustResourceUrl(url)সূক্ষ্মভাবে কাজ করে। কোন ধারণা কি ভুল হতে পারে?

— Kosmonaft

this.sanitizer.sanitize(SecurityContext.URL, url)কাজ করে না এবং this.sanitizer.bypassSecurityTrustResourceUrl(url)কাজ করে না তবে স্থিতিশীল কোড বিশ্লেষণে উচ্চ সুরক্ষা দুর্বলতার বিষয়টি উত্থাপন করে, যা আমাকে এটিকে উত্পাদনে যেতে বাধা দেয়। এটি ঠিক করার জন্য একটি উপায় দরকার

— সিজকুমারেশ

Answer 2

এই আমার জন্য কাজ করে।

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

Comments

এই পদ্ধতিরটি আমার পক্ষে কাজ করে যেহেতু আমি এটি 1 জায়গায় ব্যবহার করি। অন্যথায় পাইপ পদ্ধতির ভাল হয়।

— নরেক টোটিকিয়ান

@ পাঙ্গ এটি কিভাবে কাজ করে? আমি একই সমস্যা আমি URL- আমার প্যারামিটার যোগ করার জন্য আমি এই কোড ": সংখ্যা = this.selectedStudent.schoolId URL টিতে = @Input () parameterForFB" ব্যবহার করছি চান designs.mydeievents.com/jq-3d-flip-book /index.html?id=$ {প্যারামিটার ফরএফবি } "; urlSafe: SafeResourceUrl;" তবে প্যারামিটারে মুখোমুখি সমস্যা নেই।

— অর্জুন ওয়ালমিকি

Answer 3

এটি আমাকে কৌনিক 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>

সকল লোককে ধন্যবাদ !!!

Answer 4

constructor(
 public sanitizer: DomSanitizer, ) {

 }

আমি ৪ ঘন্টা লড়াই করে যাচ্ছিলাম। সমস্যাটি আইএমজি ট্যাগে ছিল। যখন আপনি 'src' প্রাক্তন: [src] বর্গাকার বন্ধনী ব্যবহার করেন। আপনি এই কৌণিক অভিব্যক্তিটি can {}} ব্যবহার করতে পারবেন না} আপনি কেবল নীচে একটি বস্তু উদাহরণ থেকে সরাসরি দিতে। যদি আপনি কৌণিক অভিব্যক্তি দেন {{}}} আপনি interpolation ত্রুটি পাবেন।

1. দেশগুলির পুনরাবৃত্তি করার জন্য প্রথমে আমি এনজিফোর্ড ব্যবহার করেছি

   *ngFor="let country of countries"
   

2. দ্বিতীয়ত আপনি এটি ইমগ ট্যাগে রেখেছেন। এই হল.

   <img [src]="sanitizer.bypassSecurityTrustResourceUrl(country.flag)"
   height="20" width="20" alt=""/>
   

Comments

এইচটিএমএল-এর ভিতরে ফাংশন কল স্থাপন করা একটি খারাপ ধারণা বলে সচেতন থাকুন কারণ এটিকে সর্বদা বলা হবে চেঞ্জডেেক্টর পরিবর্তনের জন্য পরীক্ষা করবে।

— karoluS

Answer 5

আমি এই সমস্যাটিও ছড়িয়েছি, তবে আমার কৌণিক মডিউলটিতে নিরাপদ পাইপ ব্যবহার করার জন্য, আমি নিরাপদ পাইপ এনপিএম প্যাকেজটি ইনস্টল করেছি, যা আপনি এখানে সন্ধান করতে পারেন । এফওয়াইআই, এটি কৌণিক 9.1.3 এ কাজ করেছে, আমি কৌণিকের অন্য কোনও সংস্করণে এটি চেষ্টা করি নি। আপনি কীভাবে এটি ধাপে ধাপে যুক্ত করবেন তা এখানে:

1. এনপিএম ইনস্টল নিরাপদ পাইপ বা সুতা যোগ নিরাপদ পাইপ মাধ্যমে প্যাকেজ ইনস্টল করুন। এটি প্যাকেজ.জসন ফাইলটিতে আপনার নির্ভরতার মধ্যে এটির জন্য একটি রেফারেন্স সঞ্চয় করবে, যা আপনি ইতিমধ্যে একটি নতুন কৌণিক প্রকল্প শুরু করা উচিত।

2. আপনার কৌণিক মডিউল ফাইলে এনজিএমডুল.ইম্পোর্টগুলিতে সেফপাইপমডিউল মডিউল যুক্ত করুন:

   import { SafePipeModule } from 'safe-pipe';
   
   @NgModule({
       imports: [ SafePipeModule ]
   })
   export class AppModule { }
   
   

3. আপনি নিজের এনজিএমডুলিতে এইভাবে আমদানি করছেন এমন কৌণিক উপাদানটির জন্য টেমপ্লেটের কোনও উপাদানটিতে নিরাপদ পাইপ যুক্ত করুন:

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

4. এইচটিএমএল উপাদানটিতে সেফপাইপের কয়েকটি নির্দিষ্ট উদাহরণ এখানে রয়েছে:

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

Answer 6

আমি সাধারণত নিম্নলিখিত হিসাবে পৃথক নিরাপদ পাইপ পুনরায় ব্যবহারযোগ্য উপাদান যুক্ত করি

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

Answer 7

অভিনন্দন! ! You আপনার জন্য আমার একটি সহজ এবং দক্ষ সমাধান রয়েছে, হ্যাঁ!

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

[attr.src] src এর পরিবর্তে "video.url" এবং {{video.url} not নয়

দুর্দান্ত;)

Comments

স্ট্রিং মানগুলির জন্য এটি কোনও পার্থক্য করে না।

— গন্টার জ্যাচবাউর

এটা কাজ করে না। ত্রুটির বার্তা পাওয়াunsafe value used in a resource URL context

— ডেরেক লিয়াং

সুতরাং, আপনি এইচটিএমএল 5 ভিডিও ট্যাগ ব্যবহার করতে পারেন, তবে যদি আপনি আইফ্রেমে ব্যবহার করার জন্য জিদ করেন (বহু কারণে;) ডোমসনিটাইজেশন সার্ভিস ব্যবহার করা অন্যান্য সমাধান দেখুন ..

— স্মাইলনস

সুতরাং আপনি যদি 'ভিডিও' ট্যাগটি ব্যবহার করার সন্ধান করছেন তবে এটি <video> <source [src]=video.url type="video/mp4" /> Browser not supported </video> বাস্তবে এরকম হবে , আপনি নথিগুলিও ডেসপ্লে করতে অভ্যন্তরীণভাবে এটি ব্যবহার করতে পারেন .. ভিডিও ট্যাগ ব্যবহার করার সময় আপনার যদি কোনও সমস্যা হয় তবে আমি এখানে আছি;)

— স্মাইলস