Files
bedolaga-cabinet/public/miniapp/redirect.html
c0mrade 325e221e32 fix(connection): stop ERR_UNKNOWN_URL_SCHEME when opening app deep links on mobile
Telegram bug #654272: opening the connection app link (immediate-open / connect button)
showed a full-page net::ERR_UNKNOWN_URL_SCHEME on Android and silently failed on iOS, while
working on desktop.

Cause: a programmatic top-level navigation to a custom scheme (happ://, v2rayng://, …) via
window.location.href is rendered as a full-page error inside in-app WebViews (Telegram/Yandex)
on Android and does nothing on iOS — also wiping the fallback UI.

Add openAppScheme(): http(s) navigate normally; custom schemes launch via a hidden, contained
iframe so a failed launch never replaces the page — the app opens if installed, otherwise the
manual 'Open app' link stays usable (a user tap is the reliable trigger). Applied in
DeepLinkRedirect.tsx, Connection.tsx and the static public/miniapp/redirect.html (which now
also surfaces the manual button immediately instead of after 2s).
2026-06-08 13:11:19 +03:00

176 lines
6.4 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Redirecting...</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
@media (prefers-color-scheme: light) {
body {
background: linear-gradient(135deg, #f5f5f7 0%, #e5e7eb 100%);
color: #1d1d1f;
}
.spinner {
border-color: rgba(0,0,0,0.1);
border-top-color: #3b82f6;
}
.error {
background: rgba(0,0,0,0.05);
}
.btn {
background: #3b82f6;
color: #fff;
}
}
.container {
text-align: center;
padding: 2rem;
}
.spinner {
width: 48px;
height: 48px;
border: 4px solid rgba(255,255,255,0.2);
border-top-color: #fff;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 1.5rem;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
h1 {
font-size: 1.25rem;
font-weight: 500;
margin-bottom: 0.5rem;
}
p {
font-size: 0.875rem;
opacity: 0.7;
}
.error {
display: none;
margin-top: 1.5rem;
padding: 1rem;
background: rgba(255,255,255,0.1);
border-radius: 8px;
}
.error.show {
display: block;
}
.btn {
display: inline-block;
margin-top: 1rem;
padding: 0.75rem 1.5rem;
background: #fff;
color: #1a1a2e;
text-decoration: none;
border-radius: 8px;
font-weight: 500;
}
</style>
</head>
<body>
<div class="container">
<div class="spinner"></div>
<h1 id="title">Opening app...</h1>
<p id="subtitle">Please wait</p>
<div class="error" id="errorBlock">
<p id="errorText">If the app didn't open, click the button below:</p>
<a class="btn" id="manualBtn" href="#">Open App</a>
</div>
</div>
<script>
(function() {
const params = new URLSearchParams(window.location.search);
const url = params.get('url');
const lang = params.get('lang') || 'en';
const texts = {
en: {
title: 'Opening app...',
subtitle: 'Please wait',
error: "If the app didn't open, click the button below:",
btn: 'Open App',
noUrl: 'No URL provided'
},
ru: {
title: 'Открываем приложение...',
subtitle: 'Пожалуйста, подождите',
error: 'Если приложение не открылось, нажмите кнопку:',
btn: 'Открыть приложение',
noUrl: 'URL не указан'
}
};
const t = texts[lang] || texts.en;
document.getElementById('title').textContent = t.title;
document.getElementById('subtitle').textContent = t.subtitle;
document.getElementById('errorText').textContent = t.error;
document.getElementById('manualBtn').textContent = t.btn;
// SECURITY: this page navigates to a user-supplied `url`. Only open
// a custom app deep link. A bare `javascript:`/`data:`/`vbscript:`/
// `file:` URI (DOM-XSS) is not scheme://-shaped, and http(s)/intent
// are blocked (open redirect / intent abuse) — so only VPN app
// schemes (happ://, vless://, ...) pass. Mirrors the validation in
// src/pages/DeepLinkRedirect.tsx.
function isSafeAppLink(raw) {
var s = String(raw || '').trim().toLowerCase();
var m = s.match(/^([a-z][a-z0-9+.\-]*):\/\//);
if (!m) return false;
var blocked = ['http', 'https', 'file', 'blob', 'about', 'javascript', 'data', 'vbscript', 'intent', 'content'];
return blocked.indexOf(m[1]) === -1;
}
if (!url || !isSafeAppLink(url)) {
document.getElementById('title').textContent = t.noUrl;
document.getElementById('subtitle').textContent = '';
document.querySelector('.spinner').style.display = 'none';
return;
}
const manualBtn = document.getElementById('manualBtn');
manualBtn.href = url;
// Attempt to launch the app WITHOUT a top-level navigation. A direct
// `location.href = scheme` paints a full-page net::ERR_UNKNOWN_URL_SCHEME
// inside Android in-app browsers (Telegram/Yandex/…) and silently fails on
// iOS — hiding the manual button (Telegram bug #654272). A hidden iframe is
// contained: the app opens if installed, otherwise the failure stays inside
// the (invisible) frame and the button below stays usable.
try {
var frame = document.createElement('iframe');
frame.style.display = 'none';
frame.src = url;
document.body.appendChild(frame);
setTimeout(function() {
try { frame.parentNode.removeChild(frame); } catch (e) {}
}, 2000);
} catch (e) {
window.location.href = url;
}
// Programmatic opening is unreliable in in-app browsers, so surface the
// manual "Open app" button immediately — a user tap is the reliable trigger.
document.getElementById('errorBlock').classList.add('show');
})();
</script>
</body>
</html>