Практически все о безопасности браузера для начинающих, часть 1

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

Необходимые знания: основы HTML и Как работает HTTP-запрос.

1. Заголовок Http Strict Transport Security (HSTS)

HSTS сообщает браузеру, что он всегда должен подключаться через HTTPS, даже для первоначального запроса. HSTS легко включить на веб-странице, но в то же время его легко упустить из виду. Если злоумышленники пытаются изменить HTTPS на HTTP, он автоматически перенаправляется на https, если HSTS включен.

Например

Если HSTS не включен

Если мне удалось изменить HTTPS на HTTP и подключить его к странице администратора сайта через незашифрованный канал, то злоумышленники смогут выполнять различные типы атак на веб-страницу.

2. Заголовок X-Frame-Options

Чтобы понять заголовок параметров X-Frame, вам необходимо знать об Iframe. Iframe - это один из HTML-тегов, который позволит вам отображать различные веб-страницы внутри вашей веб-страницы, такие как Instagram и Youtube.

Попробуйте пример скрипта iframe!

‹! DOCTYPE html›
‹html›
‹head›
‹style›
h3 {text-align: center; размер шрифта: 50 пикселей; цвет: красный;}
p {размер шрифта: 20 пикселей; цвет: зеленый; font-weight: bold;}
‹/style›
‹/head›
‹body style =” background-color: # f0f8ff ”›
‹h4› На этой веб-странице , используя iframe, я проигрываю две видео песни в разных доменах ‹/h4›
‹iframe width =” 555 'height = ”333' src =” https: // www. youtube.com/embed/WSTjCLAccess-Control-Allow-OriginMQ 'frameborder =» 0' allow = »акселерометр; Автовоспроизведение; зашифрованные медиа; гироскоп; картинка в картинке ”allowfullscreen style =” padding: 20px; ”› ‹/iframe›

‹iframe width =” 555 'height = ”333' src =” https://www.instagram.com/p/BwZwaReBKod/embed 'frameborder = ”0' allow = ”Акселерометр; Автовоспроизведение; зашифрованные медиа; гироскоп; картинка в картинке ”style =” padding: 20px; ”›› ‹/iframe›

‹/body›
‹/html›

При использовании другого домена на своей странице существует вероятность атаки кликджекинга. Обычно кликджекинг выполняется путем отображения невидимой страницы или элемента HTML t внутри iframe вверху страницы, которую видит пользователь. Пользователь считает, что он нажимает на видимую страницу, но на самом деле он щелкает невидимый элемент на дополнительной странице, транспонированной поверх него.

Чтобы избежать атак с использованием кликджекинга, нам необходимо указать X-Frame-Options в теге заголовка.

X-Frame-Options: директива

Распространенные директивы:

• deny: эта директива запрещает отображение сайта в ‹frame›, т. е. сайт не может быть встроен в другие сайты.
• same-origin: Эта директива позволяет отображать страницу во фрейме, если фрейм имеет то же происхождение, что и страница.

Включенный X-Frame-Options header - это хорошо, но лучший способ смягчить атаки Iframes - использовать фиксатор кадра CSP.

content-Security-policy: frame-ancestors ‘self’

3. Политика одинакового происхождения

Прежде всего, что такое Origin? Источник определяется как комбинация трех частей: протокола, имени хоста и номера порта.

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

Теперь давайте рассмотрим веб-страницу, размещенную по адресу https://www.test1.com/admin. Внутри этой веб-страницы находится iframe, загружающий другой веб-сайт. страница. Наш исходный хост определяется как https://www.test1.com.

В приведенной ниже таблице столбец URL-адресов описывает полные URL-адреса, которые мы хотели бы получить, а также то, доступны ли они в соответствии с политикой одинакового происхождения:

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

4. Политика нарушения C ross- O rigin R esource S

Иметь одинаковую политику происхождения - это здорово, потому что политика одинакового происхождения не только не позволяет вредоносным сайтам считывать данные с другого сайта, но также предотвращает подлинное использование, такое как получение изображений, вызовов API, веб-шрифтов. значки и CDN, которые часто запрашиваются из другого домена.

Вот почему нам нужен CORS! C ross- O rigin R esource S политика защиты - это функция безопасности, которая позволяет просматривать веб-страницу из одного источника для доступа к ресурсу с другим доменом и в то же время минимизация количества угроз безопасности, связанных с совместным использованием междоменных запросов.

Существует два типа CORS: простые запросы и предпечатные запросы,

Простая просьба.

Простой запрос не требует предварительной проверки. CORS использует HTTP-методы, такие как GET, POST, HEAD, для простых запросов.

1. Когда браузер запрашивает ресурс из другого домена. Допустим ,https://www.example.com инициирует запрос AJAX GET https://api.example.com
2. Наряду с добавлением заголовков, таких как Host, браузер автоматически добавляет Origin Request Header для запросов из разных источников:

GET /widgets/ HTTP/1.1
Host: api.example.com
Origin: https://www.example.com
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Content-Type: application/json
Content-Length: 5443
Connection: close
Referer: https://www.google.com

3. Сервер проверяет заголовок запроса Origin. Если значение Origin разрешено, оно устанавливает Access-Control-Allow-Origin равным значению в заголовке запроса Origin.

HTTP/1.1 200 OK  
Access-Control-Allow-Origin: https://www.example.com  
Access-control-allow-credentials: true
Access-control-allow-headers: LightStep-Access-Token, Content-Type
Access-control-allow-origin: *

4. Когда браузер получает ответ, он проверяет заголовок Access-Control-Allow-Origin, чтобы убедиться, что он соответствует источнику вкладки. В противном случае ответ блокируется. Тест считается успешным, если либо Access-Control-Allow-Origin точно соответствует единственному источнику, либо содержит оператор *.

Использование оператора * сопряжено с высоким риском безопасности, поскольку отключает большинство правил безопасности CORS.

Предполетные запросы

Стандартный предпечатный запрос будет сделан перед исходным запросом, чтобы проверить, есть ли у них разрешение действовать или нет. Вот почему он называется предполетный запрос. Он использует OPTIONSметод HTTP.

Наряду с запросом OPTIONS отправляются два других заголовка запроса. Это пример запроса предварительной проверки:

Origin: http://example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-Custom-Header

Если api.example.com не желает принять действие, он блокируется, а если он желает принять, он может ответить следующими заголовками:

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Max-Age: 86400

Для подробных объяснений я бы посоветовал прочитать отличную статью Electra & https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

5. Политика безопасности контента.

Политика безопасности безопасности устанавливается сервером приложений в соответствии с политикой браузера, откуда, как ожидается, будут исходить его сценарии и другие ресурсы, Если веб-сайт загружает ресурсы или скрипты откуда-то еще, браузер мгновенно блокирует их.

Feature-Policy: <directive> <allowlist>

Feature-Policy: Camera 'none'
Feature-Policy: Camera 'self' https://test1.com