Реалізація вбудованого DApp-браузера в мобільному криптогаманці

Реалізація вбудованого DApp-браузера в мобільному криптогаманці

Вбудований DApp-браузер — один із найскладніших компонентів криптогаманця. Він завантажує довільні веб-застосунки, впроваджує провайдер window.ethereum, обробляє підписи транзакцій і при цьому не має стати способом атаки на активи користувача. Наш досвід у мобільній розробці та десятки успішно запущених продуктів дозволяють виконати таку інтеграцію під ключ із гарантією безпеки. Типовий кейс: користувач відкриває Uniswap у браузері гаманця, DApp перевіряє наявність window.ethereum, викликає eth_requestAccounts — і одразу бачить список своїх акаунтів. Якщо інжекція провайдера виконана неправильно, DApp або не виявить гаманець, або буде вразливим до фішингу. Приклад із практики: в одному проєкті ми виявили, що на Android провайдер інжектувався після завантаження сторінки, і DApp не встигали зареєструватися, що призводило до помилки "No Ethereum provider found". Рішення — попереднє завантаження скрипта до onPageStarted.

Основа браузера — нативний WebView з інжекцією JavaScript-провайдера. На iOS це WKWebView, на Android — WebView з addJavascriptInterface. MetaMask, Trust Wallet та Coinbase Wallet реалізують цей патерн однаково. Провайдер window.ethereum повинен реалізовувати інтерфейс EIP-1193: метод request(method, params) для всіх RPC-запитів. DApp звертається до цього об'єкта, а нативний код обробляє запити.

Архітектура та інжекція провайдера

Схема роботи:

DApp (JS) → window.ethereum.request({method: 'eth_sendTransaction'})
  → постMessage в нативний шар
  → нативний код показує діалог підтвердження
  → користувач схвалює/відхиляє
  → відповідь повертається в JS через postMessage
  → Promise вирішується в DApp

Інжекція на iOS (WKWebView). Скрипт провайдера інжектуємо через WKUserScript з injectionTime: .atDocumentStart. Критично — саме atDocumentStart, інакше DApp може перевірити window.ethereum до інжекції та вирішити, що гаманця немає.

let providerScript = loadProviderJS() // Читаємо з бандлу
let userScript = WKUserScript(
    source: providerScript,
    injectionTime: .atDocumentStart,
    forMainFrameOnly: false
)
webView.configuration.userContentController.addUserScript(userScript)
webView.configuration.userContentController.add(self, name: "ethereum")

JS-провайдер надсилає повідомлення через webkit.messageHandlers.ethereum.postMessage({...}). Нативний код отримує в userContentController(_:didReceive:). Відповіді передаємо назад через webView.evaluateJavaScript("window.ethereum._resolveResponse(\(id), \(result))").

Інжекція на Android.

webView.addJavascriptInterface(EthereumProvider(this), "AndroidEthereum")
webView.settings.javaScriptEnabled = true

На Android JS-інтерфейс працює синхронно, що створює проблему: методи @JavascriptInterface не можуть повертати Promise. Обходимо через callback-патерн: JS викликає AndroidEthereum.request(id, method, paramsJson), нативний код в результаті викликає webView.evaluateJavascript("resolveCallback($id, $result)", null).

Важливо: addJavascriptInterface потенційно небезпечний. Методи, анотовані @JavascriptInterface, видні для всього JavaScript на сторінці, включаючи шкідливі iframe. Анотуйте лише необхідні методи і ніколи не додавайте інтерфейс із широким API.

Порівняння платформ

Як забезпечити безпеку при інжекції провайдера?

Безпека — головний пріоритет. Основні заходи:

• Ізоляція сесії. Кожна DApp повинна мати окремий cookie-jar та localStorage. Не дозволяйте DApp A читати дані DApp B. На iOS — окремі WKWebViewConfiguration та WKWebsiteDataStore для кожної вкладки.
• Фішинг-захист. Перевіряємо SSL-сертифікат, показуємо URL в адресному рядку, який користувач не може приховати, блокуємо alert() та prompt() з JS. На iOS обробляємо webView(_:runJavaScriptAlertPanelWithMessage:) та замінюємо нативним UIAlertController.
• eth_signTypedData_v4 (EIP-712). Це структуровані дані — DApp просить підписати типізований об'єкт. Потрібно розпарсити JSON schema та показати користувачеві, що саме підписується в людино-читаному вигляді. Підписання наосліп — ризик для користувача.

Чому важливо ізолювати сесії DApp?

Ізоляція запобігає витоку даних між DApp. Якщо знехтувати цим, шкідливе DApp зможе прочитати збережені паролі або ключі іншого DApp. На практиці ми використовуємо окремі WKWebsiteDataStore для кожної вкладки на iOS та окремі каталоги для WebView на Android.

Реалізація window.ethereum провайдера

Мінімальна реалізація підтримує методи EIP-1193:

// Інжектований провайдер (спрощено)
window.ethereum = {
  isMetaMask: true, // багато DApp перевіряють цей прапорець
  chainId: '0x1',
  selectedAddress: null,

  request: async function({ method, params }) {
    return new Promise((resolve, reject) => {
      const id = generateId();
      pendingRequests[id] = { resolve, reject };
      webkit.messageHandlers.ethereum.postMessage({ id, method, params });
    });
  },

  on: function(event, handler) {
    // chainChanged, accountsChanged, connect, disconnect
    eventHandlers[event] = eventHandlers[event] || [];
    eventHandlers[event].push(handler);
  }
};

Обов'язкові методи: eth_requestAccounts, eth_accounts, eth_chainId, eth_sendTransaction, personal_sign, eth_signTypedData_v4, wallet_switchEthereumChain.

Multi-tab та продуктивність

Браузер з однією вкладкою — мінімум. Реалізуємо:

• Вкладки з ізольованими даними
• Історію переглядів (опціонально, багато користувачів гаманців надають перевагу конфіденційності)
• Закладки для часто використовуваних DApp
• Список популярних DApp (curated) для onboarding

На iOS кілька WKWebView можна тримати в пам'яті — вони ліниві, поки не видимі. На Android WebView важкий, для економії пам'яті знищуємо WebView неактивної вкладки та відновлюємо URL при поверненні.

Продуктивність WebView залежить від платформи. На застарілих Android-пристроях (WebView на базі Chromium 80) складні DeFi DApp можуть гальмувати. Моніторимо через WebViewClient.onPageStarted/onPageFinished, показуємо прогрес-бар. Попереднє завантаження WebView при старті застосунку скорочує cold-start час з ~800 мс до ~200 мс.

Що входить в роботу

Процес розробки

1. Базовий WebView з навігацією, адресним рядком, прогрес-баром
2. Інжекція провайдера та підтримка eth_requestAccounts, eth_accounts, eth_chainId
3. Діалог транзакції — відображення, підписання, відправка через RPC
4. Розширені методи — personal_sign, eth_signTypedData_v4, wallet_switchEthereumChain
5. Безпека — ізоляція, фішинг-захист, аудит
6. Multi-tab та UX-полірування

Терміни: базовий браузер з eth_sendTransaction — 3–4 тижні. Повноцінний браузер з multi-tab, EIP-712 відображенням, security-аудитом — 2–3 місяці. Вартість розраховується індивідуально. Повторне використання компонентів дозволяє заощадити до 40% бюджету при типовій інтеграції.

Отримайте консультацію по вашому проєкту: ми оцінимо архітектуру та запропонуємо оптимальне рішення під ключ. Зв'яжіться з нами, щоб обговорити деталі.

Інтеграція API в мобільний додаток: з чого почати

Запит йде, відповідь не приходить, timeout — 30 секунд. Користувач дивиться на спінер. Мережі немає — мобільна карта в метро. Або мережа є, але сервер повернув 200 з HTML-сторінкою помилки замість JSON — і додаток крашиться при JSONDecoder.decode(). Ми бачимо такі кейси на кожному другому проєкті. Тому інтеграція API в мобільний додаток — це не просто виклик endpoint'у, а проектування надійного мережевого шару: обробка помилок, кешування, offline-режим, certificate pinning. Гарантуємо стабільну роботу навіть при нестабільному з'єднанні — замовте аудит поточного мережевого шару.

Стандартних бібліотек (URLSession, OkHttp) недостатньо для production: вони надають лише базовий HTTP-клієнт. Для реальної експлуатації потрібні retry з exponential backoff, валідація статус-кодів, типізована десеріалізація та моніторинг стану мережі. Без цього додаток втрачає дані та користувачів. Ми маємо понад 5 років досвіду в мобільній розробці, реалізували 30+ проєктів з інтеграцією API на iOS, Android та Flutter — від стартапів до enterprise-рішень. Сертифіковані iOS/Android розробники гарантують якість коду.

Як вибрати протокол для інтеграції API?

REST залишається стандартом для більшості проєктів. Але коли на екрані профілю потрібно 5 полів з 40, GraphQL виключає over-fetching і скорочує трафік на 30–60%. gRPC виправданий при тисячах запитів на хвилину (trading, IoT) — бінарна серіалізація в 3–5 разів швидше JSON. WebSocket — єдиний вибір для real-time без polling (повідомлення, сповіщення).

Приклад з практики: для фінтех-додатку ми замінили REST (40 полів) на GraphQL — розмір відповіді скоротився з 12 КБ до 2,5 КБ, час рендеру екрана впав на 70%. Економія трафіку була значною при 100 000 активних користувачів.

Як забезпечити надійність з'єднання та offline-first?

Користувачі втрачають мережу в метро, ліфті, тунелі. Мобільний додаток зобов'язаний працювати без інтернету — хоча б у read-only режимі. Ми впроваджуємо патерн offline-first:

1. При відкритті екрану спочатку показуємо дані з локального кешу (Core Data / Room).
2. Паралельно виконуємо мережевий запит, оновлюємо UI після відповіді.
3. Якщо мережа недоступна — показуємо кешовані дані та позначку «немає з'єднання».
4. При відновленні мережі автоматично синхронізуємо зміни.

Для кешування HTTP-відповідей використовуємо URLCache (iOS) та OkHttp Cache (Android) з підтримкою Cache-Control. Для структурованих даних — SwiftData / Room. NWPathMonitor / ConnectivityManager.NetworkCallback відстежують стан мережі та тригерять оновлення. Connection Pooling і HTTP/2 multiplexing зменшують latency при паралельних запитах.

REST та вибір клієнтської бібліотеки

Alamofire (iOS) — де-факто стандарт для Swift-проєктів. Поверх URLSession додає request chaining, response validation, automatic retry, certificate pinning через ServerTrustManager. AF.request() з .validate() повертає помилку для будь-якого статус-коду поза 200–299. Без .validate() Alamofire вважає 404 та 500 успішними відповідями. З Swift Concurrency — async-версія через serializingDecodable.

Retrofit (Android) — анотаційний HTTP-клієнт поверх OkHttp. Інтерфейс з анотаціями компілюється в реалізацію. @GET, @POST, @Path, @Query, @Body — декларативний опис API. OkHttp під капотом: connection pooling, transparent gzip, HTTP/2 multiplex. HttpLoggingInterceptor — логування в debug-збірці. Authenticator — автоматичний refresh токена при 401. Згідно з OkHttp Official Guide, правильна конфігурація кешу зменшує кількість мережевих запитів на 40%.

Ktor (KMM/Flutter) — мультиплатформний HTTP-клієнт. На iOS працює через Darwin engine (URLSession), на Android — через OkHttp. Єдиний код для обох платформ при KMM-архітектурі.

GraphQL: коли REST не справляється

REST повертає фіксовану структуру. Екран профілю вимагає name, avatar, email — сервер віддає 40 полів. Over-fetching. GraphQL вирішує це: клієнт запитує рівно потрібні поля. Це критично для мобайлу, де трафік і час парсингу — реальні обмеження. Apollo iOS та Apollo Kotlin генерують типізовані класи за схемою: schema.graphql + query-файли → строгі типи на етапі компіляції. Subscriptions через WebSocket — real-time без polling. Обмеження: GraphQL складніше кешувати на рівні HTTP. Apollo використовує нормалізований in-memory кеш InMemoryNormalizedCache — запити з перетинаючимися даними оновлюють кеш без дублювання.

WebSocket: real-time без зайвого трафіку

Polling (setInterval кожні 5 секунд) — витрата батареї та трафіку. WebSocket — постійне двоспрямоване з'єднання. iOS: URLSessionWebSocketTask (нативний, iOS 13+). Android: OkHttp WebSocket. Обов'язкова обробка reconnect: при onFailure — експоненційний backoff (1с → 2с → 4с → 8с → максимум 60с). Socket.IO — надбудова з автоматичним reconnect, але для нових проєктів краще нативний WebSocket (менше залежностей). TLS 1.3 забезпечує безпеку з'єднання.

Чому важливий certificate pinning?

Корпоративний проксі може перехопити HTTPS через підміну сертифіката. Certificate pinning запобігає цьому: додаток приймає тільки конкретний сертифікат або публічний ключ. Alamofire: ServerTrustManager з PinnedCertificatesTrustEvaluator. OkHttp: CertificatePinner з SHA-256 хешем. Операційна складність: при ротації сертифіката старі версії додатку перестають працювати. Рішення — pinning на публічний ключ CA або підтримка кількох пінів з grace period. Правильне впровадження pinning гарантує захист від MITM-атак.

Що входить у роботу

Ми передаємо: вихідний код мережевого шару, документацію по використовуваних бібліотеках, інструкцію з ротації сертифікатів, підтримку протягом 2 тижнів після здачі.

Терміни та вартість

Реалізація мережевого шару з REST, retry, кешуванням та offline-режимом — 1–2 тижні. Додавання GraphQL або WebSocket — ще 1–2 тижні. gRPC — 2–3 тижні, включаючи кодогенерацію. Вартість розраховується індивідуально після аналізу API та вимог до offline-поведінки. Оцінимо проєкт за 1 день — зв'яжіться з нами для консультації. Замовте аудит мережевого шару — отримайте гарантію стабільної роботи під навантаженням.