Introdução à política de recursos

Resumo

A Política de recursos permite que os desenvolvedores Web ativem, desativem e modificar o comportamento de determinadas APIs e recursos da Web no navegador. É como CSP, mas, em vez de controlar a segurança, ele controla recursos.

As políticas de recursos em si são pequenos contratos de permissão entre os desenvolvedores. e navegador que possam nos ajudar a promover nossos objetivos de desenvolver (e manter) de alta qualidade.

Introdução

Criar para a web é uma aventura rochosa. Já é difícil o suficiente criar um design excepcional aplicativo da web que valoriza o desempenho e usa as práticas recomendadas mais recentes. É ainda é difícil manter essa experiência incrível ao longo do tempo. À medida que seu projeto evolui, os desenvolvedores entram, novos recursos são lançados e a base de código cresce. Isso Uma TM de uma boa experiência que você já conseguiu pode começar a deteriorar e a UX comece a sofrer! A política de recursos foi criada para ajudar você a se manter no caminho certo.

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

Confira alguns exemplos do que é possível fazer com a política de recursos:

  • Mudar o comportamento padrão de autoplay em vídeos para celular e de terceiros.
  • Impeça que um site use APIs confidenciais, como camera ou microphone.
  • Permitir que os iframes usem a API fullscreen.
  • Bloqueie o uso de APIs desatualizadas, como XHR síncrono e document.write().
  • Verifique se as imagens estão dimensionadas corretamente (por exemplo, para evitar a sobrecarga de layout) e não muito grande para a janela de visualização (por exemplo, desperdício de largura de banda do usuário).

As políticas são um contrato entre o desenvolvedor e o navegador. Eles informam navegador sobre a intenção do desenvolvedor e, assim, manter-nos honestos ao nosso app tenta desviar dos trilhos e fazer algo ruim. Se o site ou incorporado o conteúdo de terceiros tenta violar algum dos termos pré-selecionados regras, o navegador substitui o comportamento por uma UX melhor ou bloqueia a API completamente.

Como usar a política de recursos

A política de recursos oferece duas maneiras de controlar os recursos:

  1. Pelo cabeçalho HTTP Feature-Policy.
  2. Com o atributo allow em iframes.
.

A maneira mais fácil de usar a Política de recursos é enviando a solicitação HTTP Feature-Policy com a resposta de uma página. O valor deste cabeçalho é uma política ou de políticas que você quer que o navegador respeite para uma determinada origem:

Feature-Policy: <feature> <allow list origin(s)>

A lista de permissões de origem pode ter vários valores diferentes:

  • *: o recurso é permitido em contextos de navegação de nível superior e em contextos de navegação aninhados contextos de navegação (iframes).
  • 'self': o recurso é permitido em contextos de navegação de nível superior e contextos de navegação aninhados de mesma origem. Ele não é permitido em documentos em contextos de navegação aninhados.
  • 'none': o recurso não é permitido em contextos de navegação de nível superior. não permitido em contextos de navegação aninhados.
  • <origin(s)>: origens específicas para ativar a política (por exemplo, https://example.com).

Exemplo

Digamos que você queira bloquear todo o conteúdo a API de geolocalização do seu site. É possível fazer isso enviando uma solicitação lista de permissões de 'none' para o recurso geolocation:

Feature-Policy: geolocation 'none'

Se um trecho de código ou iframe tentar usar a API de geolocalização, o navegador o bloqueia. Isso é verdadeiro mesmo se o usuário já tiver dado permissão para compartilhar a localização dele.

Violação da política de geolocalização definida
Violar a política de geolocalização definida.

Em outros casos, pode fazer sentido flexibilizar um pouco essa política. Podemos permitir nossa própria origem para usar a API Geolocation, mas evitar que conteúdo de terceiros acessá-lo definindo 'self' na lista de permissões:

Feature-Policy: geolocation 'self'

O atributo iframe allow

A segunda maneira de usar a Política de recursos é controlar o conteúdo dentro um iframe. Use o atributo allow para especificar uma lista de políticas para conteúdo incorporado:

<!-- Allow all browsing contexts within this iframe to use fullscreen. -->
<iframe src="https://example.com..." allow="fullscreen"></iframe>

<!-- Equivalent to: -->
<iframe src="https://example.com..." allow="fullscreen *"></iframe>

<!-- Allow only iframe content on a particular origin to access the user's location. -->
<iframe
  src="https://another-example.com/demos/..."
  allow="geolocation https://another-example.com"
></iframe>

E quanto aos atributos de iframe existentes?

Alguns dos recursos controlados pela política de recursos têm um para controlar seu comportamento. Por exemplo, <iframe allowfullscreen>. é um atributo que permite que o conteúdo iframe use o API HTMLElement.requestFullscreen(). Também há os atributos allowpaymentrequest e allowusermedia para permitir o API Payment Request e getUserMedia(), respectivamente.

Tente usar o atributo allow em vez dos antigos atributos sempre que possível. Nos casos em que é necessário oferecer suporte compatibilidade usando o atributo allow com um atributo legado equivalente é perfeitamente aceitável (por exemplo, <iframe allowfullscreen allow="fullscreen">). A política mais restritiva prevalece. Por exemplo, o seguinte o iframe não poderia entrar em tela cheia porque allow="fullscreen 'none'" é mais restritivo que allowfullscreen:

<!-- Blocks fullscreen access if the browser supports feature policy. -->
<iframe allowfullscreen allow="fullscreen 'none'" src="..."></iframe>

Controle de várias políticas de uma só vez

Vários recursos podem ser controlados ao mesmo tempo enviando o cabeçalho HTTP com uma lista separada por ; de diretivas de política:

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

ou envie um cabeçalho separado para cada política:

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

Esse exemplo faria o seguinte:

  • Não permite o uso de unsized-media em todos os contextos de navegação.
  • Não permite o uso de geolocation para todos os contextos de navegação, exceto para origem da própria página e https://example.com.
  • Concede acesso ao camera para todos os contextos de navegação.

Exemplo: configurar várias políticas em um iframe

<!-- Blocks the iframe from using the camera and microphone
     (if the browser supports feature policy). -->
<iframe allow="camera 'none'; microphone 'none'"></iframe>

JavaScript API

Embora o Chrome 60 tenha adicionado suporte ao cabeçalho HTTP Feature-Policy e ao allow em iframes, a API JavaScript foi adicionada no Chrome 74.

Essa API permite que o código do cliente determine quais recursos são permitidos por uma página, frame ou navegador. Você pode acessar os recursos dele em document.featurePolicy para o documento principal ou frame.featurePolicy para o documento iframes.

Exemplo

O exemplo abaixo ilustra os resultados de enviar uma política de Feature-Policy: geolocation 'self' no site https://example.com:

/* @return {Array<string>} List of feature policies allowed by the page. */
document.featurePolicy.allowedFeatures();
// → ["geolocation", "midi",  "camera", "usb", "autoplay",...]

/* @return {boolean} True if the page allows the 'geolocation' feature. */
document.featurePolicy.allowsFeature('geolocation');
// → true

/* @return {boolean} True if the provided origin allows the 'geolocation' feature. */
document.featurePolicy.allowsFeature(
  'geolocation',
  'https://another-example.com/'
);
// → false

/* @return {Array<string>} List of feature policies allowed by the browser
regardless of whether they are in force. */
document.featurePolicy.features();
// → ["geolocation", "midi",  "camera", "usb", "autoplay",...]

/* @return {Array<string>} List of origins (used throughout the page) that are
   allowed to use the 'geolocation' feature. */
document.featurePolicy.getAllowlistForFeature('geolocation');
// → ["https://example.com"]

Lista de políticas

Quais recursos podem ser controlados pela Política de recursos?

No momento, falta uma documentação sobre quais políticas são implementadas. e como usá-los. A lista também aumentará com o tempo, à medida que diferentes navegadores adotar a especificação e implementar várias políticas. A política de recursos será dinâmica objetivos e bons documentos de referência com certeza serão necessários.

Por enquanto, existem algumas maneiras de saber quais recursos podem ser controlados.

  • Confira nossas demonstrações na Política de recursos da pia. Há exemplos de cada política implementada no Blink.
  • Verifique a origem do Chrome. para a lista de nomes de atributos.
  • Consulte document.featurePolicy.allowedFeatures() em about:blank para encontrar a lista:
        ["geolocation",
         "midi",
         "camera",
         "usb",
         "magnetometer",
         "fullscreen",
         "animations",
         "payment",
         "picture-in-picture",
         "accelerometer",
         "vr",
        ...
  • Acesse chromestatus.com para ver as políticas que foram implementados ou estão sendo considerados no Blink.

Para determinar como usar algumas dessas políticas, consulte a repositório do GitHub da especificação (link em inglês). Ele contém explicações sobre algumas das políticas.

Perguntas frequentes

Quando devo usar a Política de recursos?

Todas as políticas são opcionais, portanto, use a Política de recursos quando/onde fizer sentido. Para Por exemplo, se o app for uma galeria de imagens, a maximum-downscaling-image ajudaria a evitar o envio de imagens enormes para janelas de visualização de dispositivos móveis.

Outras políticas, como document-write e sync-xhr, precisam ser usadas com mais com cuidado. Ativar esse recurso pode corromper conteúdo de terceiros, como anúncios. No(s) dia(s) Por outro lado, a Política de recursos pode ser uma verificação rápida para garantir que suas páginas nunca usa essas APIs horríveis.

Eu uso a Política de recursos no desenvolvimento ou na produção?

Ambos. Recomendamos ativar as políticas durante o desenvolvimento e manter políticas ativas durante a produção. Ativar as políticas durante o desenvolvimento pode ajudar você a começar no caminho certo. Ele ajudará você a detectar regressões antes que aconteçam. Manter as políticas ativadas na produção para garantir uma determinada UX para os usuários.

É possível denunciar violações de políticas ao meu servidor?

Uma API Reporting está em desenvolvimento. Assim como os sites podem ativar o recebimento de relatórios sobre Violações da CSP ou suspensões de uso, receber relatórios sobre violações da política de recursos em tempo real.

Quais são as regras de herança para conteúdo iframe?

Os scripts (próprios ou de terceiros) herdam a política de navegação contexto. Isso significa que os scripts de nível superior herdam as políticas do documento principal.

iframes herdam as políticas da página pai. Se o iframe tiver um allow, a política mais rígida entre a página pai e o allow lista, vence. Para mais informações sobre o uso do iframe, consulte a Atributo allow em iframes.

Não. O ciclo de vida de uma política se aplica a uma única resposta de navegação de página. Se o usuário navegar para uma nova página, o cabeçalho Feature-Policy deverá ser explicitamente enviada na nova resposta para que a política seja aplicada.

Quais navegadores são compatíveis com a política de recursos?

Acesse caniuse.com para conferir as novidades detalhes sobre a compatibilidade com os navegadores.

No momento, o Chrome é o único navegador que aceita a política de recursos. No entanto, como toda a superfície da API pode ser ativada ou detectada pelos recursos, Política de recursos adapta-se bem ao aprimoramento progressivo.

Conclusão

A política de recursos fornece um caminho bem-iluminado para melhorar a UX e tem um bom desempenho. É especialmente útil ao desenvolver ou manter um aplicativo porque pode ajudar a evitar possíveis alvos antes que eles entrem na sua base de código.

Outros recursos: