<img>: কোনও রিসোর্স ইউআরএল প্রসঙ্গে অনিরাপদ মান ব্যবহৃত হয়েছে

Question

সর্বশেষতম কৌণিক 2 প্রকাশের প্রার্থীতে আপগ্রেড হওয়ার পরে, আমার imgট্যাগগুলি:

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

একটি ব্রাউজার ত্রুটি নিক্ষেপ করছে:

মূল ছাড়: ত্রুটি: একটি সংস্থান 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:

আমি এইচটিএমএলও এতে পরিবর্তন করেছি:

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

আমি এখনও একই ত্রুটি বার্তা পেয়েছি

Comments

আমার কী পরিবর্তন করা উচিত সে সম্পর্কে আমি পরিষ্কার নই। আমি কি এসআরসি = "{{কিছুর সাথে যুক্ত করব?}}" কে [এসআরসি] = "কিছুর.সেলস" তে পরিবর্তন করব?

— বিল নোবেল

ঠিক:[src]='theMediaItem.photoURL1'

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

হ্যাঁ আমি এটি চেষ্টা করেছিলাম এবং আমি একই ত্রুটি বার্তাটি পাই।

— বিল নোবেল

আপনি কোন Angular2 সংস্করণ ব্যবহার করছেন?

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

আমি মনে করি যে আমি 2.0.0-beta.15 ব্যবহার করছি (আমি আয়নিক ব্যবহার করছি এবং কীভাবে চেক করবেন তা পুরোপুরি নিশ্চিত নই) আমি যেভাবে কোড যুক্ত করেছি তার জন্য ক্ষমা চাই আমি প্রোটোকলটিতে পরিষ্কার নই।

— বিল নোবেল

Answer 1

আমি 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);
  }
}

এইচটিএমএলে:

<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

Comments

" আরসি 4 " কী (এবং পরে হেলজগেটটি আরসি 3 বোঝায় )? মানে, আমি কীভাবে এটি একটি গিথুব সংস্করণে মানচিত্র করব? গিথুব এবং এনপিএম উভয় ক্ষেত্রে আমি কেবল ২.৪.৪ বা ২.৪.৫ এর মতো সংস্করণ দেখতে পাচ্ছি। আমি বর্তমানে ২.৪.৪ এ আছি এবং মনে হচ্ছে ডোমসানাইটিজার পরিবর্তন হয়েছে; সুতরাং এটি আপনার প্রয়োজনীয় আমদানি:import {DomSanitizer} from '@angular/platform-browser';

— রেড মটর

ওহ, আমি মনে করি কৌণিক এর GitHub শাখা পড়ুন হবে 2.4.xউদাহরণস্বরূপ, কিন্তু GitHub ট্যাগ মত, প্রার্থীদের মুক্তি পড়ুন হবে 2.0.0-rc3। এবং আমি আরসি 3 এ দেখতে পাচ্ছি , উদাহরণস্বরূপ ক্লাসটির নাম ছিল এখনও DomSanitizationService।

— লাল মটর

this.sanitizer.bypassSecurityTrustResourceUrl(url)ভিডিওগুলির জন্য

— প্রার্থনা করুন

এটি ব্যবহারের আগে ডকুমেন্টেশনটি সাবধানতার সাথে পড়ুন: বাইপাসসিকিউরিটি ট্রাস্টআরল () সতর্কতা: অবিশ্বস্ত ব্যবহারকারী ডেটা সহ এই পদ্ধতিটি কল করা আপনার অ্যাপ্লিকেশনটিকে এক্সএসএস সুরক্ষা ঝুঁকির সামনে ফেলে দেয়! আমার কাছে মনে হচ্ছে এটি করা নিরাপদ নয়, যদি না আপনি চিত্রের উত্সটি বিশ্বাসযোগ্য হওয়ার বিষয়ে সত্যই নিশ্চিত হন। এমনকি যদি এটি কোনও সার্ভার থেকে আসে তবে এটি যদি কোনও ব্যবহারকারী দ্বারা আপলোড করা হয় তবে এই জাতীয় সমাধানটি ব্যবহার করা সম্ভব হবে।

— উইল্ট করুন

Answer 2

নল

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

Answer 3

এটি ঠিক করার জন্য সবচেয়ে মার্জিত উপায়: পাইপ ব্যবহার করুন। এখানে উদাহরণ (আমার ব্লগ)। সুতরাং আপনি পরে url | safeসুরক্ষা বাইপাস করতে পাইপ ব্যবহার করতে পারেন ।

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

বিস্তারিত জানার জন্য এনপিএম এ ডকুমেন্টেশন দেখুন: https://www.npmjs.com/package/safe-pipe

Answer 4

এটি ঠিক করতে নিরাপদ পাইপ ব্যবহার করুন।

• আপনার যদি কিছু না থাকে তবে একটি নিরাপদ পাইপ তৈরি করুন।

  এনজি জিসি পাইপ নিরাপদ

• app.module.ts এ নিরাপদ পাইপ যুক্ত করুন

  ঘোষণা: [সেফপাইপ]

• আপনার টিএস-এ নিরাপদ পাইপ ঘোষণা করুন

নিরাপদে url অ্যাক্সেস করতে ডোম স্যানিটাইজার এবং নিরাপদ পাইপ আমদানি করুন

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

- এসসিআর ইউআরএল দিয়ে নিরাপদ যুক্ত করুন

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

Comments

গ্রেট! একটি জিনিস, এটি 'এনজি জি পাইপ নিরাপদ' না হয়ে 'এনজি জি পাইপ নিরাপদ' হওয়া উচিত, যা স্পষ্টতই কাজ করবে না?

— জ্যাকব-জান মোসেলম্যান

Answer 5

হয় আপনি স্যানিটাইজারটি ভিউতে প্রকাশ করতে পারেন, বা এমন কোনও পদ্ধতি প্রকাশ করতে পারেন যা কলকে বাইপাস সুরক্ষা ট্রাস্ট ইউআরএলকে এগিয়ে দেয়

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

Answer 6

কৌণিক সমস্ত মানকে ডিফল্টরূপে অবিশ্বস্ত হিসাবে বিবেচনা করে। সম্পত্তি, বৈশিষ্ট্য, শৈলী, শ্রেণি বাঁধাই বা অন্তরঙ্গকরণের মাধ্যমে কোনও মান কোনও টেম্পলেট থেকে ডিওমে প্রবেশ করানো হলে কৌণিক স্যানিটাইজেস এবং অবিশ্বস্ত মানগুলি থেকে বেরিয়ে যায়।

সুতরাং আপনি যদি সরাসরি ডিওএম এ চালিত হন এবং বিষয়বস্তু সন্নিবেশ করান তবে আপনার এটিকে স্যানিটাইজ করা দরকার অন্যথায় কৌণিক ত্রুটিগুলির মাধ্যমে হবে।

আমি এই জন্য পাইপ স্যানিটাইজ ইউরাল পাইপ তৈরি করেছি

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>

আপনি যদি এইচটিএমএল যুক্ত করতে চান তবে স্যানিটাইজএইচটিএমএল পাইপ সহায়তা করতে পারে

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

কৌণিক সুরক্ষা সম্পর্কে এখানে আরও পড়ুন ।

Answer 7

আমি সাধারণত 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>

Answer 8

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.

Answer 9

unsafe urlত্রুটি এড়াতে চিত্রটিকে ব্যাকগ্রাউন্ড চিত্র হিসাবে সেট করা সম্ভব :

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

সিএসএস:

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