Меню

Установка счетчика Яндекс.Метрики на сайт с Content Security Policy (CSP)

Просмотров: 169

Если на вашем сайте не отображаются данные о кликах и скроллинге в Яндекс.Метрике, вероятнее всего, это связано с настройками Content Security Policy (CSP). Ошибка возникает из-за того, что скрипт Яндекс.Метрики загружается динамически, и если политика CSP не позволяет это делать, то скрипт блокируется. В случае с Яндекс.Метрикой важно, чтобы в CSP был указан правильный источник и использовался механизм nonce (одноразовый случайный ключ).

Content Security Policy.jpeg
CSP — это механизм безопасности, который позволяет указать браузеру, какие ресурсы могут быть загружены на сайте. Когда CSP настроена слишком строго, она может блокировать выполнение некоторых скриптов, включая те, которые необходимы для работы Яндекс.Метрики.

Решение проблемы с CSP и Яндекс.Метрикой

Для того чтобы всё заработало корректно, нужно немного адаптировать настройки CSP и скрипт Яндекс.Метрики. В частности, нужно сгенерировать случайную строку (nonce) при каждом запросе страницы и использовать её как в заголовке CSP, так и в атрибуте nonce для скрипта Яндекс.Метрики.

Чтобы сгенерировать уникальный nonce для каждой страницы, используем функцию random_bytes, которая генерирует случайные байты, и затем преобразуем их в строку в формате hex.

Пример кода, который нужно добавить в файл header.php:

$nonce = bin2hex(random_bytes(26)); // Генерация случайной строки длиной 26 байт
header("Content-Security-Policy: script-src 'nonce-$nonce'");

Теперь нужно обновить скрипт Яндекс.Метрики так, чтобы в атрибут nonce попадала ранее сгенерированная строка. Это делается следующим образом:

<script data-skip-moving="true" nonce="<? echo $nonce; ?>">
    (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();
        for (var j = 0; j < document.scripts.length; j++) {
            if (document.scripts[j].src === r) {
                return;
            }
        }
        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(ВАШ_КОД_СЧЕТЧИКА_ЯНДЕКС_МЕТРИКИ, "init", {
        clickmap: true,
        trackLinks: true,
        accurateTrackBounce: true,
        webvisor: true,
        ecommerce: "dataLayer"
    });
</script>

Здесь в атрибут nonce добавляется значение переменной $nonce, которое было сгенерировано на сервере. Это гарантирует, что скрипт будет загружен и выполнен только в том случае, если его nonce совпадает с тем, что указан в заголовке CSP.

  • Убедитесь, что ваш сервер поддерживает заголовки CSP и они корректно настраиваются.
  • Каждый раз при загрузке страницы генерируется новый случайный nonce.
  • Этот nonce добавляется как в заголовок CSP, так и в атрибут nonce скрипта Яндекс.Метрики.
  • Браузер проверяет, что значение nonce в заголовке CSP совпадает с атрибутом nonce в скрипте. Если они совпадают, то скрипт разрешается для выполнения.
  • Таким образом, безопасность сохраняется, а Яндекс.Метрика работает корректно, собирая данные о кликах и скроллинге.

Такой подход позволяет сохранить высокий уровень безопасности и при этом не терять в функциональности, что важно для анализа поведения пользователей на сайте.

Михаил Базаров 17.11.2024
img-src — для разрешения обработки содержимого элемента noscript.

Content-Security-Policy: img-src
connect-src — для подключения к Яндекс Метрике.

Content-Security-Policy: connect-src
child-src с указанием строки blob: mc.yandex.ru для правильной работы Вебвизора, карт

кликов, ссылок и скроллинга.
Content-Security-Policy: child-src blob:
frame-src с указанием строки blob: mc.yandex.ru для правильной работы Вебвизора, карт

кликов, ссылок и скроллинга.
Content-Security-Policy: frame-src blob:


Пример HTTP-заголовка при использовании данного способа:
Код
 ...
 img-src mc.yandex.ru;
 script-src mc.yandex.ru https://yastatic.net 'nonce-<последовательность символов>';
 connect-src mc.yandex.ru;
 ...

Стоимость и сроки разработки сайтов и приложений

Окончательная стоимость и сроки разработки сайта формируются после обсуждения деталей на этапе заказа. Как правило, они редко выходят за обозначенные ниже рамки.

Интернет магазин: разработка с нуля от 400 000 руб.
от 5-ти недель

Cоздание интернет-магазина на 1С-Битрикс. Разработка с нуля, оптимизация кода под конкретный проект и требования. Реализация любого функционала без ограничений готовых решений.

Сайт на готовом решении / шаблоне от 150 000 руб.
от 7-ми дней

Готовое решение — вариант для тех, кто не хочет тратить много средств на индивидуальный проект, и не имеет серьезных требований к сайту. Запускается на одном из 200-та (на ваш выбор) готовых решений.

Мобильное приложение от 400 000 руб.
от 1-го месяца

Разработка кроссплатформенного мобильного приложения, которое не уступает нативным решениям как в производительности, так и пользовательском опыте. Публикуется в AppStore, GooglePlay и RuStore

Вы можете скачать развернутый опросник на разработку. После ознакомления, задам уточняющие вопросы и оценю проект по стоимости и срокам разработки.