diff options
Diffstat (limited to 'files/ru/web/http/feature_policy')
| -rw-r--r-- | files/ru/web/http/feature_policy/index.html | 149 | ||||
| -rw-r--r-- | files/ru/web/http/feature_policy/using_feature_policy/index.html | 145 |
2 files changed, 294 insertions, 0 deletions
diff --git a/files/ru/web/http/feature_policy/index.html b/files/ru/web/http/feature_policy/index.html new file mode 100644 index 0000000000..c97e13a4e5 --- /dev/null +++ b/files/ru/web/http/feature_policy/index.html @@ -0,0 +1,149 @@ +--- +title: Feature Policy +slug: Web/HTTP/Feature_Policy +translation_of: Web/HTTP/Feature_Policy +--- +<div>{{SeeCompatTable}}{{HTTPSidebar}}</div> + +<p class="summary"><span class="seoSummary">Feature Policy позволяет веб-разработчику выборочно включать, отключать и изменять поведение определенных функций и API в браузере. Это похоже на {{Glossary("CSP", "Content Security Policy")}}, но контролирует функции вместо политик безопасности.</span></p> + +<h2 id="Краткое_описание">Краткое описание</h2> + +<p>Заголовок Feature Policy предоставляет механизм для ясного указания функций, используемых или не используемых вашим ваб-сайтом. Это позволяет закрепить лучшие практики, даже если кодовая база развивается с течением времени, а также более безопасно включать сторонний контент, ограничивая доступные функции.</p> + +<p>С помощью заголовка Feature Policy вы можете включить набор "политик" для браузера, чтобы использовать определенные функции, необходимые веб-сайту. Эти политики определяют какие API сайта могут получать доступ или изменять поведение по умолчанию для определенных функций.</p> + +<p>Примеры того, что можно сделать с заголовком Feature Policy:</p> + +<ul> + <li>Изменить поведение автозапуска видео на мобильных устройствах.</li> + <li>Ограничить доступ сайта к камере и микрофону.</li> + <li>Разрешить использование API полноэкранного режима в iframe.</li> + <li>Блокировать использование устаревших API, например <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">synchronous XHR</a> and {{domxref("document.write()")}}.</li> + <li>Проверять соответствие размера изображений размерам области просмотра.</li> +</ul> + +<h2 id="Concepts_and_usage">Concepts and usage</h2> + +<p>Feature Policy allows you to control which origins can use which features, both in the top-level page and in embedded frames. Essentially, you write a policy, which is an allowed list of origins for each feature. For every feature controlled by Feature Policy, the feature is only enabled in the current document or frame if its origin matches the allowed list of origins.</p> + +<p>For each policy-controlled feature, the browser maintains a list of origins for which the feature is enabled, known as an allowlist. If you do not specify a policy for a feature, then a default allowlist will be used. The default allowlist is specific to each feature.</p> + +<h3 id="Writing_a_policy">Writing a policy</h3> + +<p>A policy is described using a set of individual policy directives. A policy directive is a combination of a defined feature name, and an allowlist of origins that can use the feature.</p> + +<h3 id="Specifying_your_policy">Specifying your policy</h3> + +<p>Feature Policy provides two ways to specify policies to control features:</p> + +<ul> + <li>The {{httpheader('Feature-Policy')}} HTTP header.</li> + <li>The {{HTMLElement('iframe','<code>allow</code>','#Attributes')}} attribute on iframes.</li> +</ul> + +<p>The primary difference between the HTTP header and the <code>allow</code> attribute is that the allow attribute only controls features within an iframe. The header controls features in the response and any embedded content within the page.</p> + +<p>For more details see <a href="/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Using Feature Policy</a>.</p> + +<h2 id="Types_of_policy-controlled_features">Types of policy-controlled features</h2> + +<p>Though Feature Policy provides control of multiple features using a consistent syntax, the behavior of policy controlled features varies and depends on several factors.</p> + +<p>The general principle is that there should be an intuitive or non-breaking way for web developers to detect or handle the case when the feature is disabled. Newly introduced features may have an explicit API to signal the state. Existing features that later integrate with Feature Policy will typically use existing mechanisms. Some approaches include:</p> + +<ul> + <li>Return "permission denied" for JavaScript APIs that require user permission grants.</li> + <li>Return <code>false</code> or error from an existing JavaScript API that provides access to feature.</li> + <li>Change the default values or options that control the feature behavior.</li> +</ul> + +<p>The current set of policy-controlled features fall into two broad categories:</p> + +<ul> + <li>Enforcing best practices for good user experiences.</li> + <li>Providing granular control over sensitive or powerful features.</li> +</ul> + +<h3 id="Best_practices_for_good_user_experiences">Best practices for good user experiences</h3> + +<p>There are several policy-controlled features to help enforce best practices for providing good performance and user experiences.</p> + +<p>In most cases, the policy-controlled features represent functionality that when used will negatively impact the user experience. To avoid breaking existing web content, the default for such policy-controlled features is to allow the functionality to be used by all origins. Best practices are then enforced by using policies that disable the policy-controlled features. For more details see "Enforcing best practices for good user experiences".</p> + +<p>The features include:</p> + +<ul> + <li>Layout-inducing animations</li> + <li>Legacy image formats</li> + <li>Oversized images</li> + <li>Synchronous scripts</li> + <li>Synchronous XMLHTTPRequest</li> + <li>Unoptimized images</li> + <li>Unsized media</li> +</ul> + +<h3 id="Granular_control_over_certain_features">Granular control over certain features</h3> + +<p>The web provides functionality and APIs that may have privacy or security risks if abused. In some cases, you may wish to strictly limit how such functionality is used on a website. There are policy-controlled features to allow functionality to be enabled/disabled for specific origins or frames within a website. Where available, the feature integrates with the Permissions API, or feature-specific mechanisms to check if the feature is available.</p> + +<p>The features include:</p> + +<ul> + <li>Accelerometer</li> + <li>Ambient light sensor</li> + <li>Autoplay</li> + <li>Camera</li> + <li>Encrypted media</li> + <li>Fullscreen</li> + <li>Geolocation</li> + <li>Gyroscope</li> + <li>Lazyload</li> + <li>Microphone</li> + <li>Midi</li> + <li>PaymentRequest</li> + <li>Picture-in-picture</li> + <li>Speaker</li> + <li>USB</li> + <li>VR / XR</li> +</ul> + +<h2 id="Examples">Examples</h2> + +<ul> + <li>See <a href="http://feature-policy-demos.appspot.com/">Feature Policy Demos</a> for example usage of many policies.</li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Feature Policy','#feature-policy-http-header-field','Feature-Policy')}}</td> + <td>{{Spec2('Feature Policy')}}</td> + <td>Initial definition. Defines the {{httpheader('Feature-Policy')}} header. Directives are defined in the specs for the features they control. See individual directive pages for details.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("http.headers.Feature-Policy")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Using Feature Policy</a></li> + <li>{{HTTPHeader("Feature-Policy")}} HTTP header</li> + <li>{{HTMLElement('iframe','<code>allow</code>','#Attributes')}} attribute on iframes</li> + <li><a href="https://developers.google.com/web/updates/2018/06/feature-policy">Introduction to Feature Policy</a></li> + <li><a href="https://www.chromestatus.com/features#component%3A%20Blink%3EFeaturePolicy">Feature policies on www.chromestatus.com</a></li> + <li><a href="https://chrome.google.com/webstore/detail/feature-policy-tester-dev/pchamnkhkeokbpahnocjaeednpbpacop">Feature-Policy Tester (Chrome Developer Tools extension)</a></li> +</ul> diff --git a/files/ru/web/http/feature_policy/using_feature_policy/index.html b/files/ru/web/http/feature_policy/using_feature_policy/index.html new file mode 100644 index 0000000000..bdf46e1be5 --- /dev/null +++ b/files/ru/web/http/feature_policy/using_feature_policy/index.html @@ -0,0 +1,145 @@ +--- +title: Using Feature Policy +slug: Web/HTTP/Feature_Policy/Using_Feature_Policy +translation_of: Web/HTTP/Feature_Policy/Using_Feature_Policy +--- +<div></div> + +<div>{{HTTPSidebar}}</div> + +<div></div> + +<p><a href="/en-US/docs/Web/HTTP/Feature_Policy">Функциональная политика</a> позволяет разработчику контролировать доступ страницам сайта к определенной веб функциональности браузера, как страницам высокого уровня, так и встроенным в страницу фреймам. По сути, разработчик определяет политику, которая позволяет использовать определенную функциональность списку разрешенных источников. Каждая функция, контролируемая функциональной политикой, активируется в определенном документе или фрейме, если его источник происхождения входит в разрешенный список источников.</p> + +<p>Для каждой функции, контролируемой функциональной политикой, браузер отслеживает список источников происхождения, для документов которого, эта функция разрешена. Если разработчик не определил политику для функциональности, тогда будет использован список разрешенных источников по умолчанию. Этот список специфичен для каждой функциональности. </p> + +<h2 id="Описание_полититки">Описание полититки</h2> + +<p>Политика определяется, используя набор индивидуальных установочных директив. Установочная директива - это комбинация имен определяемых функциональностей, со списком источников происхождения, которым разрешается достук к указанной функциональности. Имена функциональностей в политике разделяются точкой с запятой.</p> + +<h3 id="список_доступа">список доступа</h3> + +<p>Список доступа - это список источников происхождения, которые принимают одно или несколько следующих значений, разделяемых пробелом:</p> + +<ul> + <li><code>*</code>: Функциональность разрешается в документе и всем вложенным в документ браузерным контекстам (элементам <code>iframes</code>) вне зависимости от источника их происхождения.</li> + <li><code>'self'</code>: Функциональность разрешается в документе и всем вложенным в него браузерным контекстам (элементам <code>iframes</code>) общего с этим документом источником происхождения.</li> + <li><code>'src'</code>: (только для элемента<code> iframe</code> с атрибутом <code>allow</code>) Функциональность доступна в этом фрейме, при условии, что загруженный в него документ происходит из того же источника, что и URL в атрибуте {{HTMLElement('iframe','src','#Attributes')}} элемента <code>iframe</code>.</li> + <li><code>'none'</code>: Функциональность отключена как для высокоуровневых документов, так и для вложенных в него контекстов (<code>iframes</code>).</li> + <li><origin(s)>: Функциональность доступна для специфичных источников происхождения, указываемых разработчиком (к примеру, https://example.com), раздедяемые между собой пробелом.</li> +</ul> + +<p>Значение <code>*</code> (доступность функциональности для всех источников) или <code>'none'</code> (не доступность функциональности для всех источников), можут использоваться только однократно, в то время как, значения <code>'self'</code> и <code>'src'</code> могут быть использованы с одним или несколькими источниками происхождения.</p> + +<p>Каждая функциональность определяется со своим списком разрешений по умолчанию, который содержит одно из значений:</p> + +<ul> + <li><code>*</code>: Функциональность доступна по умолчанию для высокоуровневых документов и всех вложенных элементах <code> iframes</code>.</li> + <li><code>'self'</code>: Функциональность доступна по умолчанию в документах высокого уровня и во вложенных элементах <code>iframes</code> , одного с документом источником происхождения. Функциональность не доступна в кросс-доменных документах элементов <code>iframes.</code></li> + <li><code>'none'</code>: Функциональность по умолчанию отключена во всех браузерных контекстах.</li> +</ul> + +<h2 id="Определение_политики">Определение политики</h2> + +<p>Функциональная политика предлагает два способа определения политик:</p> + +<ul> + <li>Заголовок {{httpheader('Feature-Policy')}} HTTP.</li> + <li>Атрибут {{htmlattrxref("allow", "iframe")}} на элементе {{htmlelement("iframe")}}.</li> +</ul> + +<p>Основное отличие между заголовком HTTP и атрибутом <code>allow</code> в том, что атрибут определяет доступность функциональности для документов, загруженных в <code>iframe</code>. Заголовок же определяет доступность функциональности в документе и вложенных в него контекстах, направляющимся в ответе на HTTP(S) запрос.</p> + +<h3 id="Заголовок_HTTP">Заголовок HTTP</h3> + +<p>Отправить заголовок функциональной политики можно в ответе на запрос документа (страницы). Значение заголовка переопределяет политику браузера по умолчанию для данной страницы. Он имеет следующую структуру.</p> + +<pre class="brush: bash">Feature-Policy: <имя функциональности> <список разрешенных источников></pre> + +<p>К примеру, для блокировки функциональности API геолокации по всему сайту:</p> + +<pre class="brush: bash">Feature-Policy: geolocation 'none'</pre> + +<p>Несколько функциональностей можно контролировать одновременно, отправив один HTTP заголовок, разделяющий точкой с запятой между собой список установочных директив, или отпраить отдельный заголовок для каждой установочной директивы.</p> + +<p>К примеру, ниже директивы идентичны:</p> + +<pre class="brush: bash">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 *; +</pre> + +<h3 id="атрибут_allow">атрибут allow </h3> + +<p>Второй способ использования функциональной политики - контроль использования функциональности в документе, загруженного в элемент <code>iframe</code>. </p> + +<p>К примеру, для разрешения использования функциональности <code>fullscreen</code> для документа, загруженного в <code>iframe</code> используем :</p> + +<pre class="brush: html"><iframe src="https://example.com..." allow="fullscreen"></iframe></pre> + +<p>Эквивалентная запись:</p> + +<pre class="brush: html"><iframe src="https://example.com..." allow="fullscreen 'src'"></iframe></pre> + +<p>Ниже, получаем доступ к геолокации пользователя документа, загруженного из указанного источника в <code><iframe></code> :</p> + +<pre class="brush: html"><iframe src="https://google-developers.appspot.com/demos/..." + allow="geolocation https://google-developers.appspot.com"></iframe> +</pre> + +<p>Аналогично HTTP заголовку, несколько функциональностей могут контролироваться одновременно, определяя, разделяемый точкой с запятой список установочных директив.</p> + +<p>К примеру, блокируем <code><iframe></code> для использования камеры и микрофона:</p> + +<pre class="brush: html"><iframe allow="camera 'none'; microphone 'none'"> +</pre> + +<h2 id="Наследование_политики_для_встроенного_контента">Наследование политики для встроенного контента</h2> + +<p>Контексты скриптов (.js) наследуют политику их браузерных контекстов, вне зависимости от их источника происхождения. Это значит, что скрипты документа высокого уровня наследуют политику основного документа..</p> + +<p>Все фреймы наследуют политику своих родительских документов. Если фрейм имеет атрибут <code>allow</code> , политики родительского документа и атрибута комбинируются, используя наиболее ограничительную политику. Для включения функциональности для фрейма, его источник происхождения должен входить в списки доступа и родительского документа, и атрибута <code>allow</code>.</p> + +<p>Отключение функциональности в политике является односторонним. Если функциональность не доступна (отключена) для дочернего фрейма его родителем, дочерний фрейм не может это отменить, и ни его потомки.</p> + +<h2 id="Применение_новейших_решений_для_наилутшего_пользовательского_впечатления">Применение новейших решений для наилутшего пользовательского впечатления</h2> + +<p>Трудно создать веб сайт, который использует новейшие решения и предлагает отличную производительность. Со временем, эволюционируя, сайту может даже труднее обеспечивать наилутшие пользовательские впечатления. Используйте функциональные политики для определения новейших решений, и полагайтесь на современные браузеры в предотвращении негативных изменений.</p> + +<p>Существуют несколько функциональных политик, спроектированных для предоставления функциональности, но которые могут негативно влиять на впечатления пользователя. Ими являются:</p> + +<ul> + <li>Анимации, создающие разметку</li> + <li>Неоптимизированные (слабо сжатые) изображения</li> + <li>Переразмеренные изображения</li> + <li>Синхронные скрипты</li> + <li>Синхронный XMLHttpRequest</li> + <li>Безразмерные медиа</li> +</ul> + +<p>Для исключения поломки веб контента, значения по умолчанию для таких функциональных политик, позволяют функциональности быть использованной для всех источников происхождения. То есть, списком разрешений по умолчанию является <code>'*'</code> для каждой функциональности. Предотвращение использования неоптимальной функциональности, требует явного определения политики, которая отключает функциональности.</p> + +<p>Для нового контента можно начать разработку с политикой, которая отключает все функциональности. Такой подход гаранитрует, что ни одна из функциональностей не включена. При применении политики для существующего контента, тестирование работы наиболее желательный вариант для ожидаемой проверки работоспособности. Это особенно важно для встроенных или сторонних контентов, которых разработчик не может контролировать.</p> + +<p>Для включения правоприменения всех новейших решений, определяется политика ниже.</p> + +<p>Отправляйте следующий HTTP заголовок:</p> + +<pre class="brush: bash">Feature-Policy: layout-animations 'none'; unoptimized-images 'none'; oversized-images 'none'; sync-script 'none'; sync-xhr 'none'; unsized-media 'none';</pre> + +<p>Используя атрибут <code>allow</code> элемента <code><iframe></code>:</p> + +<pre class="brush: html"><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></pre> + +<h2 id="Смотри_так_же">Смотри так же:</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTTP/Feature_Policy">Функциональная политика</a></li> + <li>Заголовок {{HTTPHeader("Feature-Policy")}}</li> + <li>Атрибут {{HTMLElement('iframe','allow','#Attributes')}} элемента <code>iframe</code></li> + <li>Заголовок {{HTTPHeader("Content-Security-Policy")}} </li> + <li>Заголовок {{HTTPHeader("Referrer-Policy")}}</li> + <li><a href="/en-US/docs/Web/Privacy">Конфеденциальность, разрешения и информационная безопасность</a></li> +</ul> |