please - javascript is required to sign in
IOS 10.3.1 Chrome navegador CORS falla (1)
He estado experimentando un error extraño al hacer solicitudes CORS desde mi sitio web (React app hablando con APIs a través de https). Los errores aparecen solo en IOS 10.3.1 y en el navegador Chrome (57) (safari y webViews están bien). Debido a la falta de herramientas para depurar IOS Chrome, el único registro que tengo es lo que Sentry registra (servicio de terceros). Los errores son variaciones de:
SecurityError Bloquea un marco con origen " https://xxxxxreactapp.com " para que no pueda acceder a un marco con origen " https://xxxxx.fls.doubleclick.net ". Los protocolos, dominios y puertos deben coincidir.
La solicitud específica se dispara desde el Administrador de etiquetas de Google, pero las solicitudes a mi propia API fallan de manera similar (aunque obviamente sin mencionar marcos, pero están relacionados con el origen cruzado).
Un típico saludo de solicitud a mi propia API se ve así:
OPTIONS /jp/plusbus HTTP/1.1
Host: api-xxxxxx.xxx.com
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: POST
Origin: https://xxxxxreactapp.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36
Access-Control-Request-Headers: content-type,x-access-token,x-trace-token
Accept: */*
Referer: https://xxxxxreactapp.com/xxxx/xxx
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en-US,en;q=0.8,el;q=0.6
y la respuesta del servidor a eso:
HTTP/1.0 204 No Content
Connection: close
Content-Type: text/html
Access-Control-Max-Age: 1728000
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET,POST,PUT,DELETE,PATCH
Access-Control-Allow-Headers: DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,X-Access-Token,X-Customer-Token,X-Customer-Device,X-Brand-Id,X-User-Token,X-User-Grant-Token,X-Trace-Token,X-Smartcard-Version,Authorization
Content-Length: 0
Esto describe la interacción entre la aplicación y la API, que tanto controlo, me siento tentado a pensar que algo está mal con mi configuración, pero dos cosas llevan a una conclusión diferente:
- También estoy usando el administrador de etiquetas de Google en el mismo sitio, sus solicitudes también fallan de la misma manera (el GTM usa una configuración estándar de iframe que también intenta la comunicación CROSS-ORIGIN).
- Esta configuración fue estable hasta la última actualización de IOS, todo funciona correctamente en IOS 10.2
ACTUALIZAR
Gestionado para resolver las llamadas de la API, era algo que ver con mi pila de middleware proxy. PERO el problema de terceros todavía no se resuelve.
Todas las herramientas que se basan en iframes para comunicar datos a fuentes externas fallan con el SecurityError Blocked a frame .... antes mencionado SecurityError Blocked a frame .... Eso incluye los pagos de GoogleTagManager y Paypal
Específicamente con respecto al problema del iframe, parece que este error está relacionado con el autocompletado de Chrome. Puede reproducir el error utilizando el código de muestra provisto en el comentario 6 del problema de cromo asociado (vale la pena leerlo todo el tiempo):
<body>
<iframe src="http://example.com">
</iframe>
<script>
window.addEventListener("error", function (e) {
alert("Error occured: " + e.error.message);
return false;
});
</script>
</body>
Si abre esta página en iOS Chrome, aparecerá una alerta con el error anterior. Si va a la Configuración de Chrome, desactiva el autocompletado y vuelve a cargar la página, el error desaparece. Esto se prueba con iOS 10.3.1 y Chrome versión 58.0.3029.113.
No parece haber una solución en este momento, pero parece que el contenido del iframe se carga correctamente incluso con el error. Como tal, no debería haber un impacto perceptible en el usuario final.