What is the allow attribute in iframes and how to use it?

Asked

Viewed 996 times

13

According to the website of MDN Web Docs the attribute allow serves to

Specifies a Feature policy for the <iframe>.

Translated

Specifies a resource policy for <iframe>.

Source

This so-called Resource Policy would be for a developer to do certain things with the features and Apis of the browser, but I haven’t understood yet what it serves and how it works in practice.

Example

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<iframe width="560" height="315" src="https://www.youtube.com/embed/0SSYzl9fXOQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    
</body>
</html>

The above example contains a Youtube video being embedded on the page through a iframe. The iframe has the attribute allow that has the values accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture, then what will happen when these values are set? What possible values can I put in the attribute allow?.

html
  • 1

    Are the permissions that will be released by the browser/youtube

  • What do you mean permissions? if in the attribute allow in the example I gave above, is with the value autoplay how the browser will release this permission to enable/disable/modify while, for example, Google Chrome ignores the attribute autoplay and does not work! then in this case would not be useless in using?

  • Autoplay does not work in some cases, like outdated browser, without https etc... But this is also useful for Youtube

  • But it is in the old versions of Google Chrome that the autoplay works! currently also works, but you need the attribute muted be included, but that’s not my question.

  • 3

    I think this attribute only serves to inform the API which resources are available in iframe. Values are not standardized (I think). The developer of the API who uses them and names as he pleases. For example, I could develop an API and use a value allow="telacheia", where the API checks if the tag has the value telacheia in the attribute allow so that the user can display something in full screen (e.g. a video).

  • @Sam can be that! on the web does not have much information about that attribute the only site I found was on the MDN Web Docs site, but also has little information.

  • If you think my answer does not have enough information or does not answer all your questions, please comment so I can improve it

  • I just wanted an example in practice of the use intended for this attribute to be clearer.

Show 3 more comments

1 answer

9


TL;DR

This attribute may enable (allow) or disable (not allow) a feature of a third-party content.

How it works

To understand this attribute, we have to understand what is the Resource Policy.

The Resource Policy allows web developers to enable, disable, and modify the behavior of certain features and Apis in the browser. It is similar to the Content Security Policy, but controls the resources, as characteristics instead of safety behaviour.

In a nutshell the Resource Policy provides a mechanism to explicitly state what functionality is used (or not used) throughout the site. This allows you to block best practices by content, even if your code base evolves over time, so you can compose third-party content more securely by limiting what features are available.

With the Resource Policy, you accept a set of "policies" for the browser to apply to specific features used on a website. These policies restrict which Apis the site may access or modify the default browser behavior for certain features.

Examples of what you can do with the Resource Policy:

  • Change the default playback behavior in mobile and third-party videos.

  • Restrict a website to use sensitive Apis, such as a camera or microphone.

  • Allow iframes to use the full-screen API.

  • Block the use of outdated Apis such as synchronous XHR.

  • Make sure the images are sized correctly and are not too large for the viewport.

Concepts and use

The Resource Policy allows you to control which sources can use which resources, on the top-level page and in the embedded frameworks. Essentially, you write a policy, which is a list of allowed origins for each resource. For all resources controlled by the Resource Policy, the resource will only be activated in the current document or framework if its origin matches the list of permitted sources.

For each policy-controlled feature, the browser maintains a list of sources for which the feature is enabled, known as the permissions list. If you do not specify a policy for a resource, a list of default permissions will be used. The default permissions list is specific to each resource.

Writing a policy

A policy is described using a set of individual policy directives. A policy directive is a combination of a defined resource name and a list of source permissions that can use the resource.

Specifying your policy:

Resource policy provides two ways to specify policies to control resources:

  • The HTTP header of resource policy.

  • The attribute of permission allow in iframes.

The main difference between the HTTP header and the attribute allow is that the attribute allow controls only the resources in a iframe. The header controls the response resources and any content embedded in the page.

A simple example is this:

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

The attribute allow blocks the content of iframe to use the user’s camera and microphone.

For more details, see Using the Resource Policy.

Policy controlled types of resources

While Resource Policy provides control of multiple resources using consistent syntax, the behavior of policy-controlled resources varies and depends on several factors.

The general principle is that there must be an intuitive or uninterrupted way for web developers to detect or handle the case when the feature is disabled. Newly introduced features may have an explicit API to flag the state. Existing resources that later integrate with Resource Policy usually use existing mechanisms. Some approaches include:

  • Return false for Javascript Apis that require user permissions.

  • Return false or an error of an existing Javascript API that provides access to the resource.

  • Change the default values or options that control resource behavior.

The current set of policy-controlled resources falls into two broad categories:

  • Application of good practices for good user experiences.

  • Providing granular control over sensitive or powerful resources.

Best practices for good user experiences

There are multiple policy-controlled resources to help you apply best practices to provide good performance and user experiences.

In most cases, policy-controlled resources represent features that, when used, negatively affect the user experience. To avoid breaking existing web content, the default for these policy-controlled resources is to allow the functionality to be used by all sources. Best practices are implemented using policies that disable policy-controlled resources.

Resources include:

  • Animations that induce layout

  • Inherited image formats

  • Large images

  • Synchronous scripts

  • XMLHTTPRequest synchronous

  • Images not optimized

  • Uncapped media

  • Granular control over certain features

The web provides features and Apis that may have privacy or security risks if abused. In some cases, it is advisable to strictly limit how this functionality is used on a website. There are policy-controlled features that allow you to enable / disable the functionality for specific backgrounds or frames on a website. Where available, the feature integrates with the Permissions API or resource-specific mechanisms to verify that the resource is available.

Features include (more details on resource list):

  • Accelerometer

  • Sensor of ambient light

  • Auto-play

  • Camera

  • Encrypted media

  • Full screen

  • Geolocation

  • Gyroscope

  • Magnetometer

  • Microphone

  • Midi

  • Payment Request

  • Image

  • Loudspeaker

  • USB

  • VR / XR

Inferring the policy

Scripts can view information about the resource policy through the object FeaturePolicy located in Document.featurePolicy or HTMLIFrameElement.featurePolicy.

See some demonstrations of various policies

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.