> ###TL;DR Cómo ejecutar un script en un iframe en una página ⚡️AMP para que lea un atributo en la ventana madre. Estoy tratando de ejecutar un script en un iframe en una página Accelerated Mobile Pages pero obtengo un error en Google Chrome: > disqus-v1.0.10.html:27 Uncaught DOMException: Blocked a frame with origin "https://media.toledano.org" from accessing a cross-origin frame. at https://media.toledano.org/assets/js/disqus-v1.0.10.html:27:40 En Safari el error es este: > SecurityError (DOM Exception 18): Blocked a frame with origin > "https://media.toledano.org" from accessing a frame with origin > "https://yo.toledano.org". Protocols, domains, and ports must match. La línea con el problema busca el valor de un atributo en un elemento específico: window.parent.document.getElementById('content').attributes["data-idx"].value} La idea es que cargo el iframe en una página y el script que contiene el iframe busca una línea como esta: <main id="content" role="main" class="" data-idx="d09a0882-74a2-4d66-97d8-63e37172a1b4"> Si solo uso `document.getElementById('content').attributes["data-idx"].value}` el resultado es nulo, porque el iframe se refiere a si mismo (o sea a `media`), por eso me refiero a `parent` (o sea a `yo`). > ### Nota No entiendo de que lado funciona esto del CORS así que en ambos lados agregué los encabezados de permisos. Según yo, los encabezados funcionan... Hago una solicitud pidiendo los encabezados y puedo ver que funcionan. ### Prueba 1.- Origen: yo - Destino: media (`yo` -> `media`) > $ curl -I -s -X GET -H "Origin: yo.toledano.org" https://media.toledano.org HTTP/1.1 200 OK Content-Type: text/html Content-Length: 0 Connection: keep-alive Date: Tue, 01 Aug 2017 16:50:37 GMT Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, PUT, POST, DELETE, HEAD Access-Control-Max-Age: 3000 Last-Modified: Fri, 14 Aug 2015 22:03:34 GMT ETag: "d41d8cd98f00b204e9800998ecf8427e" Accept-Ranges: bytes Server: AmazonS3 Vary: Origin Age: 2632 X-Cache: Hit from cloudfront Via: 1.1 64184371bdc0c4545cde799b5949d17c.cloudfront.net (CloudFront) X-Amz-Cf-Id: 0TmdSyBCGXHdRhFoykbzGJiOG6TN1GbdLkGFn13fUdtDOTc3GIMCZA== El encabezado `Access-Control-Allow-Origin` está presente, tal como se espera. ### Prueba 2.- Origen media, destino yo (`media` -> `yo`) $ curl -I -s -X GET -H "Origin: media.toledano.org" https://yo.toledano.org HTTP/1.1 200 OK Server: nginx/1.10.3 (Ubuntu) Date: Tue, 01 Aug 2017 17:36:26 GMT Content-Type: text/html; charset=utf-8 Content-Length: 19630 Connection: keep-alive Vary: Accept-Encoding Expires: Tue, 01 Aug 2017 17:38:23 GMT Cache-Control: max-age=600 X-Frame-Options: SAMEORIGIN Access-Control-Allow-Origin: * Access-Control-Allow-Origin: toledano.org Access-Control-Allow-Credentials: true Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS Access-Control-Allow-Headers: Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With El encabezado `Access-Control-Allow-Origin` está presente, tal como se espera. ### Prueba 3, Testigo. De Google a yo y a media (`google.com` -> `yo`; `google.com` -> `media`) $ curl -I -s -X GET -H "Origin: google.com" https://yo.toledano.org HTTP/1.1 200 OK # bla bla bla X-Frame-Options: SAMEORIGIN Access-Control-Allow-Origin: * Access-Control-Allow-Origin: toledano.org Access-Control-Allow-Credentials: true Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS Access-Control-Allow-Headers: Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With Ahí están los encabezados... según yo no deberían aparecer... 😳 $ curl -I -s -X GET -H "Origin: google.com" https://media.toledano.org HTTP/1.1 200 OK # bla bla bla X-Cache: Hit from cloudfront Via: 1.1 a658139699129536c4b1341e7df68ce6.cloudfront.net (CloudFront) X-Amz-Cf-Id: qJUhJ8VxTKvX3yU8toi87DNae41F35_HZKB4M7qwUxky_-Aq0Wrdcg== Aquí no están porque CloudFront solo permite al dominio `toledano.org`. ### Consideraciones - El blog está hecho en Django, con el paquete `django-cors-header` y la configuración: `CORS_ORIGIN_ALLOW_ALL = True`. - Uso Nginx como servidor web y agrego este encabezado a las respuestas: `add_header 'Access-Control-Allow-Origin' 'toledano.org';` - El script está alojado en Amazon S3+Cloudfront y el bucket tiene los permiso mas amplios: `<AllowedOrigin>*</AllowedOrigin>` y la conducta de la distribución solo permite el dominio `toledano.org`. ## ¿Qué tengo que hacer para ejecutar en una página AMP el script que se carga en un iframe para obtener el valor buscado? #### Plus: - _¿En qué me estoy equivocando? ¿Cuál es mi error?_ - _¿Cómo funciona CORS?_