Содержание показать

Браузеры пользователей часто заражены приложениями, которые подсовывают им во время сёрфинга по сайтам рекламу сомнительного характера (порно, казино, разводы на деньги и пр.). Несмотря на то, что это проблема со стороны пользователя, Яндекс может дать за это фильтр, понизив позиции или вовсе выкинув из индекса.

Даже если от поисковой системы мы санкции не получим, всё равно можем остаться в проигрыше, т.к. недополучаем деньги: наша реклама подменяется чужой рекламой. Симптомы такой проблемы выражаются внешними переходами по ссылкам, которых нет на ваших сайтах. Например:

Внешные переходы

Вообще эта проблема старая. Обсуждается давно на серче. Вот как всё начиналось.

Как с этим бороться? Использовать Content Security Policy! Ведь поставив CSP, мы можем еще и доход повысить, а не только предотвратить возможность схватить фильтр.

Алгоритм действий по настройке CSP:

  1. Создаем предварительное правило CSP.
  2. Подключаем созданное правило для нашего сайта.
  3. Смотрим консоль на наличие ошибок и вносим правки в наше правило CSP.

Изучаем внешние источники

Сперва мы должны создать предварительное правило CSP для нашего сайта. Для этого нам нужно знать, какие именно внешние источники используются у нас на сайте.

Это могут быть:

  • Рекламные скрипты (Google Adsense, Яндекс.Директ, тизеры, баннеры и т.д.);
  • Счетчики посещаемости (Google Analytics, Яндекс.Метрика, Liveinternet и т.д.);
  • Внешние библиотеки (jQuery, шрифты, стили и т.д.);
  • Сторонние видео-плееры (YouTube, Vimeo и т.д.);
  • Картинки, загруженные на сервисы хостинга картинок;
  • Виджеты социальных сетей, лайки, шары.

Ознакомимся с директивами

Правило CSP состоит из директив:

  1. default-src — то, что будет использоваться по умолчанию, если другие спец. директивы не будут указаны (тут можно указать домен нашего сайта, поддомены или другие доверенные ресурсы);
  2. script-src – скрипты (любые скрипты, которые подгружаются с внешних источников);
  3. object-src – объекты Flash и другие;
  4. font-src – шрифты (например, Google Fonts);
  5. frame-src – страницы фреймов (например, YouTube);
  6. img-src – изображения;
  7. style-src – разрешаем таблицы CSS стилей;
  8. media-src – аудио и видео-контент;
  9. connect-src – вебсокеты;
  10. report-uri – здесь можно указать URL, на который будет отсылаться отчет об ошибках в формате JSON.

Четыре ключевых слова, которые могут быть использованы в директивах (списке источников):

  1. none – ничего (запрет);
  2. self — соответствует текущему источнику, но не его поддоменам (можно указать вместо явного указания нашего домена);
  3. unsafe-inline — разрешает использовать инлайновые JS и CSS;
  4. unsafe-eval разрешает использовать eval.

Далее, просмотрев код нашего сайта, мы начинаем создавать предварительное правило CSP.

Создаем тестовое правило CSP

Тестовое правило Content-Security-Policy для любого сайта будет выглядеть так:

default-src 'self'; script-src 'self' 'unsafe-inline' *.yandex.ru; img-src *; style-src 'self' 'unsafe-inline' fonts.googleapis.com; frame-src 'self' www.youtube.com

Разберем подробней:

  • default-src ‘self’; – по умолчанию разрешен наш домен;
  • script-src ‘self’ ‘unsafe-inline’ *.yandex.ru; — разрешен наш домен, инлайновые JS и любые поддомены Яндекса(*.yandex.ru);
  • img-src *; — разрешены все картинки;
  • style-src ‘self’ ‘unsafe-inline’ fonts.googleapis.com; — разрешен наш домен, инлайновые CSS и шрифты от Google (WP их использует для админки, тем и прочего, еще Adsense их применяет);
  • frame-src ‘self’ www.youtube.com – разрешен наш домен, разрешен YouTube.

Важные заметки:

  1. В некоторых версиях браузеров необходимо создавать отдельное правило с явным указанием протокола HTTPS (если сайт его использует), т.е. кроме vk.com, через пробел дописать: https://vk.com.
  2. ‘self’ — домен самого сайта, поддомены не учитываются, можно явно указать site.ru;
  3. *.site.ru — пример добавления любого поддомена для site.ru
  4. * — любой домен;

Теперь подключаем наше правило.

Подключаем правило CSP к сайту

Существует несколько способов подключить правила CSP к сайту. Рассмотрим самые распространённые из них:

  1. С помощью файла .htaccess

Вставляем в него следующий код:

<ifModule mod_headers.c>

Header set Content-Security-Policy "_____"

</IfModule>
  1. С помощью тега meta в секции head (понимают не все браузеры)

В коду между строчками <head> и </head> вставляем:

<meta http-equiv="Content-Security-Policy" content="_____" />
  1. Вариант для WP

В файле functions.php после кода

<?php

вставляем:

add_action ('template_redirect', 'add_content_security_policy');
function add_content_security_policy() {
$csp = "______";
header ('Content-Security-Policy: '. $csp);
}
  1. Вариант для DLE, LiveStreet и других CMS

Открываем файл index.php, который лежит в корне сайта. После строчки:

<?php

вставляем следующей код:

$csp = "Content-Security-Policy: _____";
header($csp);

*Во всех примерах, нижние пробелы (_____) нужно заменить на правило.

На своих сайтах я использую два последних варианта.

Вставив правило открываем консоль браузера и смотрим, отдает ли наш сервер заголовок Content-Security-Policy. Сделать это можно в Опере:

  • Зажмите сочетания клавиш Ctrl+Shift+C;
  • Откройте вкладку Network;
  • В левой колонки выберите URL страницы.

Для наглядного примера взял свой блог 9seo.ru:

Консоль 9SEO.ru

Правило заработало! Значит идём дальше.

Исправляем ошибки

Теперь начинается монотонный, немного нудный процесс поиска ошибок и их исправления. Для этого я использовал опять же Оперу (либо можно использовать плагин для ФФ — Firebug). Открываем консоль ошибок браузера (Ctrl+Shift+C) и наблюдаем такую картинку:

Ошибка script-src

Дальше нам нужно перенести все заблокированные домены в соответствующую секцию нашего правила, как понятно из текста ошибки – это script-src. Вносим правки в правило, обновляем код и смотрим, что у нас получилось.

Ошибки в Content-Security-Policy

Часть ошибок пропала, но вылезли новые. Это связано с тем, что некоторые скрипты после того, как мы их разблокируем, могут подгружать дополнительные.

Как видно на скриншоте, ошибки связаны с unsafe-eval (использует наш jQuery) для script-src и секцией frame-src. Обновим наше правило.

Ошибка в connect-src

Последняя ошибка связана с секцией connect-src, добавим данную секцию в наше правило и внесем домен mc.yandex.ru (можно просто *.yandex.ru).

Финальная версия нашего CSP

default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' userapi.com https://vk.com vk.com https://wprp.zemanta.com https://graph.facebook.com connect.facebook.net apis.google.com https://cdn.api.twitter.com *.yandex.ru; img-src * data: ; style-src 'self' 'unsafe-inline' fonts.googleapis.com; frame-src https://vk.com vk.com *.facebook.com www.youtube.com www.youtube-nocookie.com; connect-src 'self' *.yandex.ru

Ошибок может быть в разы больше, поэтому нужно ещё «походить» по сайту с открытой консолью и понаблюдать за возможными ошибками. Кроме того, проверить на ошибки лучше в нескольких браузерах, например, ещё в Google Chrome.

Результаты

Результат настройки CSP на одном моем сайте:

Результат настройка CSP

И вот результат моего коллеги:

Результат коллеги по настройке CSP

Как видите, переходов на «левые» сайты теперь стало гораздо меньшеsmile

Был ли пост полезен?
Да 2 Нет 2