Java, UX, HTML, CSS, WEB-design

Политика безопасности контента, ваш лучший друг в будущем

Краткое описание по статье Политика безопасности контента, ваш лучший друг в будущем

Название: Политика безопасности контента, ваш лучший друг в будущем . Краткое описание: [ad_1] ⭐ Николя . Дата публикации: 02.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

  • Николя Хоффманн

  • 0 Комментарии

Политика безопасности контента, ваш лучший друг в будущем

  • 10 минут чтения

  • Кодирование, инструменты, безопасность

Краткое резюме ↬

Преимущества использования «политики безопасности контента» многочисленны. Самое главное, это оградит ваших пользователей от нежелательных скриптов или контента или уязвимостей XSS на вашем веб-сайте. В этой статье Николя Хоффманн познакомит вас с этой технологией и объяснит, почему осведомленность является наиболее важным преимуществом CSP для тех, кто занимается поддержкой веб-сайтов.

Давным-давно мой личный сайт подвергся атаке. Я не знаю, как это произошло, но это произошло. К счастью, ущерб от атаки был совсем незначительным: внизу некоторых страниц был вставлен фрагмент кода JavaScript. Я обновил FTP и другие учетные данные, очистил некоторые файлы, и на этом все.

Меня бесил один момент: в то время не было простого решения, которое могло бы сообщить мне о наличии проблемы и, что более важно, могло бы защитить посетителей веб-сайта от этого надоедливого фрагмента кода.

Решение уже существует, и это технология, которая успешно справляется с обеими задачами. Его имя — политика безопасности контента (CSP).

Что такое CSP?

Идея довольно проста: отправляя заголовок CSP с веб-сайта, вы сообщаете браузеру, что ему разрешено выполнять и что ему разрешено блокировать.

Вот пример с PHP:


<?php header("Content-Security-Policy: <your directives>"); ?>

Дальнейшее чтение на SmashingMag:

  • 10 способов усилить безопасность вашего сайта
  • Распространенные ошибки безопасности в веб-приложениях
  • Веб-безопасность: являетесь ли вы частью проблемы?

Еще после прыжка! Продолжить чтение ниже ↓

Некоторые директивы

Вы можете определить глобальные правила или определить правила, относящиеся к типу актива:


default-src 'self' ;
     # self = same port, same domain name, same protocol => OK

Базовым аргументом является default-src: если для типа ресурса не определена директива, браузер будет использовать это значение.


script-src 'self' www.google-analytics.com ;
     # JS files on these domains => OK

В этом примере мы авторизовали доменное имя www.google-analytics.com в качестве источника файлов JavaScript для использования на нашем веб-сайте. Мы добавили ключевое слово ‘self’; если бы мы переопределили директиву script-src с другим правилом, оно переопределяло бы default-src правила.

Если схема или порт не указаны, применяется та же схема или порт, что и на текущей странице. Это предотвращает смешанный контент. Если страница https://example.comто вы не сможете загрузить https://www.google-analytics.com/file.js потому что он будет заблокирован (схема не будет соответствовать). Однако есть исключение, разрешающее обновление схемы. Если https://example.com пытается загрузить https://www.google-analytics.com/file.jsто схема или порт могут быть изменены для облегчения обновления схемы.


style-src 'self' data: ;
     # Data-Uri in a CSS => OK

В этом примере ключевое слово data: авторизует встроенный контент в файлы CSS.

В соответствии со спецификацией CSP уровня 1 вы также можете определить правила для следующего:

  • img-src действительные источники изображений
  • connect-src применяется к XMLHttpRequest (AJAX), WebSocket или EventSource
  • font-src действительные источники шрифтов
  • object-src действительные источники плагинов (например, <object>, <embed>, <applet>)
  • media-src действительные источники <audio> и <video>

Правила CSP уровня 2 включают следующее:

  • child-src действительные источники веб-воркеров и таких элементов, как <frame> и <iframe> (это заменяет устаревшее frame-src от CSP уровня 1)
  • form-action действительные источники, которые можно использовать в качестве HTML <form> действие
  • frame-ancestors действительные источники для встраивания ресурса с использованием <frame>, <iframe>, <object>, <embed> или <applet>.
  • upgrade-insecure-requests инструктирует пользовательских агентов переписать схемы URL-адресов, изменив HTTP на HTTPS (для веб-сайтов с большим количеством старых URL-адресов, которые необходимо переписать).

Для лучшей обратной совместимости с устаревшими свойствами вы можете просто скопировать содержимое фактической директивы и продублировать их в устаревшей. Например, вы можете скопировать содержимое child-src и дублировать их в frame-src.

CSP 2 позволяет добавлять пути в белый список (CSP 1 позволяет добавлять в белый список только домены). Таким образом, вместо того, чтобы заносить в белый список все www.foo.comвы можете добавить в белый список www.foo.com/some/folder для дальнейшего ограничения. Для этого требуется поддержка CSP 2 в браузере, но это, очевидно, более безопасно.

Пример

Я сделал простой пример для конференции Paris Web 2015, где выступил с докладом под названием «CSP в действии».

Без CSP страница выглядела бы так:

Эта страница без CSP, уродливая и испорченная
Посмотреть большую версию

Не очень хорошо. Что если мы включим следующие директивы CSP?


<?php header("Content-Security-Policy: default-src 'self' ; script-src 'self' www.google-analytics.com stats.g.doubleclick.net ; style-src 'self' data: ; img-src 'self' www.google-analytics.com stats.g.doubleclick.net data: ; frame-src 'self' ;"); ?>

Что будет делать браузер? Он будет (очень строго) применять эти директивы в соответствии с основным правилом CSP, которое заключается в том, что все, что не авторизовано в директиве CSP, будет заблокировано («заблокирован» означает не выполняется, не отображается и не используется веб-сайтом).

По умолчанию в CSP встроенные скрипты и стили не разрешенычто означает, что каждый <script>, onclick или style атрибут будет заблокирован. Вы можете авторизовать встроенный CSS с помощью style-src ‘unsafe-inline’ ;.

В современном браузере с поддержкой CSP пример будет выглядеть так:

Эта страница с CSP, действительно лучше
Посмотреть большую версию

Что случилось? Браузер применил директивы и отклонил все, что не было разрешено. Он отправил эти уведомления на консоль:

Уведомления CSP
Посмотреть большую версию

Если вы все еще не уверены в ценности CSP, взгляните на статью Аарона Густафсона «Еще одно доказательство того, что мы не контролируем наши веб-страницы».

Конечно, вы можете использовать более строгие директивы, чем в приведенном выше примере:

  • набор default-src к 'none',
  • укажите, что вам нужно для каждого правила,
  • указать точные пути к требуемым файлам,
  • и Т. Д.

Дополнительная информация о CSP

Служба поддержки

CSP — это не ночная функция, для работы которой необходимо активировать три флага. Уровни CSP 1 и 2 являются рекомендуемыми кандидатами! Браузерная поддержка CSP уровня 1 превосходна.

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

Спецификация уровня 2 является более новой, поэтому она немного меньше поддерживается.

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

CSP уровня 3 сейчас является ранним проектом, поэтому он еще не поддерживается, но вы уже можете делать большие вещи с уровнями 1 и 2.

Другие соображения

CSP был разработан для снижения рисков межсайтового скриптинга (XSS), поэтому включение встроенных скриптов в script-src директивы не рекомендуется. Firefox очень хорошо иллюстрирует эту проблему: в браузере нажмите Shift + F2 и введите security csp, и он покажет вам директивы и советы. Например, здесь он используется на веб-сайте Twitter:

Отображение CSP в Firefox
Посмотреть большую версию

Еще одна возможность для встроенных скриптов или встроенных стилей, если вам действительно нужно их использовать, — это создание хеш-значения. Например, предположим, что вам нужен встроенный скрипт:


<script>alert('Hello, world.');</script>

Вы можете добавить ‘sha256-qznLcsROx4GACP2dm0UCKCzCG-HiZ1guq6ZZDob_Tng=’ как действительный источник в вашем script-src директивы. Сгенерированный хэш является результатом этого в PHP:


<?php echo base64_encode(hash('sha256', "alert('Hello, world.');", true)); ?>

Ранее я сказал, что CSP предназначен для снижения рисков XSS — я мог бы добавить: «… и снижения рисков нежелательного контента». С CSP вы должны знать, где ваши источники контента есть и что они делают на вашем интерфейсе (встроенные стили и т. д.). CSP также может помочь вам заставить участников, разработчиков и других лиц соблюдать ваши правила в отношении источников контента!

Теперь ваш вопрос: «Хорошо, это здорово, но как мы можем использовать это в производственной среде?»

Как использовать это в реальном мире

Самый простой способ разочароваться в использовании CSP в первый раз — протестировать его в реальной среде, думая: «Это будет легко. Мой код крут и идеально чист». Не делай этого. Я это сделал. Это глупо, поверь мне.

Как я уже объяснял, директивы CSP активируются заголовком CSP — золотой середины нет. Вы здесь слабое звено. Вы можете забыть что-то авторизовать или забыть часть кода на своем веб-сайте. CSP не простит вашей оплошности. Однако две особенности CSP значительно упрощают эту проблему.

отчет-ури

Помните уведомления, которые CSP отправляет на консоль? Директива report-uri может использоваться, чтобы указать браузеру отправить их на указанный адрес. Отчеты отправляются в формате JSON.


report-uri /csp-parser.php ;

Итак, в csp-parser.php файл, мы можем обрабатывать данные, отправленные браузером. Вот самый простой пример на PHP:


$data = file_get_contents('php://input'); if ($data = json_decode($data, true)) { $data = json_encode( $data, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES ); mail(EMAIL, SUBJECT, $data); }

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

Для производственной среды (или более посещаемой среды разработки) для сбора информации лучше использовать способ, отличный от электронной почты, поскольку на конечной точке нет ограничений на аутентификацию или скорость, а CSP может быть очень шумный. Только представьте себе страницу, которая генерирует 100 уведомлений CSP (например, скрипт, отображающий изображения из неавторизованного источника) и просматривается 100 раз в день — вы можете получать 10 000 уведомлений в день!

Для упрощения управления отчетами можно использовать такой сервис, как report-uri.io. Вы можете увидеть другие простые примеры для report-uri (с базой данных, с некоторыми оптимизациями и т. д.) на GitHub.

только отчет

Как мы видели, самая большая проблема заключается в том, что между включением и отключением CSP нет золотой середины. Однако функция, названная report-only отправляет немного другой заголовок:


<?php header("Content-Security-Policy-Report-Only: <your directives>"); ?>

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

С участием report-only и report-uriты сможешь тестировать директивы CSP без рискаи вы можете контролировать в режиме реального времени все, что связано с CSP на веб-сайте. Эти две функции действительно полезны для развертывания и обслуживания CSP!

Вывод

Почему CSP — это круто

CSP наиболее важен для ваших пользователей: им не придется сталкиваться с нежелательными скриптами или контентом или XSS-уязвимостями на вашем веб-сайте.

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

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

Как CSP может быть еще круче

По иронии судьбы, CSP слишком эффективен в некоторых браузерах — создает ошибки с букмарклетами. Так, не обновляйте директивы CSP, чтобы разрешить букмарклеты. Мы не можем винить какой-либо конкретный браузер; у всех проблемы:

  • Fire Fox
  • Хром (мигание)
  • Вебкит

В большинстве случаев ошибки — это ложные срабатывания в заблокированных уведомлениях. Все поставщики браузеров работают над этими проблемами, поэтому мы можем ожидать исправления в ближайшее время. В любом случае, это не должно останавливать вас от использования CSP.

Другие ресурсы и статьи

Главная Информация

  • Краткое справочное руководство по политике безопасности контента, Foundeo
  • «Политика безопасности контента, уровень 2», W3C
  • «Введение в политику безопасности контента», HTML5 Rocks
  • SecurityHeaders.io, Скотт Хелме
  • CSP Useful, сборник скриптов, мысли о CSP, Николя Хоффманн, GitHub
  • Валидатор CSP
  • «Обновление небезопасных запросов», W3C
  • «Шпаргалка CSP», Скотт Хелме

Серия статей Dropbox о политиках CSP

  • “[CSP] Об отчетах и ​​фильтрации»
  • “[CSP] Развертывание Unsafe-Inline и Nonce»
  • “[CSP] Неожиданная оценка»
  • “[CSP] Интеграция третьих сторон и разделение привилегий»

Политики GitHub CSP

  • «Путь CSP GitHub»

Другие компании

  • «Мы обещали быть прозрачными: первая большая проблема WIRED с HTTPS», Wired
  • «Политика безопасности контента для одностраничных веб-приложений», Square

Об отчетах

  • «Сборщик отчетов CSP в Твиттере», Нил Мататол, GitHub

Примеры директив

  • Сборник примеров, Николя Хоффманн, GitHub

Будущее CSP

  • «Делаем CSP снова великим!» (слайды), Микеле Спаньоло и Лукас Вейхсельбаум
  • «Политика безопасности контента, уровень 3», W3C
  • «Политика безопасности контента», W3C, GitHub
Сокрушительная редакция
(дс, иль, ал)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Политика безопасности контента, ваш лучший друг в будущем

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»