Как защитить сайт от хулиганских скриптов

У нас есть несколько проектов, в которых мы хулиганим на чужих сайтах: 

Добавляем звуки меча

Добавляем снежинки

Подсвечиваем манипуляции и пропаганду

Все они основаны на одной идее: некий рабочий код встраивается в сайт через консоль и что-то делает в браузере клиента. 

Наши проекты делают безобидные вещи. Но таким же образом можно создавать и довольно злые мошеннические программы, которые могут, например, воровать личные данные пользователя. Одно время это было популярно в социальных сетях: тебе предлагали какой-то код, который (как говорили) покажет, кто был на твоей страничке. А сам этот код воровал твой логин и пароль или отправлял спам по друзьям. 

В этой статье покажем, как защитить свой сайт от этого баловства. 

Основа — технология CSP

Недавно мы уже писали об этой технологии. Кратко суть: 

Включаем CSP на сайте

Включить CSP можно на отдельном документе или на всём сайте сразу. Чтобы не ходить по каждой странице сайта и не вписывать вручную инструкции, можно задействовать механизмы .htaccess.

👉 .htaccess — это системный файл, с помощью которого можно управлять поведением веб-сервера (то есть программой, которая отгружает пользователю страницы вашего сайта). Если прописать что-то в этот системный файл, эти изменения отразятся на поведении всего сервера — например, можно запретить доступ к какой-то папке, задать единую кодировку для всех страниц сайта или, как в нашем случае, прописать CSP.

Чтобы защитить сайт от таких вставок, нужно добавить в файл .htaccess на сервере такие строки:

<ifModule mod_headers.c> 

    Header set Content-Security-Policy «script-src ‘self'» 

</ifModule>

Здесь мы говорим серверу:

Если хотите защиту посильнее, замените script-src на default-src, но тогда все скрипты, стили, картинки и фреймы тоже должны лежать на этом же сервере.

Сам файл .htaccess лежит в корне публичной части сервера. Если его у вас нет — создайте его вручную, работать будет точно так же. В нашем случае он есть, потому что мы уже с ним работали в прошлых проектах:

👉 Файл должен называться именно так: .htaccess, с точкой в начале и без расширения (или, по-другому, без имени и с расширением htaccess). В некоторых системах такой файл создать проблематично, поэтому можно сделать так:

Проверка

Изначально мы не настраивали никакие политики безопасности на сервере, поэтому из консоли мы можем добавить на сайт любой код. Для примера возьмём старый проект со снежинками:

Код для инжекта:

var js = document.createElement('script'); js.src = "https://thecode.media/wp-content/uploads/2019/12/snowfall2020.js"; document.body.appendChild(js);

Открываем .htaccess, вставляем код с политикой безопасности и перезагружаем страницу. Снежинок нет, браузер ругается на чужой скрипт — теперь он выполнять его не будет:

❗️Наличие CSP не означает, что у нас появилась идеальная защита сайта — есть и другие способы внедрить вредоносный код в тело страницы. Но даже то, что мы сделали, уже сильно усложнит задачу злоумышленников.