Как блокировать сторонние скрипты до получения согласия

Чтобы заблокировать сторонние скрипты до получения согласия, отдавайте их в форме, которую браузер не выполнит, например как тег <script> с type="text/plain", и активируйте их только после того, как посетитель даст согласие на соответствующую категорию. Применяйте то же правило к встроенным фрагментам кода, iframe, пикселям отслеживания и тегам в менеджерах тегов, а затем проверьте результат в чистом браузере, прежде чем на что-либо нажимать.

Почему сторонние скрипты должны ждать согласия?

Потому что большинство из них сохраняют или считывают информацию на устройстве посетителя сразу после запуска, а в ЕС для этого требуется предварительное согласие. Статья 5(3) Директивы ePrivacy требует согласия на сохранение информации на устройстве или доступ к ней, если это не является строго необходимым для услуги, которую пользователь явно запросил.

Скрипты аналитики, рекламы, социальных сетей и многих встраиваемых сервисов устанавливают файлы cookie, считывают хранилище браузера или собирают характеристики устройства сразу после выполнения. В деле Planet49 (C-673/17) Суд ЕС подтвердил, что правило применяется независимо от того, являются ли эти сведения персональными данными, а заранее отмеченные флажки не являются действительным согласием. Баннер, появляющийся, когда трекеры уже работают, этому стандарту не соответствует.

Скрипты, действительно необходимые для работы сервиса, например для оплаты, предотвращения мошенничества или самого инструмента управления согласием, могут загружаться как обычно; см. статью какие файлы cookie считаются строго необходимыми.

Как заблокировать скрипты до получения согласия?

Измените их type. Браузеры загружают и выполняют только скрипты, у которых type указывает на JavaScript или равен module; скрипт с типом text/plain воспринимается как неактивные данные. Сохраните исходные атрибуты и добавьте категорию, чтобы ваш код управления согласием знал, что активировать.

<!-- Неактивны: браузер их не загружает и не выполняет -->
<script type="text/plain" data-consent="analytics"
        src="https://analytics.example.com/script.js"></script>

<script type="text/plain" data-consent="marketing">
  window.adPixel = window.adPixel || [];
  window.adPixel.push(['init', 'PIXEL_ID']);
</script>

<!-- Встраивания: держите настоящий URL в data-src до получения согласия -->
<iframe data-consent="marketing"
        data-src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
        title="Демонстрация продукта" width="560" height="315"></iframe>

Удалите резервные изображения в <noscript>, которые есть во многих фрагментах кода поставщиков. Они отправляют запрос, когда JavaScript отключен, — то есть именно тогда, когда ваш баннер не может появиться, поэтому заблокировать их невозможно.

Как активировать заблокированные скрипты после получения согласия?

Замените каждый неактивный скрипт новым элементом <script>. Изменение атрибута type у существующего элемента не заставит браузер его выполнить, а скрипты, добавленные через innerHTML, не выполняются никогда, поэтому нужен новый элемент, созданный с помощью document.createElement.

function activate(category) {
  document
    .querySelectorAll(`script[type="text/plain"][data-consent="${category}"]`)
    .forEach((inert) => {
      const live = document.createElement('script');
      for (const { name, value } of inert.attributes) {
        if (name !== 'type') live.setAttribute(name, value);
      }
      if (!inert.hasAttribute('async')) live.async = false; // сохраняем порядок вставки
      live.text = inert.text; // встроенный код, если есть
      inert.replaceWith(live);
    });

  document
    .querySelectorAll(`iframe[data-consent="${category}"][data-src]`)
    .forEach((frame) => { frame.src = frame.dataset.src; });
}

// Применяем сохраненный выбор при загрузке; снова вызывайте activate() из обработчиков баннера.
for (const [category, granted] of Object.entries(readStoredConsent())) {
  if (granted) activate(category);
}

На трех деталях часто спотыкаются:

• Порядок. Внешние скрипты, вставленные с помощью JavaScript, по умолчанию выполняются асинхронно — в том порядке, в котором завершается их загрузка. Значение async = false заставляет их выполняться в порядке вставки, что важно, когда одна библиотека зависит от другой.
• Встроенные фрагменты выполняются сразу. Встроенный скрипт выполняется сразу после вставки, не дожидаясь внешних скриптов. Большинство фрагментов кода поставщиков ставят свои вызовы в очередь до загрузки библиотеки, но проверьте любой собственный код, который рассчитывает, что библиотека уже на месте.
• document.write(). Старые фрагменты, которые его вызывают, не будут работать после загрузки страницы. Замените их асинхронными фрагментами от поставщика.

Какой метод блокировки выбрать?

Большинство сайтов сочетают несколько методов, выбирая их в зависимости от того, где размещен каждый тег.

Метод	Лучше всего подходит для	На что обратить внимание
Неактивные теги text/plain	Тегов, жестко прописанных в шаблонах	Нужно отредактировать каждый тег; порядок выполнения
Загрузчик с учетом согласия в вашем коде	SPA и SDK, установленных из npm	SDK, которые инициализируются сразу при импорте
Настройки согласия в менеджере тегов	Команд, управляющих тегами в менеджере тегов	Для каждого тега нужно правильное требование к согласию
Автоматическая блокировка	Крупных устаревших сайтов с множеством жестко прописанных тегов	Должна загружаться синхронно первой; может пропускать или ломать скрипты
Заглушки для iframe	Видео, карт и встраиваемого контента соцсетей	Заглушка должна объяснять, что означает его загрузка

Библиотеки, установленные из npm, никогда не появляются в виде тегов script, поэтому шлюзом служит ваш собственный код. Вызывайте init() SDK только после получения согласия и загружайте его динамическим import(), чтобы до этого он даже не скачивался. Этот подход, а также обработка выбора, меняющегося посреди сеанса, описаны в статье согласие на файлы cookie в одностраничных приложениях.

Для тегов Google есть дополнительный вариант. С Google Consent Mode теги могут загружаться до получения согласия и подстраивать свое поведение под сигналы согласия, а не блокироваться. Подходит ли такая настройка под вашу готовность к риску — отдельный вопрос; см. статью базовый и расширенный режимы согласия.

Как убедиться, что блокировка работает?

Тестируйте как новый посетитель и проверяйте, что на самом деле происходит в сети и в хранилище:

1. Откройте сайт в новом приватном окне из региона, где показывается ваш баннер.
2. Прежде чем на что-либо нажимать, откройте DevTools и проверьте панель Network. Запросов к доменам аналитики или рекламы быть не должно, если только вы сознательно не выбрали настройку, которая их отправляет.
3. На панели Application проверьте файлы cookie, локальное хранилище и хранилище сеанса. Там должны быть только строго необходимые записи.
4. Нажмите «Отклонить все» и убедитесь, что ничего нового не загружается и не сохраняется.
5. В новом сеансе принимайте по одной категории и убеждайтесь, что загружаются только ее скрипты и встраиваемый контент.
6. Повторяйте проверку после каждого релиза, добавляющего тег, и периодически проводите аудит файлов cookie, чтобы выявлять теги, добавленные в обход процесса релизов.

Итоги

Блокировка касается выполнения кода, а не только файлов cookie: как только необязательный скрипт запускается, он может сохранить или считать данные до того, как кто-либо дал согласие. Отдавайте теги в неактивном виде, активируйте их по категориям после получения согласия, так же блокируйте встраиваемый контент и SDK и тестируйте в чистом браузере. Такие инструменты, как Cookiesh, могут автоматизировать этап активации и запускать скрипты с пометкой type="text/plain" data-cookiesh="analytics" только после того, как посетитель даст согласие на эту категорию.

Эта статья носит общий информационный характер и не является юридической консультацией. Для решений, касающихся вашей конкретной ситуации, обратитесь к квалифицированному специалисту по защите данных.