Коротка відповідь
Типовий isolated world розділяє JavaScript-змінні скрипта й сторінки. Він не дає приватного DOM. Обидва бачать і змінюють елементи, атрибути й дані подій. Вважайте прочитане недовіреним, а привілейовані операції тримайте за вузьким контрактом worker.
Використовуйте isolated world, доки справді не потрібний стан JavaScript сторінки. Main-world міст може передати інформацію, але працює поруч із кодом сайту без секретів чи привілеїв. Його повідомлення лишається входом сторінки, не автентифікованими даними розширення.
Практичні кроки реалізації
Визначте потрібне читання
Обчислені стилі й DOM часто не потребують main-world. Опис Font Picker має CSS-властивості й видимий текст — приклад такої задачі, не підтвердження його execution world. Перевірте реальну потребу змінної, не компенсуйте мостом нечіткий DOM-query.
Не довіряйте ін’єктованому UI
Scoped-стилі чи shadow root зменшують CSS-конфлікти, але не гарантують конфіденційність. Host-сторінка недовірена. Не кладіть токени в атрибути й не довіряйте натисканню лише за схожістю кнопки. Привілейований контекст незалежно перевіряє операцію й ціль.
Обмежте ввід сторінки
Обмежте текст, обходи й роботу після змін. Сайт може створити великий DOM чи постійні mutations. Групуйте роботу, не скануйте все на кожну зміну. Перевіряйте URL за компонентами й схемами. Надсилайте worker лише потрібне, не довільні об’єкти чи весь HTML.
Обробіть повторну ін’єкцію й очищення
Користувач може повторно запускати інструмент у SPA. Не дублюйте listeners і overlays, стежте за ціллю та очищуйте observers і UI. Зміна pathname може не створити документ, а повний перехід знищує контекст. Перевіряйте обидва потоки.
Приклад реалізації
Фрагмент показує обмежене виділення як текст. Він не розкриває секрети й не викликає привілейовані API. Production потребує доступної взаємодії, стилів, захисту дублікатів і очищення.
const selected = window.getSelection()?.toString().slice(0, 500) ?? "";
const panel = document.createElement("aside");
panel.setAttribute("aria-label", "Selection preview");
const content = document.createElement("p");
content.textContent = selected || "No text selected";
panel.append(content);
document.documentElement.append(panel);
function cleanup() {
panel.remove();
}
textContent не трактує текст як markup. Це не доводить точності, безпечності чи дозволу передавання. Розділяйте відображення, правильність і приватність. Для postMessage перевіряйте source, origin, тип і схему; скрипти сторінки все ще можуть імітувати формат.
Компроміси та альтернативи
Isolated script дає керований розширенням код і обмежені API; main-world — змінні сторінки зі зниженням довіри. Міст має давати мінімальні дані. Використовуйте DOM, коли достатньо, та уникайте універсального каналу команд до worker.
Поширені помилки
- Isolated world як приватний DOM.
- Shadow root як сховище секретів.
- Команди сторінки для браузерних API.
- Повний скан на кожну mutation.
- Дублікати listeners після запусків.
Контрольний список перед випуском
- World відповідає потребі.
- Ввід обмежений і перевірений.
- Стилі відокремлені від безпеки.
- Привілейовані запити перевіряються.
- SPA і navigation перевірено.
- Reinjection і teardown реалізовано.
Поширені запитання
Чи сайт читає змінні скрипта?
Не прямо через ізоляцію JavaScript. Дані, записані у спільний DOM чи міст, стають видимими через ці канали.
Чи event.source автентифікує міст?
Допомагає відхилити інші вікна, але код тієї самої сторінки може надсилати повідомлення. Вважайте їх недовіреним входом і дозволяйте вузькі операції.
Висновок
Використовуйте ізоляцію для JavaScript, валідацію для вводу та авторизацію для привілеїв. Межі доповнюються. Тримайте мости вузькими, не сприймайте стилі чи world як повний захист.
Первинні джерела
Пов’язані посібники та приклади
Потрібно реалізувати це у вашому продукті?
Перегляньте відповідні приклади продуктів або поділіться контекстом розробки вебзастосунку, розширення Chrome, API чи SaaS.