Защита вашего сайта с помощью политики функций

Одной из функций веб-платформы, отмеченных на недавнем Саммите разработчиков Chrome, была политика функций, цель которой — «разрешить авторам сайтов выборочно включать и отключать использование различных функций браузера и API». В этой статье я рассмотрю, что это значит для веб-разработчиков, с некоторыми практическими примерами.

В своей вводной статье на сайте Google Developers Эрик Бидельман описывает Feature Policy следующим образом:

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

Спецификация была разработана в Google в рамках деятельности группы инкубаторов веб-платформ. Цель Политики функций состоит в том, чтобы мы, как веб-разработчики, могли заявить об использовании функции веб-платформы прямо в браузере. Тем самым мы соглашаемся на использование или неиспользование этой конкретной функции. На основании этого браузер может блокировать определенные функции или сообщать нам, что используется функция, которую он не ожидал увидеть.

Примеры могут включать:

1. Я встраиваю iframe и не хочу, чтобы встроенный сайт мог получить доступ к камере моего посетителя;
2. Я хочу отловить ситуации, когда неоптимизированные образы размещаются на моем сайте через CMS;
3. Над моим проектом работает много разработчиков, и я хотел бы знать, используют ли они устаревшие API, такие как document.write .

Все эти вещи можно отслеживать, блокировать или сообщать о них в рамках политики функций.

Как использовать политику функций

Чтобы использовать Feature Policy, браузер должен знать две вещи: для какой функции вы создаете политику и как вы хотите, чтобы эта функция обрабатывалась.

 Feature-Policy: <directive> <allowlist>

<directive> — это имя функции, для которой вы устанавливаете политику.

Текущий список функций (из презентации на Chrome Dev Summit) выглядит следующим образом:

• акселерометр
• датчик освещенности
• Автовоспроизведение
• камера
• документ-запись
• зашифрованные носители
• полноэкранный
• геолокация
• гироскоп
• layout-анимации
• ленивая загрузка
• устаревшие форматы изображений
• магнитометр
• миди
• негабаритные изображения
• оплата
• картинка в картинке
• оратор
• скрипт синхронизации
• синхронизация-xhr
• неоптимизированные изображения
• неразмерный носитель
• USB
• вертикальная прокрутка
• вр

<allowlist> подробно описывает, как эту функцию можно использовать — если вообще — и принимает одно или несколько из следующих значений.

• *
  Самая либеральная политика, утверждающая, что эта функция будет разрешена в этом документе и любых фреймах, будь то из этого домена или откуда-либо еще. Может использоваться только как одно значение, поскольку нет смысла включать все, а также передавать, например, список доменов.
• self
  Эта функция будет доступна в документе и любых фреймах, однако фреймы должны иметь одинаковое происхождение.
• src
  Применимо только при использовании allow атрибута iframe. Это позволяет использовать функцию, если загруженный в нее документ исходит из того же источника, что и URL-адрес в атрибуте src iframe.
• none
  Отключает функцию для документа и любых вложенных фреймов. Может использоваться только как одиночное значение.
• <origin(s)>
  Эта функция разрешена для определенных источников; это означает, что вы можете указать список доменов, где эта функция разрешена. Список доменов разделен пробелом.

Существует два метода, с помощью которых вы можете включить политики функций на своем сайте: вы можете отправить заголовок HTTP или использовать атрибут allow в iframe.

HTTP-заголовок

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

Например, если бы я хотел запретить использование API геолокации и использовал веб-сервер NGINX, я мог бы отредактировать файлы конфигурации своего сайта в NGINX, добавив следующий заголовок, который предотвратил бы любой документ на моем сайте и любой iframe, встроенный в API геолокации.

 add_header Feature-Policy "geolocation none;";

Несколько политик могут быть установлены в одном заголовке. Чтобы предотвратить геолокацию и вибрацию, но разрешить unsized-media из домена example.com , я мог бы установить следующее:

 add_header Feature-Policy "vibrate none; geolocation none; unsized-media https://example.com;";

allow атрибут на iFrames

Если нас в первую очередь интересует, что происходит с контентом в iframe, мы можем использовать Feature Policy для самого iframe; это выигрывает от немного лучшей поддержки браузера на момент написания статьи с Chrome и Safari, поддерживающими это использование.

Если я встраиваю сайт и не хочу, чтобы этот сайт использовал API-интерфейсы геолокации, камеры или микрофона, тогда мой iframe будет выглядеть следующим образом:

 <iframe allow="geolocation 'none'; camera 'none'; microphone 'none'">

Возможно, вы уже знакомы с отдельными атрибутами, управляющими содержимым iframes allowfullscreen , allowpaymentrequest и allowusermedia . Их можно заменить атрибутом allow Feature Policy, а по соображениям совместимости браузера вы можете использовать оба в iframe. Если вы используете оба атрибута, то будет применяться наиболее строгий из них. В статье Google показан пример iframe, который использует allowfullscreen — это означает, что iframe разрешено входить в полноэкранный режим, но затем конфликтующая политика функций fullscreen none . Они противоречат друг другу, поэтому побеждает наиболее ограничительная политика, и этому iframe не будет разрешен вход в полноэкранный режим.

 <iframe allowfullscreen allow="fullscreen 'none'" src="...">

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

Политика функций и API отчетов

О нарушениях Политики функций можно сообщать через Reporting API, что означает, что вы можете разработать комплексный набор политик, отслеживающих использование функций на вашем сайте. Это будет полностью прозрачно для ваших пользователей, но даст вам огромное количество информации о том, как используются функции.

Поддержка браузерами политики функций

В настоящее время браузерная поддержка Feature Policy ограничена Chrome, однако во многих случаях, когда вы используете Feature Policy во время разработки и при предварительном просмотре сайтов, это не обязательно является проблемой.

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

Когда использовать политику функций

Мне очень нравится идея использовать Feature Policy для резервного копирования решений, принятых при разработке сайта. Решения, которые вполне могут быть записаны в документах, таких как бюджет эффективности, или как часть аудита GDPR, но которые затем становятся чем-то, что мы должны помнить, чтобы сохранить на протяжении всей жизни сайта. Это не всегда просто, когда над сайтом работает несколько человек; люди, которые, возможно, не участвовали в первоначальном принятии решения или просто не знали о требованиях. Мы много думаем о том, что третьи стороны могут как-то повлиять на наш сайт, однако иногда наши сайты нуждаются в защите от нас самих!

Следите за третьими лицами

Вы можете запретить стороннему сайту доступ к камере или микрофону с помощью политики функций в iframe с атрибутом allow . Если причина встраивания этого сайта не имеет ничего общего с этими функциями, то их отключение означает, что сайт никогда не сможет начать запрашивать их. Затем это можно связать с вашими процессами для обеспечения соответствия GDPR. Когда вы проверяете влияние вашего сайта на конфиденциальность, вы можете встроить процессы для блокировки доступа третьих лиц с помощью политики функций, что обеспечит вам и вашим посетителям дополнительную безопасность и спокойствие.

Это использование зависит от поддержки браузером Feature Policy для блокировки использования. Однако вы можете использовать режим отчетов Feature Policy, чтобы информировать вас об использовании этих API, если третья сторона изменила то, что они будут делать. Это дало бы вам очень быстрое уведомление — по существу, как только первый человек, использующий Chrome, попадет на сайт.

Выборочное включение функций

Мы также можем выборочно включить некоторые функции, которые обычно заблокированы. Возможно, мы хотим разрешить iframe, загружающему контент с другого сайта, использовать функцию геолокации в браузере. Chrome по умолчанию блокирует это, но если вы загружаете контент с надежного сайта, вы можете включить запрос из разных источников с помощью Feature Policy. Это означает, что вы можете безопасно включать функции при загрузке контента из другого домена, находящегося под вашим контролем.

Отслеживание использования устаревших API и плохо работающих функций

Feature Policy можно запускать только в режиме отчетов. Затем он может отслеживать использование определенных функций и сообщать вам, когда они будут найдены на сайте. Это может быть полезно во многих сценариях. Если у вас очень большой сайт с большим количеством устаревшего кода, включение Feature Policy поможет вам отследить места, требующие внимания. Если вы работаете с большой командой (особенно если разработчики часто используют сторонние библиотеки кода), Feature Policy может выявить то, что вы не хотели бы видеть на сайте.

Работа с плохо оптимизированными изображениями

В то время как большинство статей, которые я видел о Feature Policy, сосредоточены на аспектах безопасности и конфиденциальности, функции, связанные с оптимизацией изображений, действительно понравились мне, как человеку, имеющему дело с большим количеством контента, созданного техническими и нетехническими пользователями. Политику функций можно использовать для защиты пользовательского опыта, а также производительности вашего сайта, предотвращая загрузку посетителями слишком больших или неоптимизированных изображений.

В идеальном мире ваша CMS будет заниматься управлением изображениями, гарантируя, что изображения будут разумно изменены, оптимизированы для Интернета и контекста, в котором они будут отображаться. Однако реальная жизнь редко бывает таким идеальным миром, и поэтому иногда работа по изменению размера а оптимизация изображений оставлена ​​на усмотрение редакторов контента, чтобы гарантировать, что они не загружают огромные изображения в Интернет. Это особенно проблема, если вы используете статическую CMS без уровня управления контентом поверх нее. Даже будучи техническим специалистом, очень легко забыть изменить размер этого гигантского снимка экрана или изображения с камеры, которое вы вставили в папку в качестве заполнителя.

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

Политика unsized-media ищет изображения или видео, для которых не задан размер в HTML или CSS. Когда загружается неразмерный медиа-элемент, это может привести к перекомпоновке содержимого на странице.

Чтобы предотвратить добавление на сайт любых неразмерных носителей, установите следующий заголовок. Медиафайлы будут отображаться с размером по умолчанию 300×150 пикселей. Вы увидите, как ваш сайт загружается с небольшими носителями, и поймете, что вам нужно решить проблему.

 Feature-Policy: unsized-media 'none'

См. демонстрацию (требуется Chrome Canary с включенными функциями экспериментальной веб-платформы).

Политика oversized-images проверяет, не слишком ли велики изображения по сравнению с их контейнером. Если они есть, вместо них будет показан заполнитель. Эта политика невероятно полезна для проверки того, что вы не отправляете огромные изображения рабочего стола своим мобильным пользователям.

 Feature-Policy: oversized-images 'none'

См. демонстрацию (требуется Chrome Canary с включенными функциями экспериментальной веб-платформы).

Политика unoptimized-images проверяет, не превышает ли размер данных изображений в байтах более чем в 0,5 раза размер области рендеринга в пикселях. Если эта политика включена и изображения нарушают ее, вместо изображения будет отображаться заполнитель.

 Feature-Policy: unoptimized-images 'none'

См. демонстрацию (требуется Chrome Canary с включенными функциями экспериментальной веб-платформы).

Тестирование и отчетность по политике функций

Chrome DevTools отобразит сообщение, информирующее вас о том, что определенные функции были заблокированы или включены в соответствии с политикой функций. Если вы включили политику функций на своем сайте, вы можете проверить, работает ли она.

Поддержка политики функций также была добавлена ​​на сайт заголовков безопасности, что означает, что вы можете проверить их вместе с заголовками, такими как политика безопасности контента, на своем сайте или на других сайтах в Интернете.

Существует расширение Chrome DevTools, которое позволяет включать и выключать различные политики функций (также отличный способ проверить свои страницы без необходимости настраивать какие-либо заголовки).

Если вы хотите заняться интеграцией политик функций с API отчетов, дополнительная информация о том, как это сделать, приведена здесь.

Дополнительная литература и ресурсы

Я нашел ряд ресурсов, многие из которых я использовал при исследовании этой статьи. Это должно дать вам все, что вам нужно, чтобы начать реализацию Feature Policy в ваших собственных приложениях. Если вы уже используете Политику безопасности контента, это кажется дополнительным логическим шагом к контролю над тем, как ваш сайт работает с браузером, чтобы обеспечить безопасность и конфиденциальность людей, использующих ваш сайт. У вас есть дополнительный бонус в виде возможности использовать Feature Policy, чтобы помочь вам быть в курсе того, что элементы, снижающие производительность, добавляются на ваш сайт с течением времени.

• Спецификация политики функций
• Представляем политику функций
• Взгляд с саммита разработчиков Chrome
• Политика функций в MDN
• Могу ли я использовать политику функций
• Демонстрации политик функций
• Настройте заголовки Feature-Policy, Referrer-Policy и Content Security Policy в Nginx.