Web geliştirici olarak, uygulamalarınızı Progresif Web Uygulaması (PWA) gibi mümkün olan en düşük güvene sahip güvenlik modelini kullanarak tasarlamanız en iyi uygulamadır. Bu yaklaşım, erişiminizi en üst düzeye çıkarır, yönetmeniz gereken güvenlik yükünü en aza indirir ve hem geliştiriciler hem de kullanıcılar için en fazla esnekliği sunar. Ancak web, varsayılan olarak güvenli olacak şekilde tasarlandığından muhafazakar güvenlik modeli, işletim sistemine ve belirli güçlü cihaz API'lerine erişimi doğal olarak kısıtlar.
İzole web uygulamaları (IWA'lar), web platformunun üzerinde oluşturulmuş izole, paketlenmiş, sürüm oluşturulmuş, imzalı ve yüksek düzeyde güvenilir bir uygulama modeli sağlayarak bu sorunu çözer. Ancak IWA'ya geçmeden önce daha kademeli bir adım olan PWA'nızı bir Chrome uzantısına bağlamayı düşünebilirsiniz. Yönetilen ChromeOS ortamlarında (ör. yönetilen kullanıcı hesabı oturumları, yönetilen misafir oturumları veya kiosk modu) kullanılabilen bu teknik, uygulamanızın güvenli mesaj iletme yoluyla daha düşük düzeyli uzantı API'leri kullanmasına olanak tanır. Aşağıdaki diyagram bu aşamalı yaklaşımı gösterir: Standart bir web uygulamasıyla başlayıp yüklenebilir bir PWA olma özelliklerini ekleme ve son olarak ek API'lerin kilidini açmak için PWA ve Chrome uzantısı yolunu keşfetme.
Uygulamanız, Chrome uzantısı API'leri ile bile kullanılamayan gelişmiş özellikler (ör. Controlled Frame veya Direct Sockets API) gerektiriyorsa yalıtılmış web uygulamasına (IWA) geçiş yapmak en iyi seçenektir. Ancak IWA'lar güçlü yeni web özelliklerinin kilidini açsa da Chrome uzantılarına özel belirli cihaz düzeyinde API'lere (ör. kiosk modunda bir ChromeOS cihazı yeniden başlatmak için chrome.runtime.restart()) ihtiyacınız olabilir.
Neyse ki, PWA'larla aynı yaklaşımla bir IWA'yı Chrome uzantısına bağlayabilirsiniz. Bu teknik, aşağıdaki adımlarda açıklanmaktadır.
Adım adım uygulama
Companion uzantısını dağıtma
Uzantılar, Chrome Yönetici Konsolu üzerinden dağıtılır. Hedef ortamınıza bağlı olarak, bu ayarı ilgili bölümde yapılandıracaksınız (örneğin, kiosk modu için Cihazlar > Chrome > Uygulamalar ve Uzantılar > Kiosklar'a veya Kullanıcılar ve Tarayıcılar ya da Yönetilen Misafir Oturumları için ilgili sekmelere gidin). Uzantıyı herkese açık bir bağlantıda kendiniz barındırabilir veya doğrudan Chrome Web Mağazası'nda barındırabilirsiniz. Uzantıları yönetmeyle ilgili daha ayrıntılı talimatlar için resmi belgelere bakın.
Mesaj iletimini uygulama
Uzantı kurulumu
Web uygulamanızdan mesaj almak ve yanıtlamak için istemciden (web uygulamanız) gelen mesajları dinleyen ve bu istekleri ilgili bir API çağrısına yönlendiren bir arka plan komut dosyası kullanın. Aşağıdaki örnekte, web uygulaması methodName değeri callRestart olan özel bir mesaj nesnesi gönderdiğinde ChromeOS cihazı yeniden başlatmak için istek proxy'lenir.
Background.js
// message handler - extension code
chrome.runtime.onMessageExternal.addListener(function (request, sender, sendResponse) {
if (request.methodName == 'callRestart') {
chrome.runtime.restart();
}
});
Uzantının manifesti, externally_connectable anahtarı kullanılarak uzantıya harici işlev çağrılarına izin verecek şekilde yapılandırılabilir. Bu anahtar, hangi sitelerin ve uzantıların uzantıdaki yöntemleri çağırmasına izin verildiğini belirtir. Chrome uzantıları ve manifest v3 hakkında daha fazla bilgiyi resmi dokümanlarda bulabilirsiniz.
Aşamalı web uygulamasından (PWA) bağlanıyorsanız uygulamanızın barındırıldığı standart HTTPS alanını eşleşmeler dizisi altında listelersiniz. Kiosk modunda çalışan bir PWA için yapılandırılmış manifest örneğini aşağıda bulabilirsiniz:
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/*"
]
}
}
Yalıtılmış bir web uygulamasından (IWA) bağlanıyorsanız mekanizma tamamen aynıdır ancak URL şeması değişir. IWA'lar güvenli bir şekilde paketlendiğinden ve standart web sunucularında çalışmadığından kendi protokollerini kullanır. isolated-app:// şemasını kullanarak IWA'nın kaynağını eklemeniz gerekir.
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://*/*"
]
}
}
Bu, bir uzantının PWA veya IWA'dan gelen mesajları dinlemesi için gereken minimum kod miktarıdır.
PWA ve IWA kurulumu
Uzantıyı bir web uygulamasından çağırmak için statik uzantı kimliğini bilmeniz gerekir.
Bu kimliği, Chrome uzantınızı yüklediğinizde gösterilen chrome://extensions sayfasında veya uzantı yüklendikten sonra Chrome Web Mağazası'nda bulabilirsiniz. Bu, web uygulamanızın iletişim kurulacak tam uzantıyı belirtmesine olanak tanır. Ardından, chrome.runtime.sendMessage
numaralı telefonu arayın ve uzantıya gönderilecek mesajla birlikte uzantı kimliğini iletin.
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');
Web uygulamalarını mesaj iletme için uzantılara bağlama hakkında daha fazla bilgi edinmek için Uzantılar belgelerine bakın.
Demo
Bu uygulamanın nasıl çalıştığını görmek için IWA Kitchen Sink deposunu inceleyin.
Bu proje, Direct Sockets ve Controlled Frame gibi yüksek güvenliğe sahip API'lerin demolarını içeren çeşitli IWA özelliklerinin kapsamlı bir deneme alanı olarak hizmet vermektedir.
Ayrıca, IWA-to-Chrome-Extension bağlantısının eksiksiz ve çalışan bir örneğini de sağlar. Depoda, güvenli mesaj iletme özelliğinin uzantıya özel yöntemleri tetiklemek için nasıl kullanılacağını gösteren örnek bir yardımcı uzantı ve özel bir web arayüzü bulunur. Örneğin, kullanıcının profil bilgilerini getirme işlemini doğrudan yalıtılmış web uygulamasından chrome.identity.getProfileUserInfo() API ile test edebilirsiniz.
Sonuç
Web uygulamalarınızı bir Chrome uzantısına bağlamak, cihazın yerel özelliklerini kullanmak için güvenli ve progresif bir yol sunar. Uygulamanızın mimarisini tasarlarken aşağıdaki önemli noktaları aklınızda bulundurun:
- Web ile başlayın: En iyi erişim ve en düşük güvenlik ek yükü için varsayılan olarak PWA'yı kullanın.
- Uzantılarla açığı kapatın: Derin entegrasyonlu, işletim sistemi düzeyindeki özellikler (ör. kiosk modunda cihazı yeniden başlatma) için yardımcı bir Chrome uzantısı dağıtın ve güvenli mesaj iletme özelliğini kullanarak uzantıyı uygulamanıza bağlayın.
- Yalnızca gerekirse IWA'lara yükseltin: Direct Sockets, Controlled Frame veya diğer IWA'ya özel API'ler gibi yüksek güvenliğe sahip API'ler gerektiğinde yalıtılmış web uygulamalarını kullanın.