vcordes/lxd-app
1
0
Fork 0
forked from urvishpatelce/lxd-app
Code Pull Requests 1 Activity

fix: update pass credentials to container

Browse Source
This commit is contained in:
Urvish Patel
2025-08-21 11:41:30 +02:00
parent 6c553bea8a
commit e96bcb7a94
4 changed files with 190 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
api/public/index.php
View File

@ -10,6 +10,7 @@ use Psr\Http\Message\ServerRequestInterface as Request;
use Psr\Http\Message\ResponseInterface as Response; use Psr\Http\Message\ResponseInterface as Response;
use App\Controllers\CaptchaController; use App\Controllers\CaptchaController;
use App\Controllers\LoginController; use App\Controllers\LoginController;
use App\Controllers\HandoffController;
use App\Services\LxdService; use App\Services\LxdService;
use Zounar\PHPProxy\Proxy; use Zounar\PHPProxy\Proxy;
use App\Utils\LogWriterHelper; use App\Utils\LogWriterHelper;
@ -71,7 +72,7 @@ $app->group('/api', function ($group) {
$group->get('/captcha', [CaptchaController::class, 'get']); $group->get('/captcha', [CaptchaController::class, 'get']);
$group->post('/login', [LoginController::class, 'index']); $group->post('/login', [LoginController::class, 'index']);
$group->get('/status', [LoginController::class, 'status']); $group->get('/status', [LoginController::class, 'status']);
$group->get('/handoff/post', [HandoffController::class, 'post']);
}); });
/** /**

85
api/src/Controllers/HandoffController.php Normal file
View File

@ -0,0 +1,85 @@
<?php
namespace App\Controllers;
use App\Services\LxdService;
use Psr\Http\Message\ResponseInterface;
use Psr\Http\Message\ServerRequestInterface;
class HandoffController
{
public function post(ServerRequestInterface $req, ResponseInterface $res): ResponseInterface
{
// if (session_status() !== PHP_SESSION_ACTIVE) { session_start(); }
$q = $req->getQueryParams();
$name = (string)($q['name'] ?? '');
$id = (string)($q['handoff'] ?? '');
$path = (string)($q['path'] ?? '/login');
if (!$name || !$id) {
return $this->html($res, 400, '<h1>Bad request</h1>');
}
$lxd = new LxdService();
$ip = $lxd->getContainerIP($name);
if (!$ip) {
return $this->html($res, 503, '<h1>Container not ready</h1>');
}
$key = "handoff:$name:$id";
$data = $_SESSION[$key] ?? null;
unset($_SESSION[$key]); // one-time use
if (!$data || empty($data['username']) || empty($data['password'])) {
return $this->html($res, 410, '<h1>Handoff expired</h1>');
}
// Restrict to relative paths
$path = $this->sanitizePath($path);
// If your container has TLS, prefer https://
$action = 'http://' . $ip . $path;
$html = <<<HTML
<!doctype html>
<html>
<head><meta charset="utf-8"><title>Signing you in…</title></head>
<body>
<form id="f" method="POST" action="{$this->e($action)}">
<input type="hidden" name="username" value="{$this->e($data['username'])}">
<input type="hidden" name="password" value="{$this->e($data['password'])}">
</form>
<script>document.getElementById('f').submit();</script>
<noscript>
<p>JavaScript is required to continue. Click the button below.</p>
<button form="f" type="submit">Continue</button>
</noscript>
</body>
</html>
HTML;
return $this->html($res, 200, $html);
}
private function e(string $s): string
{
return htmlspecialchars($s, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');
}
private function html(ResponseInterface $res, int $code, string $html): ResponseInterface
{
$res->getBody()->write($html);
return $res->withHeader('Content-Type', 'text/html; charset=utf-8')->withStatus($code);
}
private function sanitizePath(string $raw): string
{
if (preg_match('#^https?://#i', $raw)) return '/login';
if (!str_starts_with($raw, '/')) return '/login';
$path = parse_url($raw, PHP_URL_PATH) ?? '/login';
$allow = ['/', '/login', '/signin'];
return in_array($path, $allow, true) ? $path : '/login';
}
}

137
app/pages/index.vue
View File

@ -2,39 +2,41 @@
<div class="page-wrapper"> <div class="page-wrapper">
<Spinner :loading="loading" /> <Spinner :loading="loading" />
<div v-html="output" /> <div v-html="output" />
<!-- 👇 Only show form if access is allowed --> <div v-if="!loading">
<div v-if="!loading">
<div v-if="allowAccess" class="login-container"> <div v-if="allowAccess" class="login-container">
<form @submit.prevent="submitForm" class="login-form"> <form @submit.prevent="submitForm" class="login-form" autocomplete="on">
<h2 class="title">Login</h2> <h2 class="title">Login</h2>
<div class="input-group"> <div class="input-group">
<input <input
type="text" type="text"
placeholder="Username" placeholder="Username"
v-model="username" v-model="username"
required required
autocomplete="username"
inputmode="email"
/> />
</div> </div>
<div class="input-group"> <div class="input-group">
<input <input
type="password" type="password"
placeholder="Password" placeholder="Password"
v-model="password" v-model="password"
required required
autocomplete="current-password"
/> />
</div> </div>
<!-- Include Captcha -->
<Captcha ref="captchaRef" v-model:captcha="captchaValue" /> <Captcha ref="captchaRef" v-model:captcha="captchaValue" />
<button type="submit" :disabled="loading || !captchaValue" class="btn"> <button type="submit" :disabled="loading || !captchaValue" class="btn">
<span v-if="!loading">Login</span> <span v-if="!loading">Login</span>
<span v-else>Loading...</span> <span v-else>Loading...</span>
</button> </button>
<br/>
<p v-if="captchaError" class="error-text">{{ captchaError }}</p> <p v-if="captchaError" class="error-text">{{ captchaError }}</p>
</form> </form>
</div> </div>
<!-- 👇 Show this if the user did not come from an approved source -->
<div v-else class="login-container"> <div v-else class="login-container">
<h2 class="title">Access Denied</h2> <h2 class="title">Access Denied</h2>
<p>You must access this page through the proper login flow.</p> <p>You must access this page through the proper login flow.</p>
@ -44,83 +46,83 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'; import { useRouter, useRoute } from 'vue-router'
import Spinner from '@/components/Spinner.vue'; import Spinner from '@/components/Spinner.vue'
import Captcha from '@/components/Captcha.vue'; import Captcha from '@/components/Captcha.vue'
const output = ref('')
const router = useRouter()
const route = useRoute()
const loading = ref(true)
const username = ref('')
const password = ref('')
const captchaRef = ref(null)
const captchaValue = ref('')
const captchaError = ref('')
const allowAccess = ref(false)
const ALLOWED_REDIRECTS = new Set(['/', '/login', '/signin'])
function sanitizeRedirect(raw) {
if (typeof raw !== 'string') return '/login'
if (raw.startsWith('http://') || raw.startsWith('https://')) return '/login'
if (!raw.startsWith('/')) return '/login'
const pathOnly = raw.split('?')[0]
return ALLOWED_REDIRECTS.has(pathOnly) ? raw : '/login'
}
const output = ref('');
const router = useRouter();
const route = useRoute();
const loading = ref(true);
const username = ref('');
const password = ref('');
const captchaRef = ref(null);
const captchaValue = ref('');
const captchaError = ref('');
const redirectTo = ref('/');
const allowAccess = ref(false) // 🔐 This controls what to show
// 🟡 Grab redirect param on load
onMounted(() => { onMounted(() => {
const redirectParam = route.query.redirect; allowAccess.value = true
const authParam = route.query.auth; loading.value = false
if (redirectParam && typeof redirectParam === 'string') { })
redirectTo.value = decodeURIComponent(redirectParam);
}
// ✅ More reliable than document.referrer
if (authParam === 'ok') {
allowAccess.value = true;
}
loading.value = false;
});
const submitForm = async () => { const submitForm = async () => {
loading.value = true; loading.value = true
output.value = ''; output.value = ''
const encodedRedirect = new URL(redirectTo.value, window.location.origin); captchaError.value = ''
encodedRedirect.searchParams.set('username', username.value);
encodedRedirect.searchParams.set('password', password.value); // Read optional redirect from query but sanitize strictly
const requested = sanitizeRedirect(String(route.query.redirect || '/login'))
try { try {
// Optional CSRF token if you set one in a meta tag
const csrf = document.querySelector('meta[name="csrf-token"]')?.content
const res = await $fetch(`${window.location.origin}/api/login`, { const res = await $fetch(`${window.location.origin}/api/login`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
...(csrf ? { 'X-CSRF-Token': csrf } : {})
}, },
credentials: 'include',
body: { body: {
username: username.value, username: username.value,
password: password.value, password: password.value,
source: 'login', source: 'login',
panswer: captchaValue.value, panswer: captchaValue.value,
redirect: encodedRedirect.toString() redirect: requested
}, },
credentials: 'include', throwHttpErrors: false
throwHttpErrors: false, // important: do NOT throw on 401/4xx })
});
captchaError.value = ''; if (res?.status === 'success' && res?.redirect) {
router.push(res.redirect) // e.g. /waiting?name=...&handoff=...&path=/login
router.push(res.redirect);
// window.location.href = encodedRedirect.toString();
} catch (error) {
if (error.statusCode === 400) {
captchaError.value = error?.data?.message || 'Invalid CAPTCHA';
loading.value = false;
} else { } else {
captchaError.value = error?.data?.message || 'Internal server error!'; captchaError.value = res?.message || 'Login failed'
// window.location.reload(); loading.value = false
loading.value = false;
} }
} catch (error) {
captchaError.value = error?.data?.message || 'Internal server error!'
loading.value = false
} finally { } finally {
captchaRef.value?.refreshCaptcha(); // scrub sensitive inputs
captchaValue.value = ''; password.value = ''
captchaRef.value?.refreshCaptcha()
captchaValue.value = ''
} }
}; }
</script> </script>
<style scoped> <style scoped>
.login-container { .login-container {
max-width: 100%; max-width: 100%;
@ -141,22 +143,15 @@ const submitForm = async () => {
padding: 0.8rem; padding: 0.8rem;
font-weight: 600; font-weight: 600;
font-size: 1.1rem; font-size: 1.1rem;
background-color: #3b82f6; /* blue-500 */ background-color: #3b82f6;
color: white; color: white;
border: none; border: none;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s; transition: background-color 0.3s;
} }
.btn:hover:not(:disabled) { background-color: #2563eb; }
.btn:hover:not(:disabled) { .btn:disabled { background-color: #93c5fd; cursor: not-allowed; }
background-color: #2563eb; /* blue-600 */
}
.btn:disabled {
background-color: #93c5fd; /* blue-300 */
cursor: not-allowed;
}
.input-group input { .input-group input {
padding: 0.8rem; padding: 0.8rem;
border: 1px solid #ccc; border: 1px solid #ccc;
@ -166,7 +161,7 @@ const submitForm = async () => {
.input-group input:focus { .input-group input:focus {
outline: none; outline: none;
border-color: #3b82f6; border-color: #3b82f6;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3); box-shadow: 0 0 0 2px rgba(59,130,246,.3);
} }
.error-text { color: #b91c1c; margin-top: .5rem; }
</style> </style>

65
app/pages/waiting.vue
View File

@ -3,7 +3,7 @@
<div class="waiting-container"> <div class="waiting-container">
<h2>Container Status: {{ status }}</h2> <h2>Container Status: {{ status }}</h2>
<p v-if="status === 'ready'"> <p v-if="status === 'ready'">
Your container is ready! <a :href="`http://${ip}`" target="_blank">Open it</a> Your container is ready! <a :href="openLink" target="_blank" rel="noopener">Open it</a>
</p> </p>
<p v-else-if="status === 'running'">Waiting for services to be ready...</p> <p v-else-if="status === 'running'">Waiting for services to be ready...</p>
<p v-else-if="status === 'starting'">Starting container...</p> <p v-else-if="status === 'starting'">Starting container...</p>
@ -14,13 +14,25 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted, onUnmounted } from 'vue' // <— sicher importieren import { ref, onMounted, onUnmounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from 'vue-router'
const route = useRoute() const route = useRoute()
const router = useRouter() const router = useRouter()
const name = route.query.name
const redirect = route.query.redirect const name = String(route.query.name || '')
const handoff = typeof route.query.handoff === 'string' ? route.query.handoff : ''
const rawPath = typeof route.query.path === 'string' ? route.query.path : '/login'
function sanitizePath(p) {
if (typeof p !== 'string') return '/login'
if (p.startsWith('http://') || p.startsWith('https://')) return '/login'
if (!p.startsWith('/')) return '/login'
const allowed = new Set(['/', '/login', '/signin'])
const pathOnly = p.split('?')[0]
return allowed.has(pathOnly) ? p : '/login'
}
const safePath = sanitizePath(rawPath)
const loading = ref(true) const loading = ref(true)
const status = ref('starting') const status = ref('starting')
@ -28,41 +40,38 @@ const ip = ref(null)
const interval = ref(null) const interval = ref(null)
const errorMessage = ref(null) const errorMessage = ref(null)
const POLL_MS = 3000 const POLL_MS = 5000
const checkStatus = async () => { const openLink = computed(() => (ip.value ? `http://${ip.value}` : '#'))
async function checkStatus () {
try { try {
const res = await $fetch(`${window.location.origin}/api/status?name=${name}`, { const res = await $fetch(`${window.location.origin}/api/status?name=${encodeURIComponent(name)}`, {
method: 'GET', method: 'GET',
cache: 'no-store' // Browser-Cache umgehen cache: 'no-store'
}) })
status.value = res.status status.value = res.status
ip.value = res.ip ?? ip.value if (res.ip) ip.value = res.ip
// Optional: wenn der Container "aus" ist, hier Start triggern (API abhängig)
// if (res.status === 'stopped' || res.status === 'not_found') {
// await $fetch(`${window.location.origin}/api/start?name=${name}`, { method: 'POST' })
// status.value = 'starting'
// }
if (res.status === 'ready') { if (res.status === 'ready') {
// Polling nur bei success beenden
if (interval.value) clearInterval(interval.value) if (interval.value) clearInterval(interval.value)
loading.value = false loading.value = false
ip.value = res.ip
// Redirect-Logik: wenn redirect gesetzt -> dahin; sonst zur Root oder zur IP // Prefer bridge handoff if we have an id; otherwise, just open container root.
if (redirect) { if (handoff) {
window.location.href = redirect.toString(); const bridge = new URL(`${window.location.origin}/api/handoff/post`)
bridge.searchParams.set('name', name)
bridge.searchParams.set('handoff', handoff)
bridge.searchParams.set('path', safePath)
// Replace to avoid creating a back entry with sensitive navigation
window.location.replace(bridge.toString())
} else if (ip.value) {
window.location.replace(`http://${ip.value}`)
} else { } else {
// Entweder auf die IP oder auf die Host-Root window.location.replace(`http://${window.location.host}`)
// window.location.href = `http://${ip.value}`
window.location.href = `http://${window.location.host}`
} }
} else { } else {
// solange nicht ready: weiterladen anzeigen
loading.value = true loading.value = true
} }
} catch (error) { } catch (error) {
@ -72,17 +81,15 @@ const checkStatus = async () => {
if (interval.value) clearInterval(interval.value) if (interval.value) clearInterval(interval.value)
// nach kurzer Pause zurück zur App (Redirect-Param übernehmen) // Bounce back to app without leaking anything sensitive
setTimeout(() => { setTimeout(() => {
router.replace(`/app/?auth=ok&redirect=${redirect ?? ''}`) router.replace(`/app/`)
}, 5000) }, 5000)
} }
} }
onMounted(() => { onMounted(() => {
checkStatus() checkStatus()
// WICHTIG: Intervall NICHT im checkStatus selbst löschen,
// sondern nur bei ready/error oder beim Unmount.
interval.value = setInterval(checkStatus, POLL_MS) interval.value = setInterval(checkStatus, POLL_MS)
}) })