> Как передаются данные и токены между нативным приложением и React WebView (React)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Spotware

Стек: React

> Пример ответа

Передача данных и токенов между нативным приложением и React WebView осуществляется через механизмы мостов (bridges) и обработчиков сообщений. Основные подходы:

  1. postMessage / onMessage - универсальный способ. Нативная сторона вызывает webView.postMessage(data), а в React-коде слушается событие window.addEventListener('message', handler). Обратно React отправляет window.ReactNativeWebView.postMessage(data), который ловится нативным обработчиком onMessage.

  2. Инъекция JavaScript - нативный код может внедрить скрипт с токеном через evaluateJavascript (Android) или evaluateJavaScript (iOS). Например, установить window.__TOKEN__ = '...' до загрузки WebView.

  3. Нативные мосты (Native Modules) - для сложных сценариев создаются кастомные модули, которые экспортируют методы (например, getToken()), вызываемые из React через NativeModules.

  4. URL-схемы - токен передаётся в URL при загрузке WebView (например, https://app?token=...), но это менее безопасно.

Пример для React (WebView):

JAVASCRIPT
// Отправка токена на нативную сторону
window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'TOKEN', value: token }));
// Получение данных от натива
window.addEventListener('message', (event) => {
const data = JSON.parse(event.data);
if (data.type === 'USER_DATA') {
// обработать данные
}
});

На стороне натива (Android, Kotlin):

webView.settings.javaScriptEnabled = true
webView.addJavascriptInterface(WebAppInterface(), "Android")

// Отправка в React
webView.evaluateJavascript("window.postMessage('{\"type\":\"TOKEN\",\"value\":\"$token\"}')", null)

// Получение от React
webView.webViewClient = object : WebViewClient() {
    override fun onPageFinished(view: WebView, url: String) {
        view.loadUrl("javascript:window.ReactNativeWebView.postMessage('{\"type\":\"READY\"}')")
    }
}

Важно: Всегда проверяйте происхождение сообщений (origin) и используйте шифрование для чувствительных данных. Токены лучше передавать через инъекцию или нативный мост, избегая URL.

> ГОТОВЫ К СЛЕДУЮЩЕМУ СОБЕСЕДОВАНИЮ?

Запустите тренировочную сессию с ИИ и получите детальную обратную связь, чтобы увереннее проходить реальные интервью