Почему Telegram WebApp открывается в Safari вместо WebView?

Telegram WebApp открывается в Safari вместо встроенного WebView в Telegram чаще всего из-за проблем с HTTPS-сертификатом, редиректами на другой домен, заголовками X-Frame-Options или CSP, либо некорректным whitelist-доменом в BotFather. Симптомы вроде window.Telegram = false, tg.sendData = false, initData = null и баннера “TEST MODE” — классика таких сбоев. Быстро диагностируйте через DevTools браузера и curl, а потом поправьте серверные настройки — и initData прилетит корректно.

Содержание

• Что происходит с initData и почему оно null
• Основные причины: почему Telegram сбрасывает в Safari
• Проблема №1: HTTPS невалидный или отсутствует
• Проблема №2: домен не в whitelist BotFather
• Проблема №3: редиректы меняют домен
• Проблема №4: X-Frame-Options и CSP блокируют фрейм
• TEST MODE: как убрать тестовый режим
• Особенности iOS и клиента Telegram
• Диагностика шаг за шагом
• Шаги исправления для запуска внутри Telegram
• Источники
• Заключение

Что происходит с initData и почему оно null

InitData — это сердце Telegram Mini Apps. Telegram передает набор параметров при запуске: данные пользователя, чата, подпись HMAC-SHA256 от бота. Без нее initData = null, window.Telegram не инициализируется, tg.sendData молчит. Почему? Telegram проверяет безопасность перед встраиванием в WebView. Если что-то не так — кидает в Safari.

Представьте: вы кликаете inline-кнопку с web_app=types.WebAppInfo(url=WEB_APP_URL). Telegram смотрит: домен ок? HTTPS чист? Нет фрейм-блоков? Все зашибись — загружает в свой WebView, подсовывает initData. Иначе — браузер, и привет, пустые руки.

Согласно официальной документации по initData, парсите пары ключ-значение (кроме hash), сортируйте, склеивайте \n, хэшируйте с ключом “WebAppData” + токен бота. Если null — Telegram даже не пытался.

Это не баг iOS. Просто Telegram строг: лучше открыть в Safari, чем рисковать подделкой данных.

Основные причины: почему Telegram сбрасывает в Safari

Telegram игнорирует WebView по четким правилам. Топ-5 причин из практики:

1. HTTPS фейлит — self-signed, expired, HTTP.
2. Домен не в BotFather — whitelist пуст или mismatch.
3. Редиректы — 301/302 на другой хост.
4. Заголовки блокеры — X-Frame-Options: DENY, CSP без frame-ancestors.
5. Test Mode — бот в тесте или ?test=1.

Плюс iOS-фишки: Safari агрессивнее проверяет сертификаты. На Android реже срабатывает.

Хабр-статья бьет в точку: “Неверный HTTPS? Откройте URL в браузере — увидите предупреждение?” Именно. А core.telegram.org добавляет: Telegram видит только первый URL, игнорирует редиректы на чужой домен.

Часто комбо: домен ок, но редирект + CSP = Safari. Статистика из туториалов — 80% случаев на HTTPS/headers.

Коротко: Telegram защищает initData. Не прошел чек — браузер.

Проблема №1: HTTPS невалидный или отсутствует

Без HTTPS Telegram даже не моргнет. HTTP? Забудьте. Self-signed для dev ок, но в проде — Let’s Encrypt или Cloudflare.

Симптомы: В Safari предупреждение о cert, initData null.

Почему iOS? Safari строже: блокирует mixed content, expired certs.

Timeweb-туториал советует: откройте URL в браузере. Зеленый замок? Нет — фиксите.

Быстрый тест: curl -I https://your-domain.com. Должен 200 OK, без ошибок cert.

Исправление? Nginx/Apache: вкрутите cert. Dev: mkcert для local.

И да, Telegram принимает self-signed для теста, но домен должен совпадать.

Проблема №2: домен не в whitelist BotFather

Домен добавил? Проверьте точно: без www, без пути, с https://? Нет — Safari.

BotFather → /mybots → ваш бот → Web App → домен. Точный матч с WEB_APP_URL.

DEV Community гайд предупреждает: “Добавьте exact domain (no www, no path)”. myapp.com, не www.myapp.com/path.

Ошибка: добавили http://, а кнопка https://. Или subdomain не указан.

В консоли: “TEST MODE” + Safari. Фикс: /setwebappdomain в BotFather, перезапустите бота.

Core.telegram: “Whitelist mismatch — opens in browser”.

Просто, но ловит 40% новичков.

Проблема №3: редиректы меняют домен

Сервер редиректит your-domain.com на www.your-domain.com? Telegram видит первый URL, но контент с другого — бам, Safari.

Диагностика: DevTools → Network. Цепочка 301/302 меняет host? Удалите.

Aglamov.biz: “В DevTools следите за редиректами. Удалите, чтобы URL оставался тем же”.

Nginx-пример:

server {
 listen 443 ssl;
 server_name your-domain.com;
 # NO redirect here
}

iOS Safari любит такие ловушки — редирект на мобильный хост.

После фикса: тот же домен везде.

Проблема №4: X-Frame-Options и CSP блокируют фрейм

Telegram WebView — это iframe. X-Frame-Options: DENY или SAMEORIGIN (если домены разные) — блок.

CSP без frame-ancestors https://t.me https://telegram.org — то же.

Консоль Safari: “Refused to display in a frame because it set ‘X-Frame-Options’ to ‘deny’”.

Habr Amvera: Установите X-Frame-Options: SAMEORIGIN или удалите. CSP: frame-ancestors 'self' https://t.me;.

Nginx:

add_header X-Frame-Options "SAMEORIGIN" always;
add_header Content-Security-Policy "frame-ancestors 'self' https://t.me https://telegram.org;" always;

Habr 706446: curl -I, ищите эти хедеры.

Фикс — и WebView оживет.

TEST MODE: как убрать тестовый режим

Баннер “TEST MODE” в углу? Бот в test mode (BotFather → Test mode off) или URL с ?test=1.

DEV.to: “TEST MODE” = test bot или ?test=1. Выключите.

Плюс: dev-боты всегда test. Сделайте production-бота.

После: баннер уйдет, initData придет.

Просто, но пугает.

Особенности iOS и клиента Telegram

iOS Safari — король паранойи. Блокирует self-signed строже Android Chrome. Telegram iOS (17+) усилил проверки WebView.

Симптомы только на iPhone? Проверьте Android — работает? Значит, cert или CSP.

Timeweb: iOS открывает в Safari при CSP-блоке чаще.

Фикс: валидный cert (не self-signed в проде), CSP с t.me.

Обновите Telegram app — старые версии глючат.

Диагностика шаг за шагом

1. Консоль браузера: Откройте Safari → URL → Console/Network. Ищите: X-Frame, CSP errors, редиректы, HTTPS warnings.

2. curl -I https://your-domain.com — 200? Хедеры ок?

3. BotFather: /mybots → Web App domain — матч?

4. JS-чек: В консоли: window.Telegram.WebApp.initData. Null? Причина выше.

5. Test mode: Баннер? Выкл.

6. iOS vs Android: Тестируйте оба.

Документация initData: Если hash не verifies — подделка, но для вас null = не запустилось.

10 минут — и причина ясна.

Шаги исправления для запуска внутри Telegram

1. HTTPS: Установите cert. certbot или Cloudflare.

2. BotFather: Добавьте exact домен: /setwebappdomain.

3. Сервер: Уберите редиректы на другой host.

4. Хедеры:

X-Frame-Options: SAMEORIGIN
CSP: frame-ancestors 'self' https://t.me https://telegram.org;

5. Test off: BotFather → production.

6. в head.

7. Тест: Inline-кнопка → WebView? tg.initDataUnsafe.user есть?

Полный чеклист из DEV.to. После — initData работает, sendData шлет.

Готово. Ваш WebApp в Telegram.

Источники

1. Init Data | Telegram Mini Apps
2. Telegram Mini Apps Creation Handbook - DEV Community
3. Telegram WebApps. Как встроить веб-приложения в чат-бота? / Хабр
4. Интеграция Mini Apps в боты Telegram: пошаговое руководство для начинающих
5. Что такое Telegram Web App (Mini App) и как создать свое мини приложение
6. Telegram Web App. Всё о Mini Apps / Хабр
7. Telegram Mini Apps | core.telegram.org

Заключение

Telegram WebApp в Safari вместо WebView — типичная засада на HTTPS, BotFather whitelist, редиректах или хедерах вроде X-Frame-Options/CSP. Диагностика через curl и DevTools занимает минуты, фикс — час. После правок initData заполнится, “TEST MODE” исчезнет, и ваше мини-приложение заработает везде, включая iOS. Главное — точный матч домена и чистый HTTPS. Тестируйте на реальном production-боте — и вперед!