Là một nhà phát triển web, bạn nên thiết kế các ứng dụng của mình bằng mô hình bảo mật có độ tin cậy thấp nhất có thể, chẳng hạn như Ứng dụng web tiến bộ (PWA). Phương pháp này giúp tối đa hoá phạm vi tiếp cận, giảm thiểu chi phí bảo mật mà bạn phải quản lý và mang lại sự linh hoạt cao nhất cho cả nhà phát triển và người dùng. Tuy nhiên, vì web được thiết kế để mặc định an toàn, nên mô hình bảo mật thận trọng của web sẽ hạn chế quyền truy cập vào hệ điều hành và một số API mạnh mẽ của thiết bị.
Các ứng dụng web tách biệt (IWA) giải quyết vấn đề này bằng cách cung cấp một mô hình ứng dụng tách biệt, đi kèm, có phiên bản, được ký và có độ tin cậy cao, được xây dựng trên nền tảng web. Tuy nhiên, trước khi chuyển sang IWA, bạn nên cân nhắc một bước chuyển đổi dần dần hơn: kết nối PWA với một Tiện ích Chrome. Có sẵn trong các môi trường ChromeOS được quản lý (chẳng hạn như phiên người dùng được quản lý, Phiên khách được quản lý (MGS) hoặc chế độ Kiosk), kỹ thuật này cho phép ứng dụng của bạn sử dụng API tiện ích cấp thấp thông qua việc truyền thông báo an toàn. Sơ đồ sau đây minh hoạ phương pháp tiến bộ này: bắt đầu bằng một ứng dụng web tiêu chuẩn, thêm các chức năng để trở thành một PWA có thể cài đặt và cuối cùng khám phá đường dẫn PWA và tiện ích của Chrome để mở khoá các API bổ sung.
Nếu ứng dụng của bạn yêu cầu các chức năng nâng cao mà vẫn không có sẵn ngay cả khi dùng tiện ích của Chrome API (chẳng hạn như Controlled Frame hoặc Direct Sockets API), thì việc di chuyển sang một IWA (Ứng dụng web tách biệt) là lựa chọn tốt nhất cho bạn. Tuy nhiên, trong khi IWA mở ra các tính năng mới mạnh mẽ trên web, bạn vẫn có thể cần các API cụ thể ở cấp thiết bị dành riêng cho Tiện ích Chrome, chẳng hạn như chrome.runtime.restart() để khởi động lại thiết bị ChromeOS ở chế độ Kiosk.
Rất may là bạn có thể kết nối một IWA với một Tiện ích Chrome bằng chính phương pháp như đối với PWA. Kỹ thuật này được đề cập trong các bước sau.
Triển khai từng bước
Triển khai Tiện ích đồng hành
Tiện ích được triển khai thông qua Bảng điều khiển dành cho quản trị viên của Chrome. Tuỳ thuộc vào môi trường đích, bạn sẽ định cấu hình chế độ này trong phần tương ứng (ví dụ: chuyển đến phần Thiết bị > Chrome > Ứng dụng và tiện ích > Kiosk cho chế độ kiosk hoặc các tab tương ứng cho Người dùng và trình duyệt hoặc Phiên khách được quản lý). Bạn có thể tự lưu trữ tiện ích tại một đường liên kết có thể truy cập công khai hoặc lưu trữ trực tiếp trong Cửa hàng Chrome trực tuyến. Để biết hướng dẫn chi tiết hơn về cách quản lý tiện ích, hãy tham khảo tài liệu chính thức.
Triển khai truyền thông báo
Thiết lập tiện ích
Để nhận và phản hồi tin nhắn từ ứng dụng web, hãy hiển thị một tập lệnh nền lắng nghe tin nhắn đến từ ứng dụng khách (ứng dụng web của bạn), sau đó chuyển các yêu cầu đó đến một lệnh gọi API tương ứng. Trong ví dụ sau, một yêu cầu được chuyển qua proxy để khởi động lại thiết bị ChromeOS khi ứng dụng web gửi một đối tượng thông báo tuỳ chỉnh chứa methodName của callRestart.
Background.js
// message handler - extension code
chrome.runtime.onMessageExternal.addListener(function (request, sender, sendResponse) {
if (request.methodName == 'callRestart') {
chrome.runtime.restart();
}
});
Bạn có thể định cấu hình tệp kê khai cho tiện ích để cho phép các lệnh gọi hàm bên ngoài đến tiện ích bằng cách sử dụng khoá externally_connectable. Khoá này chỉ định những trang web và tiện ích được phép gọi các phương thức trong tiện ích. Bạn có thể xem thêm thông tin về tiện ích Chrome và manifest v3 trong tài liệu chính thức.
Nếu đang kết nối từ một Ứng dụng web tiến bộ (PWA), bạn sẽ liệt kê miền HTTPS tiêu chuẩn nơi ứng dụng của bạn được lưu trữ trong mảng matches. Dưới đây là ví dụ về một tệp kê khai được định cấu hình cho một PWA đang chạy ở chế độ Kiosk:
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/*"
]
}
}
Nếu bạn đang kết nối từ một Ứng dụng web tách biệt (IWA), cơ chế này hoàn toàn giống nhau, nhưng lược đồ URL sẽ thay đổi. Vì được đóng gói an toàn và không chạy trên các máy chủ web tiêu chuẩn, nên IWA sử dụng giao thức riêng. Bạn phải thêm nguồn gốc của IWA bằng cách sử dụng lược đồ 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://*/*"
]
}
}
Đây là lượng mã tối thiểu cần thiết trong một tiện ích để nhận thông báo từ một PWA hoặc IWA.
Thiết lập PWA và IWA
Để gọi tiện ích từ một ứng dụng web, bạn cần biết mã nhận dạng tiện ích tĩnh của tiện ích đó.
Bạn có thể tìm thấy mã nhận dạng này trên trang chrome://extensions, xuất hiện khi bạn cài đặt tiện ích của Chrome hoặc trong Cửa hàng Chrome trực tuyến sau khi tiện ích được tải lên. Thao tác này cho phép ứng dụng web của bạn chỉ định chính xác tiện ích cần giao tiếp. Sau đó, hãy gọi chrome.runtime.sendMessage và truyền mã nhận dạng tiện ích cùng với một thông báo để gửi đến tiện ích.
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');
Để biết thêm thông tin về cách kết nối các ứng dụng web với tiện ích để truyền thông báo, hãy tham khảo tài liệu về Tiện ích.
Bản minh hoạ
Để xem cách triển khai này trong thực tế, hãy khám phá kho lưu trữ IWA Kitchen Sink.
Dự án này đóng vai trò là một sân chơi toàn diện cho nhiều chức năng của IWA (Ứng dụng web tách biệt), có các bản minh hoạ cho các API có độ tin cậy cao như Direct Sockets và Controlled Frame.
Thư viện này cũng cung cấp một ví dụ đầy đủ và hoạt động về kết nối IWA với Tiện ích Chrome. Kho lưu trữ này bao gồm một tiện ích đồng hành mẫu và một giao diện web chuyên dụng minh hoạ cách sử dụng tính năng truyền thông báo an toàn để kích hoạt các phương thức dành riêng cho tiện ích. Ví dụ: bạn có thể kiểm thử việc tìm nạp thông tin hồ sơ của người dùng bằng API chrome.identity.getProfileUserInfo() ngay từ Ứng dụng web tách biệt.
Kết luận
Việc kết nối các ứng dụng web của bạn với một Tiện ích Chrome mang đến một con đường an toàn và tiến bộ để khai thác các chức năng của thiết bị giống như ứng dụng gốc. Khi thiết kế cấu trúc ứng dụng, hãy lưu ý những điểm chính sau:
- Bắt đầu với web: Đặt PWA làm mặc định để có phạm vi tiếp cận rộng nhất và mức hao tổn bảo mật thấp nhất.
- Thu hẹp khoảng cách bằng Tiện ích: Đối với các tính năng được tích hợp sâu ở cấp hệ điều hành (chẳng hạn như khởi động lại thiết bị ở chế độ Kiosk), hãy triển khai một Tiện ích Chrome đi kèm và kết nối tiện ích đó với ứng dụng của bạn bằng cách truyền thông báo an toàn.
- Chỉ nâng cấp lên IWA khi cần: Sử dụng Ứng dụng web tách biệt khi bạn cần các API có độ tin cậy cao như Direct Sockets, Controlled Frame hoặc bất kỳ API nào khác chỉ dành cho IWA.