Установка счетчика на сайт с CSP

Код счетчика Рейтинга Mail.ru необходимо размещать внутри HTML-кода страниц. Если ваш сайт использует технологию Content Security Policy, то такой код будет работать только в случае, если браузеру в HTTP-заголовке будет передаваться разрешение на обработку данных.

Код счетчика Рейтинг Mail.ru состоит из двух частей: javascript код внутри тега script и пиксель внутри элемента noscript. Рейтинг Mail.ru допускает несколько способов подключения javascript кода счетчика: можно разместить в HTML-коде страниц только содержимое элемента noscript, а содержимое элемента script разместить как есть с добавлением разрешения или вынести во внешний скрипт (например, в js-файл).

После размещения кода необходимо добавить в HTTP-заголовок разрешение на обращение к Рейтингу Mail.ru.

Размещение кода счетчика в HTML-коде страниц сайта

Если вы используете этот способ, HTTP-заголовок Content-Security-Policy или Content-Security-Policy-Report-Only должен содержать директивы:

  • script-src — для разрешения обработки содержимого элемента script.

    Content-Security-Policy: script-src 'nonce-<base64-value>';
    

    Последовательность <base64-value> также надо разместить в теге script следующим образом:

    <script type="text/javascript" nonce="<base64-value>">  
    var _tmr = window._tmr || (window._tmr = []);  
    ...
    
  • script-src — альтернативный вариант для разрешения обработки содержимого элемента script, если вариант с nonce-<base64-value> вызывает сложности.

    Content-Security-Policy: script-src 'unsafe-inline';
    
  • img-src — для разрешения обработки содержимого элемента noscript.

    Content-Security-Policy: img-src https://top-fwz1.mail.ru;
    
  • connect-src — для подключения доменам Рейтинга Mail.ru.

    Content-Security-Policy: connect-src https://top-fwz1.mail.ru;
    

Пример HTTP-заголовка при использовании данного способа:

Content-Security-Policy:
 ...
 img-src https://top-fwz1.mail.ru;
 connect-src https://top-fwz1.mail.ru;
 ...

Внимание: при размещении многострочного содержимого Content-Security-Policy перед каждой новой строкой img-src, script-src должен стоять один пробел.

Подключение кода счетчика с помощью внешнего скрипта

Если вы используете этот способ, HTTP-заголовок Content-Security-Policy или Content-Security-Policy-Report-Only может иметь общий набор директив, включая правила для загрузки данных от счетчика:

  • script-src — для разрешения обработки скриптов.

    Content-Security-Policy: script-src https://top-fwz1.mail.ru
    
  • img-src — для разрешения обработки содержимого элемента noscript.

    Content-Security-Policy: img-src https://top-fwz1.mail.ru;
    
  • connect-src — для подключения счетчика.

    Content-Security-Policy: connect-src https://top-fwz1.mail.ru;
    
  • frame-src с указанием строки blob: https://top-fwz1.mail.ru для отправки e-commerce данных.

    Content-Security-Policy: frame-src blob: https://top-fwz1.mail.ru;
    

Пример HTTP-заголовка при использовании данного способа:

Content-Security-Policy:
 ...
 img-src https://top-fwz1.mail.ru;
 script-src 'self' https://top-fwz1.mail.ru;
 connect-src top-fwz1.mail.ru;
 ...

Пример подключения JavaScript-кода во внешнем js-файле представлен ниже. В HTML-код страниц сайта необходимо добавить только элемент script с атрибутом src. Этот атрибут должен содержать путь к файлу (например, top_mail_ru.js).

<script type="text/javascript" src="/top_mail_ru.js"></script>
  1. В интерфейсе Рейтинга Mail.ru перейдите в раздел Код счетчика и скопируйте из поля содержимое элемента script.

  2. Добавьте этот код в файл top_mail_ru.js.

  3. Чтобы счетчик собирал данные о посетителях, у которых отключен JavaScript, добавьте в HTML-код страниц сайта элемента noscript вместе с содержимым (вместо XXXXXX введите ID вашего счетчика):

    <noscript><div><img src="https://top-fwz1.mail.ru/counter?id=XXXXXX;js=na" style="border:0;position:absolute;left:-9999px;" alt="Top.Mail.Ru" /></noscript>