Установка счетчика на сайт с 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';
```
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 — для подключения к доменам Рейтинга Mail.ru.
```
Content-Security-Policy: connect-src https://top-fwz1.mail.ru;
```
style-src — для разрешения вставки стилей, функционал определения наличия блокировки рекламы.
```
Content-Security-Policy: style-src 'unsafe-inline';
```
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:
 ...
 script-src 'unsafe-inline' https://top-fwz1.mail.ru;
 img-src https://top-fwz1.mail.ru;
 connect-src https://top-fwz1.mail.ru;
 style-src 'unsafe-inline';
 frame-src blob: https://top-fwz1.mail.ru;
 ...

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

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

Если вы используете этот способ, HTTP-заголовок Content-Security-Policy или Content-Security-Policy-Report-Only должен иметь общий набор директив, описанных выше, за исключением 'unsafe-inline' и 'nonce-<base64-value>' в script-src.

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

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

В интерфейсе Рейтинга Mail.ru перейдите в раздел Код счетчика и скопируйте из поля содержимое элемента script.
Добавьте этот код в файл top_mail_ru.js.
Чтобы счетчик собирал данные о посетителях, у которых отключен 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>
```