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
oumicrophone
. - 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:
- Pelo cabeçalho HTTP
Feature-Policy
. - Com o atributo
allow
em iframes.
Cabeçalho HTTP Feature-Policy
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](https://developer.chrome.com/static/blog/feature-policy/image/violating-set-geolocatio-2e1e841fd18d8.png?authuser=19&hl=pt)
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, os seguintes
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 ehttps://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()
emabout: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.
iframe
s 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.
Se eu aplicar uma política, ela dura todas as navegações nas páginas?
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:
- Explicação sobre a política de recursos
- Especificações da política de recursos
- Demonstrações de pia de cozinha
- Extensão DevTools política de recursos: testador para testar políticas de recursos em uma página.
- Entradas de chromestatus.com