img Unsafe value used in a resource URL context

Question

Since upgrading to the latest Angular 2 release candidate  my img tags    lt img class  photo-img   hidden    showPhoto1  src    theMediaItem photoURL1    gt    are throwing a browser error      ORIGINAL EXCEPTION  Error  unsafe value used in a resource URL context   The value of the url is   http   veeu-images s3 amazonaws com media userphotos 116 1464645173408 cdv photo 007 jpg   EDIT   I have tried the suggestion made in the other solution that this question is supposed to be a duplicate of but I am getting the same error   I have added the following code to the controller   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         I am still getting the same error message   EDIT2   I have also changed the html to    lt img class  photo-img   hidden    showPhoto1   src   theMediaItem photoURL1  gt    I still get the same error message

User · Accepted Answer

I m using rc 4 and this method works for 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           In the HTML    lt iframe  src   photoURL    width  640  height  360  frameborder  0      webkitallowfullscreen mozallowfullscreen allowfullscreen gt   lt  iframe gt    Using a function will ensure that the value doesn t change after you sanitize it  Also be aware that the sanitization function you use depends on the context   For images  bypassSecurityTrustUrl will work but for other uses you need to refer to the documentation    https   angular io docs ts latest api platform-browser index DomSanitizer-class html

User · Answer

It is possible to set image as background image to avoid unsafe url error    lt div  style backgroundImage    url     imageUrl        class  show-image  gt  lt  div gt    CSS    show-image       width  100px      height  100px      border-radius  50       background-size  cover

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

The most elegant way to fix this  use pipe  Here is example  my blog   So you can then simply use url   safe pipe to bypass the security    lt iframe  src   url   safe  gt  lt  iframe gt    Refer to the documentation on npm for details  https   www npmjs com package safe-pipe

User · Answer

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                      lt iframe  src   trustedURL  width  640  height  360  frameborder  0     webkitallowfullscreen mozallowfullscreen allowfullscreen gt   lt  iframe gt    User property binding instead of function

User · Answer

Either you can expose sanitizer to the view  or expose a method that forwards the call to bypassSecurityTrustUrl   lt img class  photo-img   hidden    showPhoto1        src   sanitizer bypassSecurityTrustUrl theMediaItem photoURL1   gt

User · Answer

Pipe    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                Template    data url   safe  url      That s it  Note  You shouldn t need it but here is the component use of the pipe      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   lt h1 gt Hi lt  h1 gt     html

User · Answer

Angular treats all values as untrusted by default  When a value is inserted into the DOM from a template  via property  attribute  style  class binding  or interpolation  Angular sanitizes and escapes untrusted values   So if you are manipulating DOM directly and inserting content it  you need to sanitize it otherwise Angular will through errors   I have created the pipe SanitizeUrlPipe for this  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             and this is how you can use   lt iframe  src   url   sanitizeUrl  width  100   height  500px  gt  lt  iframe gt    If you want to add HTML  then SanitizeHtmlPipe can help  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             Read more about angular security here

User · Answer

Use Safe Pipe to fix it   Create a safe pipe if u haven t any  ng g pipe safe  add Safe pipe in app module ts declarations   SafePipe   declare safe pipe in your ts   Import Dom Sanitizer and Safe Pipe to access url safely import   Pipe  PipeTransform  from   angular core   import   DomSanitizer   from  quot  angular platform-browser quot     Pipe   name   safe      export class SafePipe implements PipeTransform    constructor private sanitizer  DomSanitizer      transform url     return this sanitizer bypassSecurityTrustResourceUrl url           Add safe with src url  lt img width  quot 900 quot  height  quot 500 quot   src   quot link   safe quot   gt

[angular] <img>: Unsafe value used in a resource URL context

Examples related to angular