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 dominiotoledano.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?
Edito: esta es una página de prueba: https://yo.toledano.org/desarrollo/agrupar-resultados-con-mysql/amp/
Registro de Intentos
- Seguí la sugerencia del comentario de @fredyfx y no funcionó.
Como tengo la idea que el problema es con Nginx hice esta prueba: a) verificar si el origen está en la lista blanca; b) si está activar una variable; c) si está activa la variable, activar los encabezados...
- Hice una regex para aceptar mis subdominios:
https?://(.*\.toledano\.org)(:[0-9]+)?
y si funciona. Agrego este código a la configuración de Nginx:
set $cors ''; if ($http_origin ~ 'https?://(localhost|127\.0\.0\.1|.*\.toledano\.org)(:[0-9]+)?') { set $cors '1'; }
y agrego unos encabezados de prueba...
add_header 'nSpaces-Origen' "$http_origin"; add_header 'nSPaces-CORS' "$cors";
y la prueba es correcta, veo el encabezado
nSpaces-CORS
...$ curl -I -s -X GET -H "Origin: https://media.toledano.org" https://yo.toledano.org HTTP/1.1 200 OK # bla bla bla Access-Control-Allow-Origin: * nSpaces-Origen: https://media.toledano.org nSPaces-CORS: 1
Entonces agrego este fragmento, para activar el resto de los encabezados...
if ($cors = '1') { add_header 'Access-Control-Allow-Origin' "$http_origin"; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With'; }
y la prueba ¡ya no funciona! (El resultado es el mismo que el de 2.1).
- Hice una regex para aceptar mis subdominios: