javascript - origin - SecurityError: bloqueó un marco con origen al acceder a un marco de origen cruzado

solicitud cors no exitosa

Question

Estoy cargando un <iframe> en mi página HTML e intento acceder a los elementos dentro de ella utilizando Javascript, pero cuando intento ejecutar mi código, aparece el siguiente error:

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

¿Puede ayudarme, por favor, a encontrar una solución para poder acceder a los elementos del marco?

Estoy usando este código para las pruebas, pero en vano:

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

Answer 1

Política del mismo origen

^{¡No debe confundirse con CORS !}

No puede acceder a un <iframe> con un origen diferente usando JavaScript, sería un gran defecto de seguridad si pudiera hacerlo. Para los navegadores de políticas del mismo origen, bloquee los scripts que intentan acceder a un marco con un origen diferente .

El origen se considera diferente si al menos una de las siguientes partes de la dirección no se mantiene:

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

El protocolo , el nombre de host y el puerto deben ser los mismos de su dominio, si desea acceder a un marco.

Ejemplos

Esto es lo que sucedería al intentar acceder a las siguientes URL desde 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 

Solución

Aunque la política del mismo origen impide que los scripts accedan al contenido de sitios con un origen diferente, si posee ambas páginas, puede solucionar este problema utilizando window.postMessage y su evento de message relativo para enviar mensajes entre las dos páginas, como esta:

• En tu página principal:

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

• En su <iframe> (contenido en la 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; 
      } 
  }); 

Este método se puede aplicar en ambas direcciones , creando un oyente en la página principal y recibiendo respuestas del marco. La misma lógica también se puede implementar en ventanas emergentes y, básicamente, en cualquier nueva ventana generada por la página principal (por ejemplo, utilizando también window.open() ), sin ninguna diferencia.

Deshabilitando la política del mismo origen en su navegador

Ya hay algunas buenas respuestas sobre este tema (las encontré en Google), así que, para los navegadores donde sea posible, vincularé la respuesta relativa. Sin embargo, recuerde que deshabilitar la política del mismo origen (o el CORS) solo afectará a su navegador . Además, la ejecución de un navegador con la configuración de seguridad del mismo origen deshabilitada otorga a cualquier sitio web acceso a recursos de origen cruzado, por lo que es muy inseguro y se debe realizar solo con fines de desarrollo .

• Google Chrome
• Mozilla Firefox
• Apple Safari: no es posible, solo CORS .
• Ópera: no es posible.
• Microsoft Edge: no es posible.
• Microsoft Internet Explorer: no es posible, solo CORS .

Answer 2

Abrir el menu de inicio
Escribe windows + R o abre "Ejecutar
Ejecute el siguiente comando.

chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security

Answer 3

Complementando la respuesta de Marco Bonelli: la mejor forma actual de interactuar entre marcos / iframes es usar window.postMessage , compatible con todos los navegadores

Answer 4

Mi aplicación se bloqueaba con un SecurityError cuando se colocaba dentro de un iframe El problema fue que jQuery''s .animate({scrollTop: top}, 0) se aplicaba directamente a la window .

Eliminar ese LOC solucionó el problema para nosotros.

Answer 5

Para mí quería implementar un apretón de manos de 2 vías, lo que significa:
- la ventana principal se cargará más rápido que el iframe
- el iframe debe hablar con la ventana principal tan pronto como esté listo
- el padre está listo para recibir el mensaje iframe y la reproducción

este código se usa para establecer una etiqueta blanca en el iframe usando [propiedad personalizada de 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","*");
    }
});

padre

$(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, puede limitar los orígenes y el texto, este es un código fácil de trabajar con
Encontré este examen para ser útil:
[Mensajería entre dominios con mensaje posterior]

Answer 6

Verifique el servidor web del dominio para http://www.<domain>.com configuración para X-Frame-Options Es una característica de seguridad diseñada para prevenir ataques de clickjacking,

¿Cómo funciona clickJacking?

1. La página del mal se ve exactamente como la página de la víctima.
2. Luego engañó a los usuarios para ingresar su nombre de usuario y contraseña.

Técnicamente el mal tiene un iframe con la fuente de la página de la víctima.

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

Cómo funciona la función de seguridad

Si desea evitar que la solicitud del servidor web se rinda dentro de un iframe agregue las x-frame-options

Opciones de X-Frame DENY

Las opciones son:

1. SAMEORIGIN // permite solo a mi propio dominio representar mi HTML dentro de un iframe.
2. DENY // no permitir que mi HTML sea renderizado dentro de cualquier iframe
3. "ALLOW-FROM https://example.com/ " // permite que un dominio específico represente mi HTML dentro de un iframe

Este es el ejemplo de configuración de IIS:

   <httpProtocol>
       <customHeaders>
           <add name="X-Frame-Options" value="SAMEORIGIN" />
       </customHeaders>
   </httpProtocol>

La solución a la pregunta.

Si el servidor web activó la función de seguridad, puede provocar un error de seguridad del lado del cliente como debería.