Instalación de una etiqueta en un sitio con CSP

El código de la etiqueta generado por Yandex Metrica está destinado para inserción en línea en el código HTML de las páginas. En sitios que utilizan la tecnología Content Security Policy, este código no se ejecutará al menos que se sigan pasos específicos. En particular, tendrá que usar un encabezado HTTP para otorgar permiso al navegador y que pueda procesar datos. El encabezado HTTP debe incluir la directiva src-script con el atributo nonce (esto requiere firmar el contenido del elemento script) y la directiva img-src para procesar el contenido del elemento noscript.

Además, Yandex Metrica ofrece otra forma de habilitar el código de etiqueta: colocando solo el contenido del elemento noscript en el código HTML de las páginas y moviendo el contenido del elemento script a un script externo (por ejemplo, a un archivo JS).

Más allá del método elegido, debe modificar el encabezado HTTP para agregar permiso de acceso a Yandex Metrica.

Insertando el código de la etiqueta en el código HTML de las páginas del sitio

Si quiere usar este método, el encabezado HTTP Content-Security-Policy o Content-Security-Policy-Report-Only debe contener las siguientes directivas:

• script-src con el atributo nonce. Este atributo debe contener un valor de cadena con una secuencia de caracteres aleatoria (números y letras del alfabeto latino). Este valor debe generarse de forma aleatoria en el servidor de manera individual para cada solicitud.

  Content-Security-Policy: script-src 'nonce-<character sequence>';
  

  La misma secuencia de caracteres debe estar contenida en el atributo nonce en el elemento script para el código de la etiqueta en las páginas del sitio.

  ...
  <!-- Yandex.Metrika counter -->
  <script type="text/javascript" nonce="<secuencia de caracteres>">
      (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||
      []).push(arguments)};
  ...
  

• img-src para permitir el procesamiento del contenido de los elementos noscript.

  Política de seguridad de contenido: img-src https://mc.yandex.ru;
  

• connect-src para conectar con Yandex Metrica.

  Política de seguridad de contenido: connect-src https://mc.yandex.ru;
  

• child-src con la cadena blob: https://mc.yandex.ru para que la Reproducción de Sesión, el mapa de clics, el mapa de enlaces y el mapa de desplazamiento funcionen correctamente.

  Política de seguridad de contenido: child-src blob: https://mc.yandex.ru;
  

• frame-src con la cadena blob: https://mc.yandex.ru para que la Reproducción de sesión, el mapa de clics, el mapa de enlaces y el mapa de desplazamiento funcionen correctamente.

  Política de seguridad de contenido: frame-src blob: https://mc.yandex.ru;
  

• frame-ancestors con la cadena blob: https://mc.yandex.ru para que la Reproducción de Sesión, el mapa de clics, el mapa de enlaces y el mapa de desplazamiento funcionen correctamente.

  Política de seguridad del contenido: frame-ancestors blob: https://mc.yandex.ru;
  

Ejemplo del encabezado HTTP al usar este método:

Content-Security-Policy:
 ...
 img-src https://mc.yandex.ru;
 script-src https://mc.yandex.ru https://yastatic.net 'nonce-<character sequence>';
 connect-src https://mc.yandex.ru;
 ...

Usando un script externo para conectar el código de la etiqueta

Si usa este método, el encabezado HTTP Content-Security-Policy o Content-Security-Policy-Report-Only puede tener un conjunto general de directivas, incluidas reglas para cargar datos de Yandex Metrica:

• script-src para permitir que los scripts se procesen.

  Política de seguridad del contenido: script-src https://mc.yandex.ru https://yastatic.net;
  

• img-src para permitir el procesamiento del contenido de los elementos noscript.

  Política de seguridad de contenido: img-src https://mc.yandex.ru;
  

  Copiado

• connect-src para conectar con Yandex Metrica.

  Política de seguridad de contenido: connect-src https://mc.yandex.ru;
  

• child-src con la cadena blob: https://mc.yandex.ru para que la Reproducción de Sesión, el mapa de clics, el mapa de enlaces y el mapa de desplazamiento funcionen correctamente.

  Política de seguridad de contenido: child-src blob: https://mc.yandex.ru;
  

  Copiado

• frame-src con la cadena blob: https://mc.yandex.ru para que la Reproducción de sesión, el mapa de clics, el mapa de enlaces y el mapa de desplazamiento funcionen correctamente.

  Política de seguridad de contenido: frame-src blob: https://mc.yandex.ru;
  

  Copiado

Ejemplo del encabezado HTTP al usar este método:

Política de seguridad del contenido:
 ...
 img-src https://mc.yandex.ru;
 script-src 'self' https://mc.yandex.ru https://yastatic.net;
 connect-src https://mc.yandex.ru;
 ...

El ejemplo a continuación habilita el código JavaScript en un archivo JS externo. Solo el elemento script con el atributo src necesita ser agregado al código HTML de las páginas del sitio. Este atributo debe contener la ruta al archivo (por ejemplo, metrika.js).

<script type="text/javascript" src="/metrika.js"></script>

1. En la interfaz de Yandex Metrica, vaya a Configuración > Etiqueta y copie el contenido del elemento script del campo.

2. Agregue este código al archivo metrika.js.

   Ejemplo de contenidos del archivo

   (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||
   []).push(arguments)};
       m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)
   [0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
       (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym")
       ym(XXXXXX, "init", {
           id:XXXXXX,
           clickmap:true,
           trackLinks:true,
           accurateTrackBounce:true
       });
   

   Donde XXXXXX es un número de etiqueta de Yandex Metrica.

   Copiado

3. Para que la etiqueta recopile datos sobre usuarios que tienen JavaScript deshabilitado, agregue el contenido del elemento noscript al código HTML de las páginas del sitio:

   <noscript><div><img src="https://mc.yandex.ru/watch/XXXXXX" style="position:absolute; left:-9999px;" alt="" /></div></noscript> 
   

   Copiado

Chatee con nosotros