How to set an iframe src attribute from a variable in AngularJS

Question

I m trying to set the src attribute of an iframe from a variable and I can t get it to work     The markup    lt div class  col-xs-12  ng-controller  AppCtrl  gt        lt ul class    gt           lt li ng-repeat  project in projects  gt               lt a ng-click  setProject project id   href    gt   project url   lt  a gt           lt  li gt       lt  ul gt        lt iframe  ng-src    trustSrc currentProject url     gt          Something wrong         lt  iframe gt   lt  div gt    controllers app js   function AppCtrl   scope          scope projects              1                  id    1               name     Mela Sarkar                url     http   blabla com                description     A professional portfolio site for McGill University professor Mela Sarkar                       2                  id    2               name     Good Watching                url     http   goodwatching com                description     Weekend experiment to help my mom decide what to watch                              scope setProject   function  id             scope currentProject    scope projects id           console log   scope currentProject               With this code  nothing gets inserted into the iframe s src attribute  It s just blank   Update 1  I injected the  sce dependancy into the AppCtrl and  sce trustUrl   now works without throwing errors  However it returns TrustedValueHolderType which I m not sure how to use to insert an actual URL  The same type is returned whether I use  sce trustUrl   inside the interpolation braces in the attribute src    trustUrl currentProjectUrl      or if I do it inside the controller when setting the value of currentProjectUrl  I even tried it with both   Update 2  I figured out how to return the url from the trustedUrlHolder using  toString   but when I do that  it throws the security warning when I try to pass it into the src attribute   Update 3  It works if I use trustAsResourceUrl   in the controller and pass that to a variable used inside the ng-src attribute    scope setProject   function  id         scope currentProject    scope projects id        scope currentProjectUrl    sce trustAsResourceUrl  scope currentProject url       console log   scope currentProject        console log   scope currentProjectUrl         My problem seems to be solved by this  although I m not quite sure why

User · Answer

Please remove call to trustSrc function and try again like this     trustSrc currentProject url    to   currentProject url    Check this link http   plnkr co edit caqS1jE9fpmMn5NofUve p preview  But according to the Angular Js 1 2 Documentation  you should write a function for getting src url  Have a look on the following code   Before   Javascript  scope baseUrl    page   scope a   1  scope b   2    Html   lt  -- Are a and b properly escaped here  Is baseUrl controlled by user  -- gt   lt iframe src    baseUrl   a   a  amp b   b      But for security reason they are recommending following method  Javascript  var baseUrl    page   scope getIframeSrc   function           One should think about their particular case and sanitize accordingly   var qs     a    b   map function value  name          return encodeURIComponent name                       encodeURIComponent value          join   amp            baseUrl  isn t exposed to a user s control  so we don t have to worry about escaping it    return baseUrl         qs       Html   lt iframe src    getIframeSrc      gt

User · Answer

It is the  sce service that blocks URLs with external domains  it is a service that provides Strict Contextual Escaping services to AngularJS  to prevent security vulnerabilities such as XSS  clickjacking  etc  it s enabled by default in Angular 1 2   You can disable it completely  but it s not recommended  angular module  myAppWithSceDisabledmyApp           config function  sceProvider            sceProvider enabled false            for more info https   docs angularjs org api ng service  sce

User · Answer

I suspect looking at the excerpt that the function trustSrc from trustSrc currentProject url  is not defined in the controller    You need to inject the  sce service in the controller and trustAsResourceUrl the url there   In the controller   function AppCtrl  scope   sce                    scope setProject   function  id           scope currentProject    scope projects id          scope currentProjectUrl    sce trustAsResourceUrl  scope currentProject url             In the Template    lt iframe ng-src    currentProjectUrl    gt   lt  --content-- gt   lt  iframe gt

User · Answer

select template  iframe controller  ng model update  index html  angularapp controller  FieldCtrl   function   scope   sce            var iframeclass                scope loadTemplate   function                 if   scope template length  gt  0                       add iframe classs                 iframeclass    scope template split      0                   iframe classList add iframeclass                    scope activeTemplate    sce trustAsResourceUrl  scope template                 else                   iframe classList remove iframeclass                                             custom directive     angularapp directive  myChange   function             return function scope  element                element bind  input   function                        the iframe function                 iframe contentWindow update                       name  element 0  name                      value  element 0  value                                                          iframe html     window update   function data             scope  apply function                  scope data name     data value length  gt  0    data value  defaults data name                        Check this link  http   plnkr co edit TGRj2o p preview

User · Answer

this way i follow and its work for me fine  may it will works for you    lt iframe class  img-responsive  src    pdfLoc  trustThisUrl     ng-style                    height  iframeHeight   0 75    px                 style  width 100   gt  lt  iframe gt    here trustThisUrl is just filter   angular module  app   filter  trustThisUrl      sce   function   sce            return function  val                return  sce trustAsResourceUrl val

User · Answer

You need also  sce trustAsResourceUrl or it won t open the website inside the iframe    x000D   x000D  angular module  myApp       x000D       controller  dummy      scope     sce   function   scope   sce    x000D   x000D       scope url    sce trustAsResourceUrl  https   www angularjs org    x000D   x000D       scope changeIt   function      x000D           scope url    sce trustAsResourceUrl  https   docs angularjs org tutorial    x000D        x000D       x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt  x000D   x000D   lt div ng-app  myApp  ng-controller  dummy  gt  x000D       lt iframe ng-src    url    width  300  height  200  gt  lt  iframe gt  x000D       lt br gt  x000D       lt button ng-click  changeIt    gt Change it lt  button gt  x000D   lt  div gt  x000D   x000D   x000D

[javascript] How to set an iframe src attribute from a variable in AngularJS

Examples related to javascript

Examples related to html

Examples related to angularjs

Examples related to iframe

Examples related to angularjs-directive