javascript - Error de captura no detectado: no se pudo leer la propiedad ''contentDocument'' de ''HTMLIFrameElement'': se bloqueó un marco con origen "https:// localhost"
securityexception (2)
Me enfrento a este problema al intentar capturar eventos de clic de G + botón de seguimiento.
Error de captura no detectado: Error al leer la propiedad ''contentDocument'' de ''HTMLIFrameElement'': bloqueó un marco con origen " https: // localhost " para acceder a un marco con origen " https://apis.google.com ". Los protocolos, dominios y puertos deben coincidir.
Encontré una discusión similar, Uncought SecurityError: Error al leer la propiedad ''contentDocument'' de ''HTMLIFram .
Este problema se desencadenó cuando intentas llamar a ajax a otro dominio, consulta este artículo para obtener más información sobre la política de Same origin
Para arreglar esto, necesitarás agregar este código.
document.domain = ''yourdomain.com''
Del propio artículo:
Una página puede cambiar su propio origen con algunas limitaciones. Una secuencia de comandos puede establecer el valor de document.domain en un subconjunto del dominio actual. Si lo hace, el dominio más corto se utiliza para verificaciones de origen posteriores. Por ejemplo, suponga que un script en el documento en http://store.company.com/dir/other.html ejecuta la siguiente declaración:
document.domain = "company.com";
Después de que se ejecute esa declaración, la página pasará la comprobación de origen con http://company.com/dir/page.html . Sin embargo, por el mismo razonamiento, company.com no pudo establecer document.domain en othercompany.com.
El número de puerto se mantiene separado por el navegador. Cualquier llamada al configurador, incluido document.domain = document.domain, hace que el número de puerto se sobrescriba con null. Por lo tanto, no se puede hacer que company.com:8080 hable con company.com configurando solo document.domain = "company.com" en la primera. Debe establecerse en ambos para que los números de puerto sean nulos.
Mi solución reconstruye el iframe y utilizable en angular. Cuando construimos un iframe, se requiere una verificación de seguridad de origen para modificar el contenido del iframe. Esta solución nos permite recrear el contenido de iframe varias veces.
HTML
<div id="iframecontainer"></div>
JS
var content = "<h1>Content inside Iframe</h1>"; //desired content of iframe
var iframecontainer = document.getElementById("iframecontainer");
iframecontainer.innerHTML =''<iframe id="threedsframe" width="%90" height="400px"></iframe>'';
var iframe = iframecontainer.childNodes[0];
let doc = iframe.contentDocument || iframe.contentWindow;
doc.open();
doc.write(content);
doc.close();