Skip to main content
3 de 4
se eliminaron 8 caracteres en el cuerpo
fredyfx
  • 13.2k
  • 11
  • 33
  • 65

Problemas con CORS en Nginx

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

Edito: esta es una página de prueba: https://yo.toledano.org/desarrollo/agrupar-resultados-con-mysql/amp/

toledano
  • 5k
  • 10
  • 41
  • 66