Resumen
La política de funciones permite que los desarrolladores web habiliten, inhabiliten y modificar el comportamiento de ciertas APIs y funciones web del navegador. Es como CSP, pero en lugar de controlar la seguridad, controles de seguridad.
Las políticas de funciones en sí son pequeños acuerdos de aceptación entre los desarrolladores y navegador que nos ayudan a promover nuestros objetivos de crear (y mantener) sitios web y de alta calidad.
Introducción
Crear contenido para la Web es una aventura rocosa. Ya es difícil crear un modelo de primera clase, una aplicación web que mejora el rendimiento y usa las prácticas recomendadas más recientes. Es incluso hacer que esa experiencia sea genial con el tiempo. A medida que tu proyecto evoluciona, se unen los desarrolladores, llegan nuevas funciones y crece la base de código. Que La Great Experience TM que una vez conseguiste puede comenzar a deteriorarse y la UX empieza a sufrir. La política de funciones está diseñada para mantenerte al día.
Con la Política de funciones, habilitas un conjunto de “políticas” para que el navegador haga lo siguiente: aplicar de manera forzosa funciones específicas que se usen en todo el sitio. Estas políticas restringen a qué APIs puede acceder el sitio o para modificar el comportamiento predeterminado del navegador determinadas funciones.
Estos son algunos ejemplos de lo que puedes hacer con la política de funciones:
- Cambia el comportamiento predeterminado
de
autoplay
en dispositivos móviles y videos de terceros. - Impide que un sitio use APIs sensibles, como
camera
omicrophone
. - Permitir que los iframes usen la API de
fullscreen
- Bloquea el uso de APIs desactualizadas, como XHR síncrona y
document.write()
. - Asegúrate de que las imágenes tengan el tamaño adecuado (p.ej., evita la hiperpaginación del diseño) y de que no tengan demasiado grande para el viewport (p.ej., desperdicio del ancho de banda del usuario).
Las políticas son un contrato entre el desarrollador y el navegador. Informan al navegador acerca de la intención del desarrollador y, por lo tanto, ayudarnos a mantener la honestidad cuando nuestra aplicación intenta descarrilarse y hacer algo malo. Si el sitio o los dispositivos incorporados el contenido de terceros intenta infringir cualquiera de las políticas preseleccionadas reglas de firewall, el navegador anula el comportamiento con una mejor UX o bloquea la API por completo.
Uso de la política de funciones
La política de funciones proporciona dos formas de controlar las funciones:
- A través del encabezado HTTP
Feature-Policy
- Con el atributo
allow
en iframes
El encabezado HTTP Feature-Policy
La forma más fácil de usar la política de funciones es enviar el HTTP Feature-Policy
con la respuesta de una página. El valor de este encabezado es una política o un
de políticas que deseas que el navegador respete para un origen determinado:
Feature-Policy: <feature> <allow list origin(s)>
La lista de entidades permitidas de origen puede tener varios valores diferentes:
*
: La función se permite en contextos de navegación de nivel superior y en contextos anidados de navegación (iframes).'self'
: La función se permite en contextos de navegación de nivel superior y contextos de navegación anidados del mismo origen. No está permitido en el origen cruzado. documentos en contextos de navegación anidados.'none'
: La función no está permitida en contextos de navegación de nivel superior y en contextos de navegación anidada.<origin(s)>
: Orígenes específicos para los que se habilitará la política (p.ej.,https://example.com
).
Ejemplo
Supongamos que quieres bloquear todo el contenido para que no se use
la API de Geolocation en todo tu sitio. Puedes hacerlo enviando una solicitud
lista de entidades permitidas de 'none'
para la función geolocation
:
Feature-Policy: geolocation 'none'
Si un fragmento de código o iframe intenta usar la API de Geolocation, el navegador lo bloquea. Esto ocurre incluso si el usuario ya dio permiso para compartir su ubicación.
![Incumplimiento de la política establecida de ubicación geográfica](https://developer.chrome.google.cn/static/blog/feature-policy/image/violating-set-geolocatio-2e1e841fd18d8.png?authuser=7&hl=es-419)
En otros casos, puede que tenga sentido flexibilizar un poco esta política. Podemos permitir
nuestro propio origen para usar la API de Geolocation, pero también impedir que el contenido de terceros
Para acceder a él, configura 'self'
en la lista de entidades permitidas:
Feature-Policy: geolocation 'self'
El atributo iframe allow
La segunda forma de usar la política de funciones es controlar el contenido en
un objeto iframe
. Usa el atributo allow
para especificar una lista de políticas
Contenido 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>
¿Qué ocurre con los atributos de iframe existentes?
Algunas de las funciones controladas por la política de funciones tienen un
para controlar su comportamiento. Por ejemplo, <iframe allowfullscreen>
.
es un atributo que permite que el contenido iframe use el
API de HTMLElement.requestFullscreen()
. También están allowpaymentrequest
y
atributos allowusermedia
para permitir las
API de Payment Request y getUserMedia()
,
respectivamente.
Intenta usar el atributo allow
en lugar de estos antiguos
atributos cuando sea posible. Para los casos en los que necesitas compatibilidad con versiones anteriores
compatibilidad con el atributo allow
con un atributo heredado equivalente
funciona perfectamente (p.ej., <iframe allowfullscreen allow="fullscreen">
).
Ten en cuenta que la política más restrictiva gana. Por ejemplo, el siguiente
iframe no podría entrar en pantalla completa porque
allow="fullscreen 'none'"
es más restrictivo que allowfullscreen
:
<!-- Blocks fullscreen access if the browser supports feature policy. -->
<iframe allowfullscreen allow="fullscreen 'none'" src="..."></iframe>
Cómo controlar varias políticas a la vez
Se pueden controlar varias funciones al mismo tiempo si se envía el encabezado HTTP
con una lista separada por ;
de directivas de políticas:
Feature-Policy: unsized-media 'none'; geolocation 'self' https://example.com; camera *;
o envía un encabezado independiente para cada política:
Feature-Policy: unsized-media 'none'
Feature-Policy: geolocation 'self' https://example.com
Feature-Policy: camera *;
En este ejemplo, se haría lo siguiente:
- No permite el uso de
unsized-media
en todos los contextos de navegación. - No permite el uso de
geolocation
para todos los contextos de navegación, excepto para el origen de la página yhttps://example.com
. - Permite el acceso de
camera
para todos los contextos de navegación.
Ejemplo: Configuración de varias políticas en un iframe
<!-- Blocks the iframe from using the camera and microphone
(if the browser supports feature policy). -->
<iframe allow="camera 'none'; microphone 'none'"></iframe>
API de JavaScript
Mientras que Chrome 60 agregó compatibilidad con el encabezado HTTP Feature-Policy
y el encabezado
El atributo allow
en iframes, la API de JavaScript se agregó en Chrome 74.
Esta API permite que el código del cliente determine las funciones permitidas por una
página, marco o navegador. Puedes acceder a sus accesorios en
document.featurePolicy
para el documento principal o frame.featurePolicy
para
iframes.
Ejemplo
El siguiente ejemplo ilustra los resultados de enviar una política de
Feature-Policy: geolocation 'self'
en el sitio 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
¿Qué funciones se pueden controlar con la política de funciones?
En este momento, hay falta de documentación sobre qué políticas se implementan y cómo usarlas. La lista también crecerá con el paso del tiempo, a medida que los distintos para adoptar la especificación e implementar varias políticas. La política de funciones se trasladará sin duda se necesitarán buenos documentos de referencia.
Por ahora, hay un par de formas de ver qué funciones se pueden controlar.
- Consulta nuestras demostraciones de la Política de funciones para el fregadero de cocina. Tiene ejemplos de cada política que se implementó en Blink.
- Consulta la fuente de Chrome. para la lista de nombres de las funciones.
- Consulta
document.featurePolicy.allowedFeatures()
enabout:blank
para encontrar la lista:
["geolocation",
"midi",
"camera",
"usb",
"magnetometer",
"fullscreen",
"animations",
"payment",
"picture-in-picture",
"accelerometer",
"vr",
...
- Consulta chromestatus.com para conocer las políticas que se actualizaron no se implementan ni se consideran en Blink.
Para determinar cómo usar algunas de estas políticas, consulta la repositorio de GitHub de spec. Contiene algunas explicaciones sobre algunas de las políticas.
Preguntas frecuentes
¿Cuándo debo usar la política de funciones?
Todas las políticas se habilitan, así que úsalas cuando y donde sea apropiado. Para
Por ejemplo, si tu app es una galería de imágenes, maximum-downscaling-image
te ayudaría a evitar el envío de imágenes gigantes a viewports de dispositivos móviles.
Otras políticas, como document-write
y sync-xhr
, deben usarse con más
y se debe manejar con un cuidado excepcional. Si los activas, es posible que se generen daños en el contenido de terceros, como los anuncios. En la
Por otro lado, la política de funciones puede ser una comprobación visceral para garantizar que tus páginas
nunca use estas APIs terribles.
¿Uso la política de funciones en el desarrollo o la producción?
Ambas. Te recomendamos activar las políticas durante el desarrollo y mantener la políticas activas mientras se encuentran en producción. Activar las políticas durante el desarrollo puede ayudarte a comenzar por el buen camino. Te ayudará a detectar cualquier problema regresiones antes de que ocurran. Mantener las políticas activadas durante la producción para garantizar una cierta UX para los usuarios.
¿Hay alguna manera de denunciar incumplimientos de política a mi servidor?
Una API de Reporting está en proceso. Del mismo modo en que los sitios pueden habilitar la recepción de informes sobre Incumplimientos de la CSP bajas, podrás podrás recibir informes sobre incumplimientos de políticas de funciones en un entorno real.
¿Cuáles son las reglas de herencia para el contenido iframe?
Las secuencias de comandos (propias o de terceros) heredan la política de su navegación adicional. Esto significa que las secuencias de comandos de nivel superior heredan las políticas del documento principal.
Los elementos iframe
heredan las políticas de su página superior. Si iframe
tiene un
El atributo allow
, la política más estricta entre la página principal y la allow
gana. Para obtener más información sobre el uso de iframe
, consulta la
Atributo allow
en iframes.
Si aplico una política, ¿esta dura entre las navegaciones de páginas?
No. La vida útil de una política es para una sola respuesta de navegación de página. Si
el usuario navega a una página nueva, el encabezado Feature-Policy
debe estar explícitamente
enviados en la respuesta nueva para que se aplique la política.
¿Qué navegadores admiten la política de funciones?
Visita caniuse.com para conocer las últimas novedades detalles sobre la compatibilidad del navegador.
A partir de ahora, Chrome es el único navegador compatible con la política de funciones. Sin embargo, dado que toda la plataforma de la API es optativa o detectable, la política de funciones se presta bien a la mejora progresiva.
Conclusión
La política de funciones puede ayudar a proporcionar un camino bien iluminado un buen rendimiento. Resulta particularmente útil al desarrollar o mantener una app ya que puede ayudar a evitar posibles pistolas antes de que se infiltran en tu base de código.
Recursos adicionales:
- Explicación de la política de funciones
- Especificaciones de la política de funciones
- Demostraciones de fregaderos de cocina
- Extensión de Herramientas para desarrolladores de políticas de funciones: Verificador para probar políticas de funciones en una página.
- Entradas de chromestatus.com