Protección de su sitio con política de funciones

Una de las funciones de la plataforma web destacadas en la reciente Chrome Dev Summit fue la Política de funciones, cuyo objetivo es "permitir a los autores de sitios habilitar y deshabilitar selectivamente el uso de varias funciones y API del navegador". En este artículo, echaré un vistazo a lo que eso significa para los desarrolladores web, con algunos ejemplos prácticos.

En su artículo introductorio en el sitio de Google Developers, Eric Bidelman describe la política de características de la siguiente manera:

“Las políticas de características en sí mismas son pequeños acuerdos de participación voluntaria entre el desarrollador y el navegador que pueden ayudar a fomentar nuestros objetivos de crear (y mantener) aplicaciones web de alta calidad”.

La especificación ha sido desarrollada en Google como parte de la actividad de Web Platform Incubator Group. El objetivo de la Política de funciones es que nosotros, como desarrolladores web, podamos indicar nuestro uso de una función de la plataforma web, explícitamente en el navegador. Al hacerlo, hacemos un acuerdo sobre nuestro uso o no uso de esta función en particular. En base a esto, el navegador puede actuar para bloquear ciertas funciones o informarnos que se está utilizando una función que no esperaba ver.

Los ejemplos pueden incluir:

1. Estoy incrustando un iframe y no quiero que el sitio incrustado pueda acceder a la cámara de mi visitante;
2. Quiero detectar situaciones en las que se implementan imágenes no optimizadas en mi sitio a través del CMS;
3. Hay muchos desarrolladores trabajando en mi proyecto y me gustaría saber si usan API obsoletas como document.write .

Todas estas cosas se pueden rastrear, bloquear o informar como parte de la Política de características.

Cómo usar la política de funciones

Para usar la política de funciones, el navegador necesita saber dos cosas: para qué función está creando una política y cómo desea que se maneje esa función.

 Feature-Policy: <directive> <allowlist>

La <directive> es el nombre de la función en la que está configurando la política.

La lista actual de funciones (obtenida de la presentación realizada en Chrome Dev Summit) es la siguiente:

• acelerómetro
• sensor de luz ambiental
• auto-reproducción
• cámara
• documento-escribir
• medios encriptados
• pantalla completa
• geolocalización
• giroscopio
• animaciones de diseño
• Carga lenta
• formatos de imagen heredados
• magnetómetro
• midi
• imágenes de gran tamaño
• pago
• imagen en imagen
• altavoz
• secuencia de comandos de sincronización
• sincronización-xhr
• imágenes no optimizadas
• medios sin tamaño
• USB
• desplazamiento vertical
• realidad virtual

La <allowlist> detalla cómo se puede usar la característica, si es que se usa, y toma uno o más de los siguientes valores.

• *
  La política más liberal, que establece que la función se permitirá en este documento y cualquier iframe, ya sea de este dominio o de otro lugar. Solo se puede usar como un valor único, ya que no tiene sentido habilitar todo y también pasar una lista de dominios, por ejemplo.
• self
  La característica estará disponible en el documento y en cualquier iframe, sin embargo, los iframes deben tener el mismo origen.
• src
  Solo se aplica cuando se usa un atributo de allow de iframe. Esto permite una función siempre que el documento cargado en ella provenga del mismo origen que la URL en el atributo src del iframe.
• none
  Deshabilita la función para el documento y cualquier iframe anidado. Solo se puede usar como un valor único.
• <origin(s)>
  La función está permitida para orígenes específicos; esto significa que puede especificar una lista de dominios en los que se permite la función. La lista de dominios está separada por espacios.

Existen dos métodos mediante los cuales puede habilitar políticas de características en su sitio: puede enviar un encabezado HTTP o usar el atributo allow en un iframe.

Encabezado HTTP

Enviar un encabezado HTTP significa que puede habilitar una política de características para la página o el sitio completo configurando ese encabezado, y también cualquier cosa incrustada en el sitio. Los encabezados se pueden configurar para todo su sitio en el servidor web o se pueden enviar desde su aplicación.

Por ejemplo, si quisiera evitar el uso de la API de geolocalización y estuviera usando el servidor web NGINX, podría editar los archivos de configuración de mi sitio en NGINX para agregar el siguiente encabezado, lo que evitaría cualquier documento en mi sitio y cualquier iframe incrustado desde el uso de la API de geolocalización.

 add_header Feature-Policy "geolocation none;";

Se pueden establecer varias políticas en un solo encabezado. Para evitar la geolocalización y la vibración, pero permitir unsized-media del dominio ejemplo.com , podría configurar lo siguiente:

 add_header Feature-Policy "vibrate none; geolocation none; unsized-media https://example.com;";

El atributo allow en iFrames

Si lo que nos preocupa principalmente es lo que sucede con el contenido de un iframe, podemos usar la política de características en el propio iframe; esto se beneficia de un soporte de navegador ligeramente mejor al momento de escribir con Chrome y Safari que admiten este uso.

Si estoy incrustando un sitio y no quiero que ese sitio use las API de geolocalización, cámara o micrófono, entonces mi iframe se vería como el siguiente ejemplo:

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

Es posible que ya esté familiarizado con los atributos individuales que controlan el contenido de los iframes allowfullscreen , allowpaymentrequest y allowusermedia . Estos pueden ser reemplazados por el atributo de allow de la política de características y, por razones de compatibilidad del navegador, puede usar ambos en un iframe. Si utiliza ambos atributos, se aplicará el más restrictivo. El artículo de Google muestra un ejemplo de un iframe que usa allowfullscreen , lo que significa que el iframe puede ingresar a pantalla completa, pero luego una política de características en conflicto de fullscreen none . Estos entran en conflicto, por lo que gana la política más restrictiva y este iframe no podría ingresar a pantalla completa.

 <iframe allowfullscreen allow="fullscreen 'none'" src="...">

El elemento iframe también tiene un atributo de sandbox aislado diseñado para administrar la compatibilidad con muchas características. Esta función también se agregó a la Política de seguridad de contenido con un sandbox de zona de pruebas que desactiva todas las funciones de la zona de pruebas, que luego se pueden volver a habilitar de forma selectiva. Existe cierto cruce entre las características de la zona de pruebas y las controladas por la política de funciones, y la política de funciones no busca duplicar los valores que ya están cubiertos por la zona de pruebas. Sin embargo, aborda algunas de las limitaciones de la zona de pruebas al adoptar un enfoque más detallado para administrar estas políticas, en lugar de apagar todo globalmente como un gran conjunto de políticas.

Política de características y API de informes

Las infracciones de la política de funciones se pueden informar a través de la API de informes, lo que significa que puede desarrollar un conjunto completo de políticas de seguimiento del uso de funciones en su sitio. Esto sería completamente transparente para sus usuarios, pero le brindaría una gran cantidad de información sobre cómo se utilizan las funciones.

Compatibilidad del navegador con la política de características

Actualmente, la compatibilidad del navegador con la Política de funciones se limita a Chrome; sin embargo, en muchos casos en los que utiliza la Política de funciones durante el desarrollo y cuando obtiene una vista previa de los sitios, esto no es necesariamente un problema.

Muchos de los casos de uso que describiré a continuación se pueden usar en este momento, sin causar ningún impacto a los visitantes del sitio que usan navegadores sin soporte.

Cuándo usar la política de características

Me gusta mucho la idea de poder usar la política de funciones para ayudar a respaldar las decisiones tomadas al desarrollar el sitio. Decisiones que bien pueden estar escritas en documentos como un presupuesto de rendimiento o como parte de una auditoría de GDPR, pero que luego se convierten en algo que debemos recordar para preservar a lo largo de la vida del sitio. Esto no siempre es fácil cuando varias personas trabajan en un sitio; personas que tal vez no estuvieron involucradas durante la toma de decisiones inicial, o que simplemente no estaban al tanto de los requisitos. Pensamos mucho en los terceros que logran impactar de alguna manera nuestro sitio, sin embargo, ¡a veces nuestros sitios necesitan protegerse de nosotros mismos!

Mantener un ojo en terceros

Puede evitar que un sitio de terceros acceda a la cámara o al micrófono mediante una política de funciones en el iframe con el atributo allow . Si el motivo para incrustar ese sitio no tiene nada que ver con esas funciones, deshabilitarlas significa que el sitio nunca podrá comenzar a solicitarlas. Luego, esto podría vincularse con sus procesos para garantizar el cumplimiento de GDPR. A medida que audita el impacto de privacidad de su sitio, puede crear procesos para bloquear el acceso de terceros mediante una política de funciones, lo que le brinda a usted y a sus visitantes seguridad y tranquilidad adicionales.

Este uso depende de la compatibilidad del navegador con la política de características para bloquear el uso. Sin embargo, puede usar el modo de informe de Política de funciones para informarle sobre el uso de estas API si el tercero cambia lo que estaría haciendo. Esto le daría un aviso muy rápido, esencialmente tan pronto como la primera persona que usa Chrome llegue al sitio.

Funciones de habilitación selectiva

También es posible que deseemos habilitar selectivamente algunas funciones que normalmente están bloqueadas. Tal vez deseemos permitir que un iframe cargue contenido de otro sitio para usar la función de geolocalización en el navegador. Chrome bloquea esto de forma predeterminada, pero si está cargando contenido desde un sitio confiable, puede habilitar la solicitud de origen cruzado usando la Política de funciones. Esto significa que puede activar funciones de forma segura al cargar contenido de otro dominio que está bajo su control.

Detectar el uso de API obsoletas y funciones de bajo rendimiento

La política de características se puede ejecutar en un modo de solo informe. Luego puede rastrear el uso de ciertas funciones y avisarle cuando se encuentran en el sitio. Esto puede ser útil en muchos escenarios. Si tiene un sitio muy grande con una gran cantidad de código heredado, habilitar la Política de funciones lo ayudará a rastrear los lugares que necesitan atención. Si trabaja con un equipo grande (especialmente si los desarrolladores a menudo extraen algunas bibliotecas de código de terceros), la Política de características puede detectar cosas que preferiría no ver en el sitio.

Tratar con imágenes mal optimizadas

Si bien la mayoría de los artículos que he visto sobre la Política de funciones se concentran en los aspectos de seguridad y privacidad, las funciones relacionadas con la optimización de imágenes realmente me atrajeron, como alguien que maneja una gran cantidad de contenido generado por usuarios técnicos y no técnicos. La política de características se puede utilizar para ayudar a proteger la experiencia del usuario, así como el rendimiento de su sitio, al evitar que los visitantes descarguen imágenes demasiado grandes o no optimizadas.

En un mundo ideal, su CMS se ocuparía de la administración de imágenes, asegurándose de que las imágenes se redimensionaran con sensatez, se optimizaran para la web y el contexto en el que se mostrarán. Sin embargo, la vida real rara vez es ese mundo ideal, por lo que a veces el trabajo de cambiar el tamaño y la optimización de las imágenes se deja a los editores de contenido para asegurarse de que no carguen imágenes enormes en la web. Esto es particularmente un problema si está utilizando un CMS estático sin una capa de administración de contenido encima. Incluso como persona técnica, es muy fácil olvidarse de cambiar el tamaño de esa captura de pantalla gigante o de la imagen de la cámara que colocó en una carpeta como marcador de posición.

Actualmente detrás de una bandera en Chrome hay características que pueden ayudar. La idea detrás de estas características es resaltar las imágenes problemáticas para que puedan corregirse, sin romper completamente el sitio.

La política de función unsized-media sin tamaño busca imágenes o videos que no tienen un tamaño establecido en HTML o CSS. Cuando se carga un elemento multimedia sin tamaño, puede hacer que el contenido de la página se redistribuya.

Para evitar que se agreguen medios sin tamaño al sitio, configure el siguiente encabezado. Los medios se mostrarán con un tamaño predeterminado de 300 × 150 píxeles. Verá que su sitio se carga con medios pequeños y se dará cuenta de que tiene un problema que solucionar.

 Feature-Policy: unsized-media 'none'

Vea una demostración (necesita Chrome Canary con funciones de plataforma web experimental activadas).

La política de función oversized-images verifica que las imágenes no sean mucho más grandes que su contenedor. Si lo son, se mostrará un marcador de posición en su lugar. Esta política es increíblemente útil para verificar que no está enviando imágenes de escritorio enormes a sus usuarios móviles.

 Feature-Policy: oversized-images 'none'

Vea una demostración (necesita Chrome Canary con funciones de plataforma web experimental activadas).

La política de función unoptimized-images verifica si el tamaño de los datos de las imágenes en bytes no es más de 0,5 veces mayor que su área de representación en píxeles. Si esta política está habilitada y las imágenes la infringen, se mostrará un marcador de posición en lugar de la imagen.

 Feature-Policy: unoptimized-images 'none'

Vea una demostración (necesita Chrome Canary con funciones de plataforma web experimental activadas).

Pruebas e informes sobre la política de características

Chrome DevTools mostrará un mensaje para informarle que ciertas funciones han sido bloqueadas o habilitadas por una política de funciones. Si ha habilitado la política de funciones en su sitio, puede comprobar que funciona.

También se ha agregado compatibilidad con la política de características al sitio de encabezados de seguridad, lo que significa que puede verificarlos junto con encabezados como la política de seguridad de contenido en su sitio u otros sitios en la web.

Hay una extensión de Chrome DevTools que le permite activar y desactivar diferentes políticas de funciones (también una excelente manera de verificar sus páginas sin necesidad de configurar ningún encabezado).

Si desea integrar sus políticas de características con la API de informes, aquí encontrará más información sobre cómo hacerlo.

Más lecturas y recursos

He encontrado una serie de recursos, muchos de los cuales utilicé al investigar este artículo. Estos deberían brindarle todo lo que necesita para comenzar a implementar la política de características en sus propias aplicaciones. Si ya está utilizando la Política de seguridad de contenido, este parece un paso lógico adicional para controlar la forma en que su sitio funciona con el navegador para ayudar a garantizar la seguridad y la privacidad de las personas que usan su sitio. Tiene la ventaja añadida de poder utilizar la política de funciones para mantenerse al tanto de los elementos que dañan el rendimiento que se agregan a su sitio con el tiempo.

• Especificación de política de características
• Introducción a la política de funciones
• Vista desde Chrome Dev Summit
• Política de características en MDN
• ¿Puedo usar la política de funciones?
• Demostraciones de políticas de funciones
• Configurar encabezados de política de características, política de referencia y política de seguridad de contenido en Nginx