How to set iframe src without causing unsafe value exception

Question

I am working on a tutorial involving the setting of an iframe src attribute     lt iframe width  100   height  300  src    video url    gt  lt  iframe gt    This throws an exception   Error  unsafe value used in a resource URL context at DomSanitizationServiceImpl sanitize      I have already tried using bindings with  src  with no success

User · Answer

constructor   public sanitizer  DomSanitizer            I had been struggling for 4 hours  the problem was in img tag  When you use square bracket to  src  ex   src   you can not use this angular expression       you just give directly from an object example below  if you give angular expression       you will get interpolation error    first i used ngFor to iterate the countries   ngFor  let country of countries   second you put this in the img tag  this is it    lt img  src   sanitizer bypassSecurityTrustResourceUrl country flag   height  20  width  20  alt     gt

User · Answer

Congratulation        I have an easy  amp  efficient solution for you  yes    lt iframe width  100   height  300   attr src   video url  gt  lt  iframe       attr src  instead of src    video url  and not   video url     Great

User · Answer

Update v8  Below answers work but exposes your application to XSS security risks   Instead of using this sanitizer bypassSecurityTrustResourceUrl url   it is recommended to use this sanitizer sanitize SecurityContext URL  url   Update   For RC 6  version use DomSanitizer  Plunker  And a good option is using pure pipe for that     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            remember to add your new SafePipe to the declarations array of the AppModule   as seen on documentation    NgModule      declarations                   SafePipe            html   lt iframe width  100   height  300   src   url   safe  gt  lt  iframe gt    Plunker  If you use embed tag this might be interesting for you    how with angular2 rc 6 disable sanitize on embed html tag which display pdf     Old version RC 5  You can leverage DomSanitizationService like this   export class YourComponent     url  SafeResourceUrl    constructor sanitizer  DomSanitizationService        this url   sanitizer bypassSecurityTrustResourceUrl  your url            And then bind to url in your template    lt iframe width  100   height  300   src   url  gt  lt  iframe gt    Don t forget to add the following imports   import   SafeResourceUrl  DomSanitizationService   from   angular platform-browser     Plunker sample

User · Answer

I usually add separate safe pipe reusable component as following     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        lt  ------------------- call your url   trustedUrl  for me  and add  mySafe  as defined in Safe Pipe ---------------- gt   lt div class  container-fluid   ngIf  trustedUrl  gt       lt iframe  src   trustedUrl   mySafe  align  middle  width  100   height  800  frameborder  0  gt  lt  iframe gt   lt  div gt

User · Answer

This works me to Angular 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   lt iframe width  100   height  100   frameBorder  0   src   urlSafe  gt  lt  iframe gt    thats all folks

User · Answer

This one works for me  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

User · Answer

I ran into this issue as well  but in order to use a safe pipe in my angular module  I installed the safe-pipe npm package  which you can find here  FYI  this worked in Angular 9 1 3  I haven t tried this in any other versions of Angular  Here s how you add it step by step    Install the package via npm install safe-pipe or yarn add safe-pipe  This will store a reference to it in your dependencies in the package json file  which you should already have from starting a new Angular project  Add SafePipeModule module to NgModule imports in your Angular module file like so   import   SafePipeModule   from  safe-pipe     NgModule       imports    SafePipeModule      export class AppModule       Add the safe pipe to an element in the template for the Angular component you are importing into your NgModule this way     lt element  property   value   safe  sanitizationType  gt  lt  element gt     Here are some specific examples of the safePipe in an html element     lt div  style background-image    url     pictureUrl         safe   style   class  pic bg-pic  gt  lt  div gt   lt img  src   pictureUrl   safe   url   class  pic  alt  Logo  gt   lt iframe  src   catVideoEmbed   safe   resourceUrl   width  640  height  390  gt  lt  iframe gt   lt pre  innerHTML   htmlContent   safe   html   gt  lt  pre gt

[angular] How to set <iframe src="..."> without causing `unsafe value` exception?

Examples related to angular