13

Segundo o site do MDN Web Docs o atributo allow serve para

Specifies a feature policy for the <iframe>.

Traduzido

Especifica uma política de recursos para o <iframe>.

Fonte

Essa tal Política de Recursos seria para um desenvolvedor fazer determinadas coisas com os recursos e APIs do navegador, mas eu não entendi ainda para que isso serve e como funciona na prática.

Exemplo

<!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>

O exemplo acima contêm um vídeo do YouTube sendo incorporado na página através de um iframe. O iframe possui o atributo allow que tem os valores accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture, então o que vai acontecer quando esses valores forem definidos? Quais valores possíveis eu posso colocar no atributo allow?.

8
  • 1
    São as permissões que vão ser liberadas pelo navegador/youtube 4/11/2019 às 15:09
  • Como assim permissões? se no atributo allow no exemplo que dei acima, está com o valor autoplay como que o navegador vai liberar essa permissão de ativar/desativar/modificar sendo que, por exemplo, o Google Chrome ignora o atributo autoplay e não funciona! então neste caso não seria inútil em utilizar?
    – user168020
    4/11/2019 às 15:18
  • O autoplay não funciona em alguns casos, tipo navegador desatualizado, sem o https, etc... Mas isso também é útil para o Youtube 4/11/2019 às 15:24
  • Mas é nas versões antigas do Google Chrome que o autoplay funciona! atualmente também funciona, mas é necessário o atributo muted estar incluso, mas não é essa minha pergunta.
    – user168020
    4/11/2019 às 15:46
  • 3
    Eu acho que esse atributo serve apenas para informar à API quais os recursos disponíveis no iframe. Os valores não são padronizados (eu acho). O desenvolvedor da API que usa eles e nomeia como quiser. Por exemplo, eu poderia desenvolver uma API e usar um valor allow="telacheia", onde a API verifica se a tag possui o valor telacheia no atributo allow para que o usuário possa exibir algo em tela cheia (ex., um vídeo).
    – Meu ovo
    4/11/2019 às 16:16

1 Resposta 1

9
+50

TL;DR

Esse atributo pode ativar (permitir) ou desativar (não permitir) um recurso de um conteúdo de terceiros.

Como funciona

Para entender esse atributo, temos que entender o que é a Política de Recursos.

A Política de recursos permite que os desenvolvedores da Web ativem, desabilitem e modifiquem o comportamento de determinados recursos e APIs no navegador. É semelhante à Política de Segurança de Conteúdo, mas controla os recursos, as características em vez do comportamento de segurança.

Em poucas palavras a Política de Recursos fornece um mecanismo para declarar explicitamente que funcionalidade é usada (ou não usada) em todo o site. Isso permite que você bloqueie as práticas recomendadas pelo conteúdo, mesmo que a base de código dele evolua com o tempo, assim é possível compor conteúdo de terceiros com mais segurança limitando quais recursos estão disponíveis.

Com a Política de recursos, você aceita um conjunto de "políticas" para o navegador aplicar em recursos específicos usados ​​em um site. Essas políticas restringem quais APIs o site pode acessar ou modificar o comportamento padrão do navegador para determinados recursos.

Exemplos do que você pode fazer com a Política de Recursos:

  • Altere o comportamento padrão da reprodução automática em vídeos para celular e de terceiros.

  • Restrinja um site a usar APIs sensíveis, como câmera ou microfone.

  • Permita que iframes usem a API em tela cheia.

  • Bloqueie o uso de APIs desatualizadas, como XHR síncrono.

  • Verifique se as imagens estão dimensionadas corretamente e não são muito grandes para a viewport.

Conceitos e uso

A Política de recursos permite controlar quais origens podem usar quais recursos, na página de nível superior e nos quadros incorporados. Essencialmente, você escreve uma política, que é uma lista de origens permitidas para cada recurso. Para todos os recursos controlados pela Política de recursos, o recurso só será ativado no documento ou quadro atual se sua origem corresponder à lista de origens permitidas.

Para cada recurso controlado por política, o navegador mantém uma lista de origens para as quais o recurso está ativado, conhecido como lista de permissões. Se você não especificar uma política para um recurso, uma lista de permissões padrão será usada. A lista de permissões padrão é específica para cada recurso.

Escrevendo uma política

Uma política é descrita usando um conjunto de diretivas de política individuais. Uma diretiva de política é uma combinação de um nome de recurso definido e uma lista de permissões de origens que podem usar o recurso.

Especificando sua política:

Política de recursos fornece duas maneiras de especificar políticas para controlar os recursos:

  • O cabeçalho HTTP da política de recursos.

  • O atributo de permissão allow em iframes.

A principal diferença entre o cabeçalho HTTP e o atributo allow é que o atributo allow controla apenas os recursos em um iframe. O cabeçalho controla os recursos da resposta e qualquer conteúdo incorporado na página.

Um exemplo simples é este:

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

O atributo allow bloqueia o conteúdo do iframe de usar a câmera e o microfone do usuário.

Para mais detalhes, veja Usando a Política de Recursos.

Tipos de recursos controlados por políticas

Embora a Política de Recursos forneça controle de vários recursos usando uma sintaxe consistente, o comportamento dos recursos controlados por políticas varia e depende de vários fatores.

O princípio geral é que deve haver uma maneira intuitiva ou ininterrupta para que os desenvolvedores da Web detectem ou manejem o caso quando o recurso estiver desativado. Recursos recém-introduzidos podem ter uma API explícita para sinalizar o estado. Os recursos existentes que mais tarde se integram à Política de Recursos normalmente usam mecanismos existentes. Algumas abordagens incluem:

  • Retorne false para APIs JavaScript que exigem permissões de usuário.

  • Retorne false ou um erro de uma API JavaScript existente que fornece acesso ao recurso.

  • Altere os valores ou opções padrão que controlam o comportamento do recurso.

O conjunto atual de recursos controlados por políticas se enquadra em duas grandes categorias:

  • Aplicação de boas práticas para boas experiências do usuário.

  • Fornecendo controle granular sobre recursos sensíveis ou poderosos.

Práticas recomendadas para boas experiências do usuário

Existem vários recursos controlados por políticas para ajudar a aplicar as práticas recomendadas para fornecer bom desempenho e experiências do usuário.

Na maioria dos casos, os recursos controlados por política representam funcionalidades que, quando usadas, afetam negativamente a experiência do usuário. Para evitar a quebra de conteúdo da Web existente, o padrão para esses recursos controlados por política é permitir que a funcionalidade seja usada por todas as origens. As práticas recomendadas são aplicadas usando políticas que desabilitam os recursos controlados por políticas.

Os recursos incluem:

  • Animações indutoras de layout

  • Formatos de imagem herdados

  • Imagens de grandes dimensões

  • Scripts síncronos

  • XMLHTTPRequest síncrono

  • Imagens não otimizadas

  • Mídia não dimensionada

  • Controle granular sobre certos recursos

A web fornece funcionalidades e APIs que podem ter riscos de privacidade ou segurança se abusadas. Em alguns casos, convém limitar estritamente como essa funcionalidade é usada em um site. Existem recursos controlados por políticas que permitem ativar / desativar a funcionalidade para origens ou quadros específicos em um site. Onde disponível, o recurso se integra à API de Permissões ou mecanismos específicos do recurso para verificar se o recurso está disponível.

Os recursos incluem (mais detalhes em lista de recursos):

  • Acelerômetro

  • Sensor de luz ambiente

  • Reprodução automática

  • Câmera

  • Mídia criptografada

  • Tela cheia

  • Geolocalização

  • Giroscópio

  • Magnetômetro

  • Microfone

  • Midi

  • Pedido de Pagamento

  • Imagem em imagem

  • Alto falante

  • USB

  • VR / XR

Inferindo a política

Os scripts podem consultar informações sobre a política de recursos por meio do objeto FeaturePolicy localizado em Document.featurePolicy ou HTMLIFrameElement.featurePolicy.

Veja algumas demonstrações de várias políticas

Você deve fazer log-in para responder a esta pergunta.