SecurityError Blocked a frame with origin from accessing a cross-origin frame

Question

I am loading an  lt iframe gt  in my HTML page and trying to access the elements within it using Javascript  but when I try to execute my code  I get the following error   SecurityError  Blocked a frame with origin  http   www  lt domain gt  com  from accessing a cross-origin frame    Can you please help me to find a solution so that I can access the elements in the frame   I am using this code for testing  but in vain     document  ready function         var iframeWindow   document getElementById  my-iframe-id   contentWindow       iframeWindow addEventListener  load   function             var doc   iframe contentDocument    iframe contentWindow document          var target   doc getElementById  my-target-id             target innerHTML    Found it

User · Answer

If you have control over the content of the iframe - that is, if it is merely loaded in a cross-origin setup such as on Amazon Mechanical Turk - you can circumvent this problem with the <body onload='my_func(my_arg)'> attribute for the inner html.

For example, for the inner html, use the this html parameter (yes - this is defined and it refers to the parent window of the inner body element):

<body onload='changeForm(this)'>

In the inner html :

    function changeForm(window) {
        console.log('inner window loaded: do whatever you want with the inner html');
        window.document.getElementById('mturk_form').style.display = 'none';
    </script>

User · Answer

Complementing Marco Bonelli s answer  the best current way of interacting between frames iframes is using window postMessage  supported by all browsers

User · Answer

Same-origin policy You can t access an  lt iframe gt  with different origin using JavaScript  it would be a huge security flaw if you could do it  For the same-origin policy browsers block scripts trying to access a frame with a different origin  Origin is considered different if at least one of the following parts of the address isn t maintained  protocol   hostname port     Protocol  hostname and port must be the same of your domain if you want to access a frame  NOTE  Internet Explorer is known to not strictly follow this rule  see here for details  Examples Here s what would happen trying to access the following URLs from http   www example com home index html URL                                             RESULT  http   www example com home other html       - gt  Success  http   www example com dir inner another php - gt  Success  http   www example com 80                    - gt  Success  default port for HTTP   http   www example com 2251                  - gt  Failure  different port  http   data example com dir other html       - gt  Failure  different hostname  https   www example com home index html 80   - gt  Failure  different protocol ftp   www example com 21                     - gt  Failure  different protocol  amp  port  https   google com search q james bond       - gt  Failure  different protocol  port  amp  hostname   Workaround Even though same-origin policy blocks scripts from accessing the content of sites with a different origin  if you own both the pages  you can work around this problem using window postMessage and its relative message event to send messages between the two pages  like this   In your main page  const frame   document getElementById  your-frame-id    frame contentWindow postMessage   any variable or object here     http   your-second-site com     The second argument to postMessage   can be     to indicate no preference about the origin of the destination  A target origin should always be provided when possible  to avoid disclosing the data you send to any other site   In your  lt iframe gt   contained in the main page   window addEventListener  message   event   gt           IMPORTANT  check the origin of the data       if  event origin startsWith  http   your-first-site com                  The data was sent from your site             Data sent with postMessage is stored in event data          console log event data          else              The data was NOT sent from your site              Be careful  Do not use it  This else branch is            here just for clarity  you usually shouldn t need it          return                  This method can be applied in both directions  creating a listener in the main page too  and receiving responses from the frame  The same logic can also be implemented in pop-ups and basically any new window generated by the main page  e g  using window open    as well  without any difference  Disabling same-origin policy in your browser There already are some good answers about this topic  I just found them googling   so  for the browsers where this is possible  I ll link the relative answer  However  please remember that disabling the same-origin policy will only affect your browser  Also  running a browser with same-origin security settings disabled grants any website access to cross-origin resources  so it s very unsafe and should NEVER be done if you do not know exactly what you are doing  e g  development purposes    Google Chrome Mozilla Firefox Safari Opera Microsoft Edge  not possible Microsoft Internet Explorer

User · Answer

I would like to add Java Spring specific configuration that can effect on this   In Web site or Gateway application there is a contentSecurityPolicy setting  in Spring you can find implementation of WebSecurityConfigurerAdapter sub class  contentSecurityPolicy   script-src  self   URLDomain  scripts    style-src  self   URLDomain  styles  frame-src  self   URLDomain  frameUrl            referrerPolicy ReferrerPolicyHeaderWriter ReferrerPolicy STRICT ORIGIN WHEN CROSS ORIGIN    Browser will be blocked if you have not define safe external contenet here

User · Answer

I experienced this error when trying to embed an iframe and then opening the site with Brave  The error went away when I changed to  quot Shields Down quot  for the site in question  Obviously  this is not a full solution  since anyone else visiting the site with Brave will run into the same issue  To actually resolve it I would need to do one of the other things listed on this page  But at least I now know where the problem lies

User · Answer

Open the start menu Type windows R or open  Run Execute the following command    chrome exe --user-data-dir  C   Chrome dev session  --disable-web-security

User · Answer

For me i wanted to implement a 2-way handshake  meaning   - the parent window will load faster then the iframe  - the iframe should talk to the parent window as soon as its ready  - the parent is ready to receive the iframe message and replay  this code is used to set white label in the iframe using  CSS custom property  code  iframe    function         window onload   function                create listener         function receiveMessage e                document documentElement style setProperty  --header bg   e data wl header bg               document documentElement style setProperty  --header text   e data wl header text               document documentElement style setProperty  --button bg   e data wl button bg                 alert e data data header bg                     window addEventListener  message   receiveMessage              call parent         parent postMessage  GetWhiteLabel                    parent    function            create listener     var eventMethod   window addEventListener    addEventListener     attachEvent       var eventer   window eventMethod       var messageEvent   eventMethod     attachEvent     onmessage     message       eventer messageEvent  function  e               replay to child  iframe           document getElementById  wrapper-iframe   contentWindow postMessage                                event id   white label message                   wl                        header bg      Header   css  background-color                        header text      Header  HoverMenu a   css  color                        button bg      Header  HoverMenu a   css  background-color                                                                      false         naturally you can limit the origins and the text  this is easy-to-work-with code i found this examlpe to be helpful   Cross-Domain Messaging With postMessage

User · Answer

Check the domain s web server for http   www  lt domain gt  com configuration for X-Frame-Options It is a security feature designed to prevent clickJacking attacks  How Does clickJacking work   The evil page looks exactly like the victim page  Then it tricked users to enter their username and password   Technically the evil has an iframe with the source to the victim page   lt html gt       lt iframe src  victim domain com   gt       lt input id  quot username quot  type  quot text quot  style  quot display  none  quot   gt       lt input id  quot password quot  type  quot text quot  style  quot display  none  quot   gt       lt script gt            some JS code that click jacking the user username and input from inside the iframe         lt script  gt   lt html gt   How the security feature work If you want to prevent web server request to be rendered within an iframe add the x-frame-options  X-Frame-Options DENY  The options are   SAMEORIGIN   allow only to my own domain render my HTML inside an iframe  DENY   do not allow my HTML to be rendered inside any iframe  quot ALLOW-FROM https   example com  quot    allow specific domain to render my HTML inside an iframe  This is IIS config example      lt httpProtocol gt          lt customHeaders gt              lt add name  quot X-Frame-Options quot  value  quot SAMEORIGIN quot    gt          lt  customHeaders gt      lt  httpProtocol gt   The solution to the question If the web server activated the security feature it may cause a client-side SecurityError as it should

[javascript] SecurityError: Blocked a frame with origin from accessing a cross-origin frame

Examples related to javascript

Examples related to jquery

Examples related to security

Examples related to iframe

Examples related to same-origin-policy