Всего в каталоге: 234 компании
Сравнить (0)

Настройка CSP (Content Security Policy) на Wordpress, Joomla и других CMS

Время чтения: 46 минут

1079 0

Настройка CSP, особенно на популярных CMS, таких как Wordpress, очень важно, так как пользователь у которого находятся вирусы на компьютере может навредить вашему сайту. Яндекс регулярно следит за вашем сайтом и подгружает то, что видит пользователь и если он зафиксирует слова из черного списка, а это порно, казино… Яндекс спокойно может добавить ваш сайт в черный список.

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

Примечание: Как вычислить нашествие вредоносных пользователей? А симптомы такой проблемы очевидны, в метрике вам необходимо проверить есть ли в вашей истории переходы на страницы, которых нет на вашем сайте. То есть и Яндекс и Google фиксируют переходы на другие сайты и считают, что именно вы размещаете эти ссылки. Что вы сможете увидеть в метрике:

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

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

1. Создаем предварительное правило CSP.

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

3. Смотрим консоль на наличие ошибок и вносим правки в наше правило CSP.

Content-Security-Policy для любого сайта


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

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

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

• Рекламные скрипты (GoogleAdsense, Яндекс.Директ, тизеры, баннеры и т.д.);
• Счетчики посещаемости(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>

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

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

<meta http-equiv="Content-Security-Policy" content="_____" />

3. Вариант для WP

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

<?php

вставляем:

add_action ('template_redirect', 'add_content_security_policy');

function add_content_security_policy() {

$csp = "______";

header ('Content-Security-Policy: '. $csp);

}

4. Вариант для DLE, LiveStreet и других CMS

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

<?php

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

$csp = "Content-Security-Policy: s____";

header($csp);

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

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

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

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

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

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

Часть ошибок пропала, но вылезли новые. Это связано с тем, что некоторые скрипты после того, как мы их разблокируем, могут подгружать дополнительные.
Как видно на скриншоте, ошибки связаны с unsafe-eval (использует наш jQuery) для script-src и секцией frame-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.

В принципе вы можете избежать этого, так как на большенства проверенных хостеров, этот пункт стоит по умолчанию настроенным. 


Оцените, пожалуйста, статью по пятибальной шкале, при анализе мы учтём ваше мнение и станем чуть лучше:
  Рейтинг статьи: 5.0
Узнайте об акциях и отзывах первыми в нашей группе