¿Cómo gestionar las políticas de seguridad y configuración avanzada en un manifiesto de extensión?

En el desarrollo de extensiones para navegadores, la configuración de las políticas de seguridad y las características avanzadas en el manifiesto de la extensión juega un papel fundamental. Estas configuraciones no solo afectan la seguridad, sino que también permiten la correcta integración y el comportamiento de la extensión en diversos contextos. A continuación, se describen algunas de las propiedades más importantes que se encuentran en el archivo de manifiesto de una extensión y que deben ser comprendidas y gestionadas correctamente.

Por otro lado, la propiedad all_frames extiende esta capacidad a los marcos anidados dentro de la página. Esto es crucial cuando se necesita aplicar el contenido del script no solo en el documento principal, sino también dentro de los iframes o marcos secundarios. De este modo, el comportamiento de la extensión se expande a todas las partes de la página web sin excepciones. Un ejemplo de su uso sería:

json
Copy code
"content_scripts": [

  {
    "matches": ["*://example.com/*"],

    "js": ["scripts/content-script.js"],

    "css": ["styles/content-script.css"],
    "run_at": "document_end",

    "match_about_blank": true,

    "all_frames": true
  }
]

La propiedad content_security_policy es otra de las configuraciones clave que permite definir las políticas de seguridad del contenido de la extensión. A partir de Manifest V3, esta propiedad ha experimentado importantes cambios, ya que se introdujo una estructura más detallada y específica para cada tipo de página. Las extensiones deben establecer estas políticas con un enfoque más riguroso para garantizar la seguridad, limitando el uso de funciones peligrosas como eval() o la ejecución de scripts de terceros.

Por ejemplo, la política de seguridad para las páginas de extensión no sandboxed podría definirse de la siguiente forma:

json
Copy code
"content_security_policy": {
  "extension_pages": "script-src 'self'; object-src 'self'"
}

Es importante resaltar que, en Manifest V3, algunas restricciones son impuestas para evitar operaciones inseguros, lo que reduce el riesgo de ataques como el cross-site scripting (XSS) y otras vulnerabilidades relacionadas con la ejecución de código no verificado.

En el contexto de la seguridad y la protección de la extensión contra vulnerabilidades de origen cruzado, el cross_origin_embedder_policy y el cross_origin_opener_policy son propiedades esenciales que deben ser configuradas correctamente. Estas políticas son necesarias cuando se habilitan características que requieren aislamiento de origen cruzado, como el uso de recursos provenientes de orígenes externos. Es importante establecer ambas propiedades en conjunto para que el aislamiento funcione correctamente, como en el siguiente ejemplo:

json
Copy code
"cross_origin_embedder_policy": { "value": "require-corp" },

"cross_origin_opener_policy": { "value": "same-origin" }

Si bien estas configuraciones son esenciales para un alto nivel de seguridad, también pueden ser complejas de gestionar, ya que pueden generar conflictos con otros recursos o funcionalidades que dependen de ciertas reglas de acceso entre dominios.

Además, la propiedad declarative_net_request se usa para definir las reglas a aplicar a través de la API de Declarative Net Request. Esto permite a las extensiones filtrar solicitudes de red de manera declarativa, es decir, sin necesidad de manipular directamente el código de las solicitudes. El uso de estas reglas es útil, por ejemplo, en la creación de bloqueadores de anuncios o herramientas que requieren el manejo de tráfico de red específico. Un ejemplo de esta configuración sería el siguiente:

json
Copy code
"declarative_net_request": {
  "rule_resources": [

    { "id": "ruleset_1", "enabled": true, "path": "ruleset_1.json" },

    { "id": "ruleset_2", "enabled": false, "path": "ruleset_2.json" }
  ]
}

Es crucial entender que el manifiesto de una extensión no solo define las políticas y los permisos de la extensión, sino que también establece su funcionamiento en el contexto del navegador. Las extensiones pueden tener páginas de herramientas de desarrollo (devtools_page), que permiten interactuar con la extensión desde el panel de herramientas del navegador, proporcionando una forma de monitorear y depurar las extensiones de manera eficiente.

Finalmente, la propiedad default_locale se utiliza para definir la localización predeterminada de la extensión. Esto es importante si se desea ofrecer soporte para diferentes idiomas, ya que garantiza que el contenido de la extensión se adapte al idioma configurado en el navegador del usuario. Además, la propiedad description proporciona una descripción clara y concisa de la extensión, la cual será visible para los usuarios en la tienda de extensiones del navegador.

Las propiedades relacionadas con la seguridad y la configuración avanzada, como las mencionadas, son fundamentales para garantizar tanto el correcto funcionamiento de la extensión como su seguridad. Es necesario que los desarrolladores estén al tanto de los cambios que ocurren entre las distintas versiones del manifiesto, como el paso de MV2 a MV3, y adapten sus extensiones a los nuevos requisitos de seguridad establecidos por los navegadores.

¿Cómo se comunican las extensiones de navegador mediante APIs?

En el contexto de las extensiones de navegador, la capacidad de intercambiar mensajes entre distintas partes de la extensión, así como con aplicaciones nativas o incluso otras extensiones, es esencial para la funcionalidad y la interacción del usuario. Estas interacciones son posibles gracias a diferentes mecanismos de comunicación y almacenamiento que permiten a las extensiones mantener un flujo de datos constante y eficiente.

Uno de los métodos más fundamentales para la comunicación interna dentro de las extensiones de navegador es el uso de puertos. El mecanismo chrome.runtime.onConnect permite abrir un canal de comunicación entre distintos puntos de la extensión. Esto se logra mediante un "puerto", que es una especie de canal que se puede conectar entre diferentes partes de la extensión, como los scripts de contenido y los scripts de fondo. Al abrir un puerto en el lado del script de contenido, el script de fondo puede enviar y recibir mensajes a través de este puerto, lo que permite que ambos puntos interactúen entre sí de manera asíncrona.

El siguiente ejemplo muestra cómo conectar un puerto dentro de la extensión:

javascript
Copy code
// Endpoint 1

const port1 = chrome.tabs.connect(tabId, {name: "portName"});

port1.postMessage(msg);
port1.onMessage.addListener((msg) => {});
// Endpoint 2 (script de contenido)
let port2 = null;
chrome.runtime.onConnect.addListener((p) => {
  port2 = p;
});
port2.postMessage(msg);
port2.onMessage.addListener((msg) => {});

A medida que la comunicación se vuelve más compleja, las extensiones también pueden intercambiar mensajes con aplicaciones nativas. Si se conoce el nombre de la aplicación nativa, la extensión puede dirigirse a ella mediante chrome.runtime.sendNativeMessage(), lo cual es útil, por ejemplo, cuando la extensión necesita interactuar con una aplicación de escritorio como un editor de texto o un sistema de gestión de tareas. Las aplicaciones nativas de Safari utilizan este tipo de mensajes para comunicarse con aplicaciones nativas de iOS o macOS.

javascript
Copy code
chrome.runtime.sendNativeMessage(applicationName, msg, (response) => {});

chrome.tabs.connectNative(applicationName, {name: "portName"});

Para los casos en que se desea enviar mensajes entre diferentes extensiones, es posible utilizar chrome.runtime.sendMessage(). Esta API permite que una extensión envíe un mensaje a otra, siempre que se conozca la ID de la extensión de destino. El mensaje enviado puede ser un solo objeto, y la respuesta puede ser gestionada de manera asíncrona:

javascript
Copy code
// Enviador

chrome.runtime.sendMessage(extensionId, msg, (response) => {});
// Receptor (extensión externa)

chrome.runtime.onMessageExternal.addListener((msg, sender, sendResponse) => {

  sendResponse(responseMsg);
});

Este mecanismo de mensajería también es aplicable a páginas web normales, no solo a scripts de contenido, lo que significa que incluso las páginas que no están relacionadas directamente con la extensión pueden enviar mensajes hacia ella. Para que esto funcione, el sitio web debe conocer la ID de la extensión y esta debe haber permitido el acceso desde la URL de la página mediante el campo externally_connectable en el manifiesto de la extensión.

Un aspecto importante es el almacenamiento de datos dentro de una extensión. La API chrome.storage proporciona un sistema de almacenamiento clave/valor que se puede utilizar para guardar datos de manera local, sincronizada entre sesiones de navegador, o en memoria durante la sesión actual. Esta API incluye cuatro opciones principales: storage.local, storage.sync, storage.session y storage.managed. La diferencia radica en la duración del almacenamiento y en si los datos son accesibles a través de múltiples dispositivos o solo dentro de la sesión actual.

javascript
Copy code
chrome.storage.local.set({foo: "tmp"});
chrome.storage.local.get(["foo"], (result) => { console.log(result.foo); });

El API de autenticación de la extensión (chrome.identity) es otro componente crucial para la integración con otros servicios externos que requieren autenticación. Por ejemplo, si la extensión necesita acceder a datos de Google o realizar autenticaciones OAuth, puede utilizar chrome.identity.launchWebAuthFlow(), que maneja el flujo de autenticación dentro del navegador.

javascript
Copy code
chrome.identity.launchWebAuthFlow({

  url: authUrl,
  interactive: true
}, (redirectUrl) => {
  if (redirectUrl) {
    // Manejar redirección después de autenticación
  }
});

Otro aspecto fundamental en el desarrollo de extensiones es la gestión de las solicitudes de red. Las APIs declarativeNetRequest, webRequest y webNavigation permiten interactuar con el tráfico de la red de forma directa o declarativa. Por ejemplo, con declarativeNetRequest, se puede bloquear dinámicamente el tráfico hacia ciertos sitios web, mientras que con webRequest se puede interceptar y modificar el tráfico antes de que llegue al navegador.

javascript
Copy code
chrome.declarativeNetRequest.updateDynamicRules({
  addRules: [{
    id: 1,
    action: {type: "block"},
    condition: {urlFilter: "https://www.wikipedia.org"}
  }]
});

Con estas capacidades, es posible crear extensiones que bloqueen anuncios, redirijan tráfico o incluso analicen patrones de navegación de los usuarios, todo con un control total sobre las solicitudes de red.