En tant que développeur Web, il est recommandé de concevoir vos applications à l'aide du modèle de sécurité le moins fiable possible, comme une Progressive Web App (PWA). Cette approche maximise votre couverture, minimise les frais généraux de sécurité que vous devez gérer et offre la plus grande flexibilité aux développeurs et aux utilisateurs. Toutefois, comme le Web est conçu pour être sécurisé par défaut, son modèle de sécurité conservateur limite naturellement l'accès au système d'exploitation et à certaines API d'appareil puissantes.
Les applications Web isolées (IWA) résolvent ce problème en fournissant un modèle d'application isolé, groupé, versionné, signé et hautement fiable, basé sur la plate-forme Web. Toutefois, avant de passer à une IWA, il peut être intéressant d'envisager une étape plus progressive : connecter votre PWA à une extension Chrome. Disponible dans les environnements ChromeOS gérés (sessions utilisateur gérées, sessions Invité gérées ou mode Kiosque, par exemple), cette technique permet à votre application d'utiliser des API d'extension de niveau inférieur via un transfert de messages sécurisé. Le diagramme suivant illustre cette approche progressive : commencer par une application Web standard, ajouter les fonctionnalités pour devenir une PWA installable, puis explorer le chemin PWA et extension Chrome pour débloquer des API supplémentaires.
Si votre application nécessite des fonctionnalités avancées qui restent indisponibles même avec les API d'extension Chrome (comme Controlled Frame ou l'API Direct Sockets), la meilleure solution consiste à migrer vers une application Web isolée (IWA). Toutefois, bien que les AWI débloquent de nouvelles fonctionnalités Web puissantes, vous pouvez toujours avoir besoin d'API spécifiques au niveau de l'appareil qui sont exclusives aux extensions Chrome, telles que chrome.runtime.restart() pour redémarrer un appareil ChromeOS en mode Kiosque.
Heureusement, vous pouvez connecter une IWA à une extension Chrome en utilisant exactement la même approche qu'une PWA. Cette technique est décrite dans les étapes suivantes.
Implémentation étape par étape
Déployer l'extension associée
Les extensions sont déployées via la console d'administration Chrome. Selon votre environnement cible, vous configurerez ce paramètre dans la section correspondante (par exemple, accédez à Appareils > Chrome > Applications et extensions > Kiosques pour le mode kiosque, ou aux onglets correspondants pour Utilisateurs et navigateurs ou Sessions Invité gérées). Vous pouvez auto-héberger l'extension à un lien accessible au public ou l'héberger directement dans le Chrome Web Store. Pour obtenir des instructions plus détaillées sur la gestion des extensions, consultez la documentation officielle.
Implémenter le transfert de messages
Configuration des extensions
Pour recevoir des messages de votre application Web et y répondre, exposez un script d'arrière-plan qui écoute les messages provenant du client (votre application Web), puis transmet ces requêtes à un appel d'API correspondant. Dans l'exemple suivant, une requête est transmise par proxy pour redémarrer l'appareil ChromeOS lorsque l'application Web envoie un objet de message personnalisé contenant un methodName de callRestart.
Background.js
// message handler - extension code
chrome.runtime.onMessageExternal.addListener(function (request, sender, sendResponse) {
if (request.methodName == 'callRestart') {
chrome.runtime.restart();
}
});
Le fichier manifeste de l'extension peut être configuré pour autoriser les appels de fonction externes à l'extension à l'aide de la clé externally_connectable, qui spécifie les sites et les extensions autorisés à appeler des méthodes dans l'extension. Pour en savoir plus sur les extensions Chrome et Manifest V3, consultez la documentation officielle.
Si vous vous connectez à partir d'une application Web progressive (PWA), vous devez lister le domaine HTTPS standard où votre application est hébergée dans le tableau "matches". Voici un exemple de fichier manifeste configuré pour une PWA exécutée en mode kiosque :
Manifest.json
{
"manifest_version": 3,
"name": "Restart your kiosk app",
"version": "1.0",
"description": "This restarts your ChromeOS device.",
"background": {
"service_worker": "background.js"
},
"externally_connectable": {
"accepts_tls_channel_id": false,
"matches": [
"*://developer.chrome.com/*"
]
}
}
Si vous vous connectez à partir d'une application Web isolée (IWA), le mécanisme est exactement le même, mais le schéma d'URL change. Comme les IWA sont empaquetées de manière sécurisée et ne s'exécutent pas sur des serveurs Web standards, elles utilisent leur propre protocole. Vous devez ajouter l'origine de l'application Web installable à l'aide du schéma isolated-app://.
Manifest.json
{
"manifest_version": 3,
"name": "IWA Companion Extension",
"version": "1.1",
"description": "Companion extension for the IWA",
"background": {
"service_worker": "/scripts/background.js"
},
"externally_connectable": {
"matches": [
"isolated-app://*/*"
]
}
}
Il s'agit de la quantité minimale de code requise dans une extension pour écouter les messages d'une PWA ou d'une IWA.
Configuration des PWA et de l'IWA
Pour appeler l'extension depuis une application Web, vous devez connaître son ID d'extension statique.
Cet ID est disponible sur la page chrome://extensions qui s'affiche lorsque vous installez votre extension Chrome, ou sur le Chrome Web Store une fois l'extension importée. Cela permet à votre application Web de spécifier l'extension exacte avec laquelle communiquer. Ensuite, appelez chrome.runtime.sendMessage et transmettez l'ID d'extension avec un message à envoyer à l'extension.
const STATIC_EXTENSION_ID = 'abcdefghijklmnopqrstuvwxyz';
// found from chrome extensions page of chrome web store.
const callExtensionAPI = function (method) {
chrome.runtime.sendMessage(STATIC_EXTENSION_ID, {
methodName: method,
});
};
callExtensionAPI('callRestart');
Pour en savoir plus sur la connexion d'applications Web à des extensions pour le transfert de messages, consultez la documentation sur les extensions.
Démo
Pour voir cette implémentation en action, explorez le dépôt IWA Kitchen Sink.
Ce projet sert de terrain de jeu complet pour diverses fonctionnalités IWA, avec des démos pour les API à haut niveau de confiance comme Direct Sockets et Controlled Frame.
Il fournit également un exemple complet et fonctionnel de la connexion IWA à l'extension Chrome. Le dépôt inclut un exemple d'extension associée et une interface Web dédiée qui montre comment utiliser le transfert sécurisé de messages pour déclencher des méthodes exclusives à l'extension. Par exemple, vous pouvez tester la récupération des informations de profil de l'utilisateur avec l'API chrome.identity.getProfileUserInfo() directement depuis l'application Web isolée.
Conclusion
Connecter vos applications Web à une extension Chrome offre un moyen sécurisé et progressif de débloquer des fonctionnalités d'appareil semblables à celles des applications natives. Lorsque vous concevez l'architecture de votre application, gardez à l'esprit les points clés suivants :
- Commencez par le Web : utilisez une PWA par défaut pour bénéficier de la meilleure couverture et du plus faible coût de sécurité.
- Combler le fossé avec les extensions : pour les fonctionnalités profondément intégrées au niveau de l'OS (comme le redémarrage de l'appareil en mode Kiosque), déployez une extension Chrome associée et connectez-la à votre application à l'aide d'un transfert de messages sécurisé.
- Ne passez aux AWI que si nécessaire : utilisez les applications Web isolées lorsque vous avez besoin d'API à haut niveau de confiance telles que Direct Sockets, Controlled Frame ou toute autre API réservée aux AWI.