javascript - site - Google analytics.js y Política de Seguridad de Contenido
send pageview google analytics (3)
Tengo una aplicación web que utiliza la política de seguridad de contenido predeterminada html5boilerplate.
Sin embargo, tenemos el nuevo fragmento de Google analytics.js en la página, que está siendo bloqueado por el CSP.
He estado tratando de encontrar un ejemplo de una estructura de inclusión CSP y JS que permita Google analytics.js, pero no he tenido suerte.
La publicación de SO más cercana es el encabezado de Google Analytics y Content-Security-Policy , pero este es el uso de ga.js.
Desafortunadamente los Google Docs no mencionan CSP.
Sin embargo, he llegado a la siguiente solución:
Parte inferior de mi archivo html:
<script type="text/javascript" src="/js/analytics.js"></script>
Contenido de analytics.js:
(function(i,s,o,g,r,a,m){i[''GoogleAnalyticsObject'']=r;i[r]=i[r]||function()
{ (i[r].q=i[r].q||[]).push(arguments)}
,i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g; m.parentNode.insertBefore(a,m)
})(window,document,''script'',''//www.google-analytics.com/analytics.js'',''ga'');
ga(''create'', ''UA-XXXXXXXX-1'', ''auto'');
ga(''send'', ''pageview'');
.htaccess CSP:
Header set Content-Security-Policy "script-src ''self'' https://ssl.google-analytics.com http://www.google-analytics.com; object-src ''self''"
Esto funciona, pero no estoy seguro si habré roto la naturaleza asíncrona del código GA, o haber causado alguna otra consecuencia involuntaria.
¿Alguien puede recomendar la forma correcta de permitir que Google analytics.js a través de una Política de seguridad de contenido?
Edición del autor: al final, utilicé la solución detallada en el encabezado de Google Analytics y Content-Security-Policy , volviendo a ga.js. Pero todavía me gustaría saber si es posible usar analytics.js de la misma manera.
Author Edit 2: Parece que puede ser posible usando analytics.js directamente de Google y los mismos principios que el otro post de SO:
Parte inferior del archivo HTML:
<script type="text/javascript" src="https://ssl.google-analytics.com/analytics.js"></script>
<script type="text/javascript" src="/js/analytics.js"></script>
Contenido de analytics.js:
ga(''create'', ''UA-XXXX-Y'', ''auto'');
ga(''send'', ''pageview'');
CSP:
Header set Content-Security-Policy "script-src ''self'' https://www.google-analytics.com https://ssl.google-analytics.com; object-src ''self''"
Esto no se ha probado. No he comprobado si Google Analytics está recibiendo datos, pero no hay errores de consola ni de CSP. Dedos cruzados.
Parece que tiene la configuración de encabezados CSP en su aplicación web, donde los dominios de Google Analytics aún no están en la lista blanca. Todas las solicitudes que el cliente realiza a dominios externos deben estar explícitamente en la lista blanca. (Esta es una buena referencia: https://hacks.mozilla.org/2016/02/implementing-content-security-policy/ ).
Los errores de CSP que ve en la consola del navegador son bastante descriptivos sobre lo que tiene que ser incluido en la lista blanca en su encabezado de CSP.
Por ejemplo, para este caso,
Se negó a cargar la imagen '' https://www.google.co.in/ ...'' porque viola la siguiente directiva de Política de seguridad de contenido: "img-src".
Esto solucionaría el error:
img-src https://www.google.co.in <other-domains>
Tu solución .htaccess debe ser correcta.
¿Por qué debería frenar la naturaleza asíncrona (del lado del cliente)?
en la consola del navegador verá qué solicitudes están bloqueadas de los hosts, si hay alguna solicitud bloqueada de gugl mientras navega por la página, puede agregar el nombre de host a su configuración de políticas
Utilizando la forma alternativa descrita en https://developers.google.com/analytics/devguides/collection/analyticsjs/ ayudó. Es muy parecido a OP descrito en la segunda edición, puede usar un script en línea personalizado en el que aplique un nonce o externalizar el contenido del script en línea en un script separado, como sugirió OP. No olvide el atributo asíncrono en la etiqueta de script que hace referencia a analytics.js.
Usando este método, no habrá errores / advertencias ya que no se inyectan scripts a su html.
Aquí está la parte relevante del enlace que publiqué:
Fragmento de seguimiento asíncrono alternativo
Si bien el fragmento de seguimiento de JavaScript descrito anteriormente garantiza que el script se cargará y ejecutará de forma asíncrona en todos los navegadores, tiene la desventaja de no permitir que los navegadores modernos carguen el script con anterioridad.
El fragmento de seguimiento asíncrono alternativo a continuación agrega soporte para la precarga, que proporcionará un pequeño aumento de rendimiento en los navegadores modernos, pero puede degradarse a la carga y ejecución síncronas en IE 9 y los navegadores móviles más antiguos que no reconocen el atributo de script asíncrono. Utilice este fragmento de seguimiento solo si sus visitantes utilizan principalmente navegadores modernos para acceder a su sitio.
<!-- Google Analytics -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga(''create'', ''UA-XXXXX-Y'', ''auto'');
ga(''send'', ''pageview'');
</script>
<script async src=''https://www.google-analytics.com/analytics.js''></script>
<!-- End Google Analytics -->