5

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/


Registro de Intentos

  1. Seguí la sugerencia del comentario de @fredyfx y no funcionó.
  2. 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...

    1. Hice una regex para aceptar mis subdominios: https?://(.*\.toledano\.org)(:[0-9]+)? y si funciona.
    2. 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
      
    3. 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).

2
  • prueba con este header: add_header 'Access-Control-Allow-Origin' '*.toledano.org';
    – fredyfx
    el 1 ago. 2017 a las 18:41
  • Ya lo intenté @fredyfx, y no funcionó. Estoy actualizando mis preguntas con las pruebas que tengo de Nginx.
    – toledano
    el 1 ago. 2017 a las 18:59

2 respuestas 2

1

No logro entender todavía cual es el problema de Access-Control-Allow-Origin pero hay una manera de ejecutar el script de comentarios, lo que resuelve el problema, pero no de la forma esperada, así que esto es mas bien una alternativa de solución.

El problema se resuelve pasándole al script todos los parámetros que necesita en la URL y hacer que los lea de ahí, porque es su propia URL y no los de la ventana madre.

En el blog

Entonces, primeramente vemos que Disqus necesita cuatro parámetros:

  1. shortname - que es el nombre del sitio o foro como ellos lo llaman.
  2. url - que es la URL de la página o entrada o post o artículo
  3. title - que es el título de la página
  4. identifier - que es un identificador único (en mi caso es un UUID, pero puede ser el slug o el id o cualquier campo único).

Todos estos datos van codificados, en Django con el filtro urlencode:'' o con la función urlencode() de PHP.

Con estos parámetros llamo a la página de Disqus. En Django se ve así:

<div class="mb4 px3">
  <amp-iframe
    width="600"
    height=400
    layout="responsive"
    sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
    frameborder="0"
    src="https://disqus.toledano.org/disqus.html?shortname=toledano&url={{ config.SITEURL|urlencode:'' }}{{ article.get_absolute_url|urlencode:'' }}&title={{ article.title|urlencode:''|iriencode }}&identifier={{ article.idx|urlencode:'' }}">
  </amp-iframe>

Que se transforma en:

<div class="mb4 px3">
  <amp-iframe
    width="600"
    height=400
    layout="responsive"
    sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
    frameborder="0"
    src="https://disqus.toledano.org/disqus.html?shortname=toledano&url=https%3A%2F%2Fyo.toledano.org%2Fdesarrollo%2Fagrupar-resultados-con-mysql%2F&title=Agrupar%20resultados%20con%20MySQL&identifier=d09a0882-74a2-4d66-97d8-63e37172a1b4">
  </amp-iframe>
</div>

En el script

Ahora en el script sufrió algunas modificaciones. La documentación oficial dice que necesitamos el objeto disqus_config que se forma así:

var disqus_config = function () {
  this.page.url = window.location;
  this.page.identifier = window.location.hash;
};

Pero como no tenemos acceso a esa información, usaremos un auxiliar.

function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if(pair[0] == variable){return pair[1];}
  }
  return(false);
}

Esta función toma la segunda subcadena de la ubicación, en la línea

var query = window.location.search.substring(1);

y la coloca en la variable query:

cadena 1: https://disqus.toledano.org/disqus.html?
cadena 2: shortname=toledano&url=https%3A%2F%2Fyo.toledano.org%2Fdesarrollo%2Fagrupar-resultados-con-mysql%2F&title=Agrupar%20resultados%20con%20MySQL&identifier=d09a0882-74a2-4d66-97d8-63e37172a1b4

En la siguiente línea:

var vars = query.split("&");

crea un arreglo con dividiendo la cadena query por el ampersand.

En el ciclo for se recorre este arreglo para buscar el valor que contiene la variable indicada.

  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if(pair[0] == variable){return pair[1];}
  }

Regresa false si no encuentra lo que se busca.

Ahora el objeto disqus_config se forma llamando a esta función auxiliar con la variable que se requiere en cada caso:

var disqus_config = function () {
  this.page.url = decodeURIComponent(getQueryVariable("url"));
  this.page.identifier = decodeURIComponent(getQueryVariable("identifier"));
};

La solución está en un caso de GitHub con un ejemplo completo para usarse con el plugin AMP de Auttomatic, por si les interesa.

PD: Sigo sin entender porque no funcionan los encabezados ni eso del CORS.

1

En realidad no es un problema de CORS en Ngnix, sino que es una medida de seguridad implementada por los navegadores que se la conoce como Same-Origin Policy

La política del mismo origen es una medida importante de seguridad para scripts en la parte cliente (casi siempre JavaScript). Esta política viene del navegador web Netscape 2.0, y previene que un documento o script cargado en un "origen" pueda cargarse o modificar propiedades del documento desde un "origen" diferente. Se trata de uno de los conceptos de seguridad más importantes de los navegadores modernos.

La solución que brindan los navegadores para permitir la comunicación entre documentos de diferentes es Window.postMessage().

Asuntos de seguridad

Si no espera recibir mensajes de otros sitios, no agregue ningún evento para eventos de message. Esta es una manera completamente infalible para evitar problemas de seguridad.

Si espera recibir mensajes de otros sitios, compruebe siempre la identidad del remitente utilizando el origin y posiblemente el source de origen. Cualquier ventana (por ejemplo, http://mal.example.com) puede enviar un mensaje a cualquier otra ventana y no tiene garantías de que un remitente desconocido no envíe mensajes maliciosos. Sin embargo, después de verificar la identidad, siempre debe verificar la sintaxis del mensaje recibido. De lo contrario, un agujero de seguridad en el sitio en el que confiaba para enviar sólo mensajes de confianza podría abrir un agujero de secuencias de comandos entre sitios en su sitio.

Ejemplo:

Documento padre:

<iframe id="iframe" src="https://media.toledano.org" sandbox="allow-scripts"></iframe>
<script>
  var iframe = document.getElementById('iframe');

  // Cuando el documento hijo se termina de cargar
  iframe.addEventListener('load', function() {
    var dataIdx = document.getElementById('content').attributes["data-idx"].value;
    iframe.contentWindow.postMessage(dataIdx, 'https://media.toledano.org');
  });

  // OPCIONAL Esperamos la confirmación del documento hijo
  window.addEventListener('message', function (evt) {

    // Se debe verificar el origen del mensaje es de la fuente esperada
    if (evt.origin !== 'https://media.toledano.org') {          
      return ;
    }

    // ACA ... lógica para el proceso de la confirmación
  });
</script>

Documento hijo:

<script>
  // Escuchamos el mensaje del padre
  window.addEventListener('message', function (evt) {
    var dataIdx = evt.data;

    // Se debe verificar el origen del mensaje es de la fuente esperada
    if (evt.origin !== 'https://yo.toledano.org') {          
      return ;
    }

    // OPCIONAL responder que recibimos el mensaje
    evt.source.postMessage('gracias!', evt.origin);

    // ACA ... lógica que requiere el data-idx
  });
</script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.