Blocked a frame with origin ошибка

Same-origin policy

You can’t access an <iframe> 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       -> Success
http://www.example.com/dir/inner/another.php -> Success
http://www.example.com:80                    -> Success (default port for HTTP)
http://www.example.com:2251                  -> Failure: different port
http://data.example.com/dir/other.html       -> Failure: different hostname
https://www.example.com/home/index.html:80   -> Failure: different protocol
ftp://www.example.com:21                     -> Failure: different protocol & port
https://google.com/search?q=james+bond       -> Failure: different protocol, port & 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*/, 'https://your-second-site.example');
  

  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 <iframe> (contained in the main page):

  window.addEventListener('message', event => {
      // IMPORTANT: check the origin of the data!
      if (event.origin === 'https://your-first-site.example') {
          // 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: same as Chrome
• Microsoft Edge: same as Chrome
• Brave: same as Chrome
• Microsoft Edge (old non-Chromium version): not possible
• Microsoft Internet Explorer

политика того же происхождения

^{не путать с CORS!}

вы не могу к <iframe> С различным происхождением с использованием JavaScript, это было бы огромным недостатком безопасности, если бы вы могли это сделать. Для политика того же происхождениябраузеры блокируют скрипты, пытающиеся получить доступ к кадру с другим происхождением.

происхождение считается другим, если по крайней мере одно из следующих части адреса не поддерживается:

<protocol>://<hostname>:<port>/path/to/page.html 

протокол,хоста и порт должно быть то же самое из вашего домена, если вы хотите получить доступ к кадру.

примеры

вот что произойдет, пытаясь получить доступ к следующим URL-адресам из http://www.example.com/home/index.html

URL                                             RESULT 
http://www.example.com/home/other.html       -> Success 
http://www.example.com/dir/inner/another.php -> Success 
http://www.example.com:80                    -> Success (default port for HTTP) 
http://www.example.com:2251                  -> Failure: different port 
http://data.example.com/dir/other.html       -> Failure: different hostname 
https://www.example.com/home/index.html.html -> Failure: different protocol 
ftp://www.example.com:21                     -> Failure: different protocol & port 
https://google.com/search?q=james+bond       -> Failure: different hostname & protocol 

решение

несмотря на то, что политика same-origin блокирует скрипты от доступа к содержимому сайтов с другим происхождение,если у вас есть обе страницы, вы можете обойти эту проблему с помощью window.postMessage и его родственник message событие для отправки сообщений между двумя страницами, как это:

• на главной странице:

  var frame = document.getElementById('your-frame-id'); 
  
  frame.contentWindow.postMessage(/*any variable or object here*/, '*'); 
  

• в своем <iframe> (содержится на главной странице):

  window.addEventListener('message', function(event) { 
  
      // IMPORTANT: Check the origin of the data! 
      if (~event.origin.indexOf('http://yoursite.com')) { 
          // The data has been sent from your site 
  
          // The data sent with postMessage is stored in event.data 
          console.log(event.data); 
      } else { 
          // The data hasn't been sent from your site! 
          // Be careful! Do not use it. 
          return; 
      } 
  }); 
  

этот метод может быть применен в в обе стороны создание прослушивателя в главная страница тоже, и получение ответов из кадра. Та же логика также может быть реализована во всплывающих окнах и в основном в любом новом окне, созданном главной страницей (например, с помощью window.open()) также, без какой-либо разницы.

отключение политики того же происхождения в код обозреватель

уже есть несколько хороших ответов на эту тему (я только что нашел их в гугле), поэтому для браузеров, где это возможно, я свяжу относительный ответ. Однако, пожалуйста, помните, что отключение политики того же происхождения (или CORS) повлияет только на код обозреватель. Кроме того, запуск браузера с одинаковыми настройками безопасности отключил гранты любой доступ веб-сайта к ресурсам кросс-происхождения, так что это очень небезопасно и должно быть сделано только для целей развития.

• Google Chrome
• Mozilla Firefox
• Apple Safari: невозможно,только CORS.
• опера не возможно.
• Microsoft Edge: невозможно.
• Microsoft Internet Explorer: невозможно, только CORS.

I am loading an <iframe> 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..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()  iframe.contentWindow.document; var target = doc.getElementById('my-target-id'); target.innerHTML = 'Found it!'; ); }); 

Same-origin policy

You can’t access an <iframe> 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 -> Success http://www.example.com/dir/inner/another.php -> Success http://www.example.com:80 -> Success (default port for HTTP) http://www.example.com:2251 -> Failure: different port http://data.example.com/dir/other.html -> Failure: different hostname https://www.example.com/home/index.html:80 -> Failure: different protocol ftp://www.example.com:21 -> Failure: different protocol & port https://google.com/search?q=james+bond -> Failure: different protocol, port & 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 <iframe> (contained in the main page):

  window.addEventListener('message', event => { // 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

• 29 Any other answer I’ve found 1, 2, suggests that CORS/Access-Control-Allow-Origin does not apply to iFrames, only to XHRs, Fonts, WebGL and canvas.drawImage. I believe postMessage is the only option.
• what if the origin is: yousite.com.mysite.com ? should we use === instead?
• 1 @ccppjava you don’t need the ===, you already know that the variable type it’s a string, so === is useless here.
• 4 @SabaAhang just check for the iframe.src, and if the site it’s different from your domain’s hostname then you can’t access that frame.
• 2 @user2568374 location.ancestorOrigins[0] is the location of the parent frame. If your frame is running inside another site and you check using event.origin.indexOf(location.ancestorOrigins[0]) you are checking if the origin of the event contains the parent’s frame address, which is always going to be true, therefore you are allowing any parent with any origin to access your frame, and this is obviously not something you want to do. Moreover, document.referrer is bad practice too, as I already explained in the comments above.

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

• 12 window.postMessage we can use only if we can able to access both parent(our HTML page) and children element(other domain iframe).Otherwise ‘THERE IS NO POSSIBILITY’, it will always throws an error ‘Uncaught DOMException: Blocked a frame with origin » from accessing a cross-origin frame.’

Check the domain’s web server for http://www..com configuration for X-Frame-Options It is a security feature designed to prevent clickJacking attacks,

How Does clickJacking work?

1. The evil page looks exactly like the victim page.
2. Then it tricked users to enter their username and password.

Technically the evil has an iframe with the source to the victim page.

<html> <iframe src='victim_domain.com'/> <input id='username' type='text' style='display: none;/> <input id='password' type='text' style='display: none;/> <script> //some JS code that click jacking the user username and input from inside the iframe... <script/> <html> 

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:

1. SAMEORIGIN //allow only to my own domain render my HTML inside an iframe.
2. DENY //do not allow my HTML to be rendered inside any iframe
3. ‘ALLOW-FROM https://example.com/’ //allow specific domain to render my HTML inside an iframe

This is IIS config example:

The solution to the question

If the web server activated the security feature it may cause a client-side SecurityError as it should.

• 2 I don’t think that X-Frame-Options applies here — X-Frame-Options defined by the guest (embedded) page can cause the parent to refuse to load the page, but as far as I know it doesn’t affect javascript access — even with X-Frame-Options: *, I don’t think you’ll be able to access the DOM of a different origin guest page with javascript

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]

• i’m dealing with an issue with safari where document in iframe is executing its JS later than parent page which causes the message to be sent earlier than document in iframe is listening to messages; which is exactly opposite from what chrome and firefox do — have you tested your code in safari on ios? btw postMessage with second parameter of value ‘*’ is not quite safe, you should always specify domain
• Your first block of code, is that on the iframe in the parent or is it on the page that gets loaded into the iframe ?

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.

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 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):

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>  
 
 
У меня возникла эта ошибка при попытке встроить iframe, а затем открыть сайт с помощью Brave. Ошибка исчезла, когда я перешел на "Shields Down" для рассматриваемого сайта. Очевидно, что это не полное решение, поскольку любой, кто посещает сайт с Brave, столкнется с той же проблемой. Чтобы действительно решить эту проблему, мне нужно было бы сделать одно из других действий, перечисленных на этой странице. Но по крайней мере теперь я знаю, в чем проблема.
 
 
 
 
Откройте стартовое меню
 
Введите windows + R или откройте "Выполнить"
 
Выполните следующую команду.
 
  
 
 3 Подходит для быстрого и грязного теста! 
 
 7 Ужасно для всего, что не является быстрым и грязным тестом… и уже адрес в принятом ответе. 
 
 2 Даже с командой это не работает, потому что Chrome таким образом избегает отключения веб-безопасности.