SecurityError: bloqueou um quadro com origem de acessar um quadro de origem cruzada

Estou carregando um na minha página HTML e tentando acessar os elementos dentro dele usando JavaScript, mas quando tento executar meu código, recebo o seguinte erro:

 SecurityError: Blocked a frame with origin "http://www..com" from accessing a cross-origin frame. 

Você pode por favor me ajudar a encontrar uma solução para que eu possa acessar os elementos no quadro?

Eu estou usando este código para testes, mas em vão:

 $(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!"; }); }); 

Política de mesma origem

Não deve ser confundido com o CORS !

Você não pode acessar um com origem diferente usando JavaScript, seria uma enorme falha de segurança se você pudesse fazê-lo. Para a política de mesma origem, os navegadores bloqueiam os scripts que tentam acessar um quadro com uma origem diferente .

A origem é considerada diferente se pelo menos uma das seguintes partes do endereço não for mantida:

 ://:/path/to/page.html 

Protocolo , nome do host e porta devem ser os mesmos do seu domínio, se você quiser acessar um quadro.

Exemplos

Eis o que aconteceria ao tentar acessar os seguintes URLs de 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 

Solução alternativa

Mesmo que a política de mesma origem bloqueie os scripts de acessar o conteúdo de sites com origem diferente, se você possuir as duas páginas, poderá solucionar esse problema usando window.postMessage e seu evento de message relativo para enviar mensagens entre as duas páginas, como esta:

  • Na sua página principal:

     var frame = document.getElementById('your-frame-id'); frame.contentWindow.postMessage(/*any variable or object here*/, '*'); 
  • Em seu (contido na página principal):

     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; } }); 

Esse método pode ser aplicado em ambas as direções , criando também um ouvinte na página principal e recebendo respostas do quadro. A mesma lógica também pode ser implementada em pop-ups e, basicamente, qualquer nova janela gerada pela página principal (por exemplo, usando window.open() ), sem qualquer diferença.

Desativando a política de mesma origem no seu navegador

Já existem algumas boas respostas sobre este tópico (acabei de encontrá-las no googling), então, para os navegadores onde isso é possível, eu ligarei a resposta relativa. No entanto, lembre-se de que desabilitar a política de mesma origem (ou o CORS) afetará apenas o seu navegador . Além disso, a execução de um navegador com configurações de segurança de mesma origem desabilitadas concede a qualquer site access a resources de origem cruzada, por isso é muito inseguro e deve ser feito apenas para fins de desenvolvimento .

  • Google Chrome
  • Mozilla Firefox
  • Apple Safari: não é possível, apenas o CORS .
  • Ópera: não é possível.
  • Microsoft Edge: não é possível.
  • Microsoft Internet Explorer: não é possível, apenas o CORS .

Complementando a resposta de Marco Bonelli: a melhor maneira atual de interagir entre frames / iframes é usando window.postMessage , suportado por todos os navegadores

Verifique o servidor web do domínio para http://www..com configuração para X-Frame-Options É um recurso de segurança projetado para evitar ataques de clickjacking,

Como o clickjacking funciona?

  1. A página do mal parece exatamente como a página da vítima.
  2. Em seguida, enganou os usuários para inserir seu nome de usuário e senha.

Tecnicamente, o mal tem um iframe com a fonte para a página da vítima.

   

Este é o exemplo de configuração do IIS:

       

A solução para a questão

Se o servidor da Web ativou o recurso de segurança, isso pode causar um SecurityError do lado do cliente como deveria.

Para mim, eu queria implementar um handshake bidirecional, o que significa:
– a janela pai será carregada mais rápido que o iframe
– o iframe deve falar com a janela pai assim que estiver pronto
– o pai está pronto para receber a mensagem e repetição do iframe

esse código é usado para definir o label branco no iframe usando [propriedade personalizada CSS]
código:
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","*"); } }); 

pai

 $(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); }); 

naturalmente você pode limitar as origens e o texto, isto é fácil de trabalhar-com código
Eu achei este examlpe para ser útil:
[Cross-Domain Messaging With postMessage]

Meu aplicativo estava falhando com um SecurityError quando colocado dentro de um iframe . O problema era com o .animate({scrollTop: top}, 0) do jQuery .animate({scrollTop: top}, 0) sendo aplicado diretamente na window .

Remover esse LOC corrigiu o problema para nós.