Using Feature Policy

Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского

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

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

Описание полититки

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

список доступа

Список доступа - это список источников происхождения, которые принимают одно или несколько следующих значений, разделяемых пробелом:

  • *: Функциональность разрешается в документе и всем вложенным в документ браузерным контекстам (элементам iframes) вне зависимости от источника их происхождения.
  • 'self': Функциональность разрешается в документе и всем вложенным в него браузерным контекстам (элементам iframes) общего с этим документом источником происхождения.
  • 'src': (только для элемента iframe  с атрибутом allow) Функциональность доступна в этом фрейме, при условии, что загруженный в него документ происходит из того же источника, что и URL в атрибуте src элемента iframe.
  • 'none': Функциональность отключена как для высокоуровневых документов, так и для вложенных в него контекстов (iframes).
  • <origin(s)>: Функциональность доступна для специфичных источников происхождения, указываемых разработчиком (к примеру, https://example.com), раздедяемые между собой пробелом.

Значение * (доступность функциональности для всех источников) или 'none' (не доступность функциональности для всех источников), можут использоваться только однократно, в то время как, значения 'self' и 'src' могут быть использованы с одним или несколькими источниками происхождения.

Каждая функциональность определяется со своим списком разрешений по умолчанию, который содержит одно из значений:

  • *: Функциональность доступна по умолчанию для высокоуровневых документов и всех вложенных элементах  iframes.
  • 'self': Функциональность доступна по умолчанию в документах высокого уровня и во вложенных элементах iframes , одного с документом источником происхождения. Функциональность не доступна в кросс-доменных документах элементов iframes.
  • 'none': Функциональность по умолчанию отключена во всех браузерных контекстах.

Определение политики

Функциональная политика предлагает два способа определения политик:

Основное отличие между заголовком  HTTP и атрибутом allow  в том, что атрибут определяет доступность функциональности для документов, загруженных в iframe. Заголовок же определяет доступность функциональности в документе и вложенных в него контекстах, направляющимся в ответе на HTTP(S) запрос.

Заголовок HTTP

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

Feature-Policy: <имя функциональности> <список разрешенных источников>

К примеру, для блокировки функциональности API геолокации по всему сайту:

Feature-Policy: geolocation 'none'

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

К примеру, ниже директивы идентичны:

Feature-Policy: unsized-media 'none'; geolocation 'self' https://example.com; camera *;

Feature-Policy: unsized-media 'none'
Feature-Policy: geolocation 'self' https://example.com
Feature-Policy: camera *;

атрибут  allow 

Второй способ использования функциональной политики - контроль использования функциональности в документе, загруженного в элемент  iframe

К примеру, для разрешения использования функциональности fullscreen для документа, загруженного в  iframe используем :

<iframe src="https://example.com..." allow="fullscreen"></iframe>

Эквивалентная запись:

<iframe src="https://example.com..." allow="fullscreen 'src'"></iframe>

Ниже, получаем доступ к геолокации пользователя документа, загруженного из указанного источника в <iframe> :

<iframe src="https://google-developers.appspot.com/demos/..."
        allow="geolocation https://google-developers.appspot.com"></iframe>

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

К примеру, блокируем  <iframe> для использования камеры и микрофона:

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

Наследование политики для встроенного контента

Контексты скриптов (.js) наследуют политику их браузерных контекстов, вне зависимости от их источника происхождения. Это значит, что скрипты документа высокого уровня наследуют политику основного документа..

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

Отключение функциональности в политике является односторонним. Если функциональность не доступна (отключена) для дочернего фрейма его родителем, дочерний фрейм не может это отменить, и ни его потомки.

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

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

Существуют несколько функциональных политик, спроектированных для предоставления функциональности, но которые могут негативно влиять на впечатления пользователя. Ими являются:

  • Анимации, создающие разметку
  • Неоптимизированные (слабо сжатые) изображения
  • Переразмеренные изображения
  • Синхронные скрипты
  • Синхронный XMLHttpRequest
  • Безразмерные медиа

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

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

Для включения правоприменения всех новейших решений, определяется политика ниже.

Отправляйте следующий HTTP заголовок:

Feature-Policy: layout-animations 'none'; unoptimized-images 'none'; oversized-images 'none'; sync-script 'none'; sync-xhr 'none'; unsized-media 'none';

Используя атрибут allow элемента <iframe>:

<iframe src="https://example.com..." allow="layout-animations 'none'; unoptimized-images 'none'; oversized-images 'none'; sync-script 'none'; sync-xhr 'none'; unsized-media 'none';"></iframe>

Смотри так же: