Introducción a la política de funciones

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 o microphone.
  • 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:

  1. A través del encabezado HTTP Feature-Policy
  2. Con el atributo allow en iframes

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
Incumplimiento de la política establecida de ubicación geográfica.

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 y https://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.

        ["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.

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: