Portas — Accès web sécurisé

Entrez une URL et appuyez sur "Se connecter" pour charger un site en mode sécurisé.

:root { --bg: #0f1724; --card: #0b1220; --accent: #7dd3fc; --muted: #9aa4b2; --danger: #ff6b6b; --glass: rgba(255,255,255,0.03); } * { box-sizing: border-box; } html,body { height: 100%; margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: linear-gradient(180deg,#071021 0%, #081226 100%); color: #e6eef6; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid rgba(255,255,255,0.03); background: linear-gradient(90deg, rgba(255,255,255,0.02), transparent); } .brand { font-weight: 700; font-size: 20px; color: var(--accent); } .tagline { color: var(--muted); font-size: 14px; } .container { display: grid; grid-template-columns: 1fr 320px; gap: 18px; padding: 20px; height: calc(100vh - 72px); } .controls { padding: 12px; border-radius: 8px; background: var(--card); box-shadow: 0 6px 18px rgba(2,6,23,0.5); } .viewer { padding: 12px; border-radius: 8px; background: var(--card); display: flex; flex-direction: column; } .sidepanel { padding: 12px; } .form { display: flex; gap: 8px; align-items: center; } .form input[type="text"] { flex: 1; padding: 10px 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.04); background: rgba(255,255,255,0.02); color: inherit; outline: none; } .form button { padding: 10px 12px; border: none; border-radius: 6px; cursor: pointer; background: var(--accent); color: #022; font-weight: 600; } .form .secondary { background: transparent; border: 1px solid rgba(255,255,255,0.04); color: var(--muted); } .info { margin-top: 10px; display: flex; gap: 10px; } .link { background: transparent; border: none; color: var(--muted); cursor: pointer; } .messages { margin-top: 12px; color: var(--muted); font-size: 14px; min-height: 22px; } .iframe-wrapper { flex: 1; border-radius: 8px; overflow: hidden; background: var(--glass); display: flex; align-items: center; justify-content: center; position: relative; } .iframe-wrapper.empty .placeholder { padding: 24px; color: var(--muted); text-align: center; } iframe.sandboxed { width: 100%; height: 100%; border: none; display: block; } .panel { background: var(--card); padding: 12px; border-radius: 8px; color: var(--muted); } .panel h3 { margin: 0 0 8px 0; color: var(--accent); font-size: 15px; } .panel ul { list-style: none; padding: 0; margin: 0 0 8px 0; max-height: 240px; overflow: auto; } .panel li { padding: 6px 8px; border-radius: 6px; background: rgba(255,255,255,0.012); margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; } .small-form { display: flex; gap: 8px; } .small-form input { flex: 1; padding: 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.03); background: rgba(255,255,255,0.02); color: inherit; } .small-form button, .small-btn { background: var(--accent); border: none; padding: 8px 10px; border-radius: 6px; color: #022; cursor: pointer; } .danger { color: var(--danger); font-weight: 700; } .ok { color: #8ef1b9; font-weight: 700; } @media (max-width: 900px) { .container { grid-template-columns: 1fr; grid-auto-rows: min-content; height: auto; padding-bottom: 40px; } .sidepanel { display: none; } } // Liste simple et utilitaires pour la blacklist et l'historique export const defaultBlocked = [ "malicious.test", "badsite.example", "phishing.local", "virus-downloads.test" ]; const BL_KEY = "portas:blacklist"; const HIST_KEY = "portas:history"; export function loadBlacklist() { try { const raw = localStorage.getItem(BL_KEY); if (!raw) return [...defaultBlocked]; const parsed = JSON.parse(raw); if (Array.isArray(parsed)) return Array.from(new Set([...defaultBlocked, ...parsed])); } catch (e) { // ignore } return [...defaultBlocked]; } export function saveBlacklist(list) { localStorage.setItem(BL_KEY, JSON.stringify(Array.from(new Set(list)))); } export function addToBlacklist(domain) { const list = loadBlacklist(); list.push(domain); saveBlacklist(list); return list; } export function removeFromBlacklist(domain) { const list = loadBlacklist().filter(d => d !== domain); saveBlacklist(list); return list; } export function loadHistory() { try { const raw = localStorage.getItem(HIST_KEY); if (!raw) return []; const parsed = JSON.parse(raw); if (Array.isArray(parsed)) return parsed; } catch (e) {} return []; } export function pushHistory(entry) { const list = loadHistory(); list.unshift({ url: entry.url, domain: entry.domain, time: Date.now() }); localStorage.setItem(HIST_KEY, JSON.stringify(list.slice(0, 200))); } export function clearHistory() { localStorage.removeItem(HIST_KEY); } // Fonctions pour normaliser et vérifier les URL côté client const suspiciousExtensions = [ ".exe", ".msi", ".bat", ".cmd", ".scr", ".pif", ".zip", ".rar", ".7z", ".dll" ]; export function normalizeUrl(input) { if (!input || typeof input !== "string") return null; let s = input.trim(); if (!s) return null; // si pas de scheme, ajouter https if (!/^[a-zA-Z][a-zA-Z0-9+.-]*:\/\//.test(s)) { s = "https://" + s; } try { const u = new URL(s); return u.href; } catch (e) { return null; } } export function getDomain(href) { try { const u = new URL(href); return u.hostname.toLowerCase(); } catch (e) { return ""; } } export function isValidUrl(href) { try { const u = new URL(href); return ["http:", "https:"].includes(u.protocol); } catch (e) { return false; } } export function hasSuspiciousExtension(href) { try { const u = new URL(href); const path = u.pathname.toLowerCase(); return suspiciousExtensions.some(ext => path.endsWith(ext)); } catch (e) { return false; } } export function isIpAddress(domain) { // simple IPv4/IPv6 check if (!domain) return false; const ipv4 = /^(25[0-5]|2[0-4]\d|1?\d{1,2})(\.(25[0-5]|2[0-4]\d|1?\d{1,2})){3}$/; const ipv6 = /^[0-9a-fA-F:]+$/; return ipv4.test(domain) || ipv6.test(domain); } export function basicHeuristics(href) { const domain = getDomain(href); if (!domain) return { safe: false, reason: "URL invalide" }; if (isIpAddress(domain)) return { safe: false, reason: "Adresse IP directe suspecte" }; if (hasSuspiciousExtension(href)) return { safe: false, reason: "Fichier exécutable ou archive détecté" }; if (domain.includes("xn--")) return { safe: false, reason: "Domaine punycode suspect" }; // chemins très longs ou présence de scripts données risquées try { const u = new URL(href); if (u.pathname.length > 2000) return { safe: false, reason: "Chemin trop long suspect" }; } catch (e) {} return { safe: true }; } import { getDomain } from "./sanitizer.js"; const DEFAULT_TIMEOUT = 15000; export function createSandboxedIframe(url, onEject, onReady, options = {}) { const wrapper = document.getElementById("iframeWrapper"); wrapper.innerHTML = ""; wrapper.classList.remove("empty"); const iframe = document.createElement("iframe"); iframe.className = "sandboxed"; // sandbox WITHOUT allow-same-origin and WITHOUT allow-top-navigation: // We allow scripts so some sites may run but they will be in unique origin. // allow-popups enables opening a new tab if user explicitly does so. iframe.setAttribute("sandbox", "allow-forms allow-scripts allow-popups allow-pointer-lock allow-modals"); iframe.src = url; let timedOut = false; let loaded = false; const timer = setTimeout(() => { if (!loaded) { timedOut = true; // éjecter si timeout de chargement doEject("Chargement trop long ou bloqué"); } }, options.timeout || DEFAULT_TIMEOUT); iframe.addEventListener("load", () => { loaded = true; clearTimeout(timer); // On ne peut pas accéder au contenu en cross-origin. On déclenche ready. try { onReady && onReady({ iframe }); } catch (e) {} }); iframe.addEventListener("error", () => { clearTimeout(timer); doEject("Erreur de chargement"); }); wrapper.appendChild(iframe); function doEject(reason) { clearTimeout(timer); // Retirer iframe if (iframe && iframe.parentNode) iframe.parentNode.removeChild(iframe); wrapper.classList.add("empty"); // afficher message d'éjection const domain = getDomain(url) || url; const payload = { domain, reason, url }; try { onEject && onEject(payload); } catch (e) {} } return { iframe, destroy() { clearTimeout(timer); if (iframe && iframe.parentNode) iframe.parentNode.removeChild(iframe); wrapper.classList.add("empty"); } }; } import { normalizeUrl, isValidUrl, getDomain, basicHeuristics } from "./sanitizer.js"; import { loadBlacklist, addToBlacklist, removeFromBlacklist, loadHistory, pushHistory, clearHistory, saveBlacklist } from "./safelists.js"; import { createSandboxedIframe } from "./iframeManager.js"; let currentIframeController = null; // Elements const urlInput = document.getElementById("urlInput"); const navigateForm = document.getElementById("navigateForm"); const messages = document.getElementById("messages"); const goBtn = document.getElementById("goBtn"); const openNewTabBtn = document.getElementById("openNewTabBtn"); const showBlacklist = document.getElementById("showBlacklist"); const showHistory = document.getElementById("showHistory"); const blacklistPanel = document.getElementById("blacklistPanel"); const historyPanel = document.getElementById("historyPanel"); const blacklistList = document.getElementById("blacklistList"); const blacklistForm = document.getElementById("blacklistForm"); const blacklistInput = document.getElementById("blacklistInput"); const historyList = document.getElementById("historyList"); const clearHistoryBtn = document.getElementById("clearHistory"); function setMessage(txt, cls = "") { messages.textContent = txt; messages.className = "messages " + (cls || ""); } function renderBlacklist() { const list = loadBlacklist(); blacklistList.innerHTML = ""; list.forEach(d => { const li = document.createElement("li"); li.textContent = d; const btn = document.createElement("button"); btn.textContent = "Supprimer"; btn.style.marginLeft = "12px"; btn.addEventListener("click", () => { removeFromBlacklist(d); renderBlacklist(); }); li.appendChild(btn); blacklistList.appendChild(li); }); } function renderHistory() { const list = loadHistory(); historyList.innerHTML = ""; if (list.length === 0) { historyList.innerHTML = "

Aucun élément

"; return; } list.forEach(h => { const li = document.createElement("li"); const time = new Date(h.time).toLocaleString(); li.textContent = `${h.domain} — ${h.url} — ${time}`; historyList.appendChild(li); }); } function ejectHandler(payload) { setMessage(`Vous avez été éjecté du site: ${payload.domain} (${payload.reason})`, "danger"); // enregistrer dans l'historique comme éjection pushHistory({ url: payload.url, domain: payload.domain }); } function readyHandler() { setMessage("Site chargé en mode sécurisé (sandbox). Certaines fonctionnalités peuvent être restreintes.", "ok"); } function openSite(rawInput) { setMessage(""); const norm = normalizeUrl(rawInput); if (!norm || !isValidUrl(norm)) { setMessage("URL invalide.", "danger"); return; } const domain = getDomain(norm); const blacklist = loadBlacklist(); if (blacklist.includes(domain)) { setMessage(`Ce site est dans la liste noire: ${domain}`, "danger"); pushHistory({ url: norm, domain }); return; } const heur = basicHeuristics(norm); if (!heur.safe) { // éjecter sans charger setMessage(`Site bloqué: ${domain} — ${heur.reason}`, "danger"); pushHistory({ url: norm, domain }); return; } // Détruire iframe précédent si existant if (currentIframeController && currentIframeController.destroy) { currentIframeController.destroy(); currentIframeController = null; } currentIframeController = createSandboxedIframe(norm, (payload) => { ejectHandler(payload); }, () => { readyHandler(); pushHistory({ url: norm, domain }); }, { timeout: 15000 }); setMessage(`Chargement de ${domain}...`); } navigateForm.addEventListener("submit", (e) => { e.preventDefault(); const val = urlInput.value; if (!val) { setMessage("Veuillez entrer une URL.", "danger"); return; } openSite(val); }); openNewTabBtn.addEventListener("click", () => { const val = urlInput.value; const norm = normalizeUrl(val); if (!norm) { setMessage("URL invalide pour ouvrir dans un nouvel onglet.", "danger"); return; } window.open(norm, "_blank", "noopener,noreferrer"); setMessage("Ouvert dans un nouvel onglet (non protégé par Portas)."); }); showBlacklist.addEventListener("click", () => { blacklistPanel.hidden = !blacklistPanel.hidden; historyPanel.hidden = true; renderBlacklist(); }); showHistory.addEventListener("click", () => { historyPanel.hidden = !historyPanel.hidden; blacklistPanel.hidden = true; renderHistory(); }); blacklistForm.addEventListener("submit", (e) => { e.preventDefault(); const d = blacklistInput.value.trim().toLowerCase(); if (!d) return; addToBlacklist(d); blacklistInput.value = ""; renderBlacklist(); setMessage(`Domaine ajouté à la liste noire: ${d}`); }); clearHistoryBtn.addEventListener("click", () => { clearHistory(); renderHistory(); setMessage("Historique vidé."); }); // Raccourcis clavier document.addEventListener("keydown", (e) => { if ((e.ctrlKey || e.metaKey) && e.key === "l") { e.preventDefault(); urlInput.focus(); urlInput.select(); } }); // Initial render renderBlacklist(); renderHistory();