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

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

Если на вашем сайте не отображаются данные о кликах и скроллинге в Яндекс.Метрике, вероятнее всего, это связано с настройками 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 в скрипте. Если они совпадают, то скрипт разрешается для выполнения.
  • Таким образом, безопасность сохраняется, а Яндекс.Метрика работает корректно, собирая данные о кликах и скроллинге.

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

Стоимость разработки на 1С-Битрикс:

Индивидуальная разработка магазина

от 400 000 руб. от 5-ти недель

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

Запуск сайта на готовом решении

от 100 000 руб. от 7-ми дней

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

Мобильное приложение

от 400 000 руб. от 1-го месяца

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

Сайт компании

от 250 000 руб. от 1-го месяца

Корпоративный сайт с информационными разделами, каталогом товаров или услуг. Включает формы обратной связи карточек каталога, любое количество статичных и динамичных разделов.

Инфресурс

от 300 000 руб. от 5-ти недель

Информационный ресурс любой сложности. Сайт для СМИ, городской портал или многопользовательская доска объявлений. Внутренние форумы, блоги- по необходимости.

Лечение сайтов от вирусов

от 30 000 руб. от 2-х дней

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