Vkládání zabezpečeného prohlížeče dokumentů: 7 zásadních funkcí, které front‑end vývojáři často přehlížejí
Když nasazujete vylepšené UI pro zobrazování PDF, PPT nebo faktur, obvykle se soustředíte na estetiku, responzivitu a dobu načítání. Co se však často přehlíží, je jak dokumenty cestují z vašeho serveru do prohlížeče uživatele. Jedna chyba může proměnit jinak solidní aplikaci v vektor úniku dat.
V tomto průvodci projdeme sedm bezpečnostně zaměřených schopností, které byste měli vložit – hned po vybalení – při integraci prohlížeče dokumentů zaměřeného na soukromí. Seznam je určen front‑end inženýrům, kteří chtějí posílit své embedy bez zbytečné složitosti.
1. End‑to‑End šifrování proudu dokumentu
Proč to je důležité
I když soubory servírujete přes HTTPS, surový dokument může zachytit kompromitované rozšíření prohlížeče nebo škodlivý skript, který přečte odpověď ještě před tím, než dorazí do prohlížeče.
Jak implementovat
| Krok | Akce |
|---|---|
| Server‑side encryption | Zašifrujte soubor (AES‑256‑GCM je solidní volba) před uložením nebo streamováním. |
| Transport security | Dodávejte zašifrovaný blob přes TLS 1.3. |
| Client‑side decryption | Spusťte Web Worker, který přijme zašifrovaný stream, dešifruje jej v paměti a předá čistý text přímo do canvasu prohlížeče. |
| Never expose the key | Uchovávejte dešifrovací klíč v krátkodobém tokenu generovaném serverem (viz Funkce #4). |
Do doby, než prohlížeč vykreslí, dokument nikdy nebyl vystaven v čistém textu na síti ani v hlavním vlákně.
2. Content‑Security‑Policy (CSP) whitelistování
Riziko
Laxní CSP umožní útočníkovi vložit škodlivé skripty nebo načíst podvodné zdroje, které by mohly číst data canvasu prohlížeče.
Klíčové body
- ‘unsafe‑inline’ a ‘unsafe‑eval’ jsou pro skripty zakázány.
- Pouze CDN prohlížeče (nebo vlastní bundle) smí sloužit JavaScript.
- Rámy jsou omezeny na důvěryhodnou doménu prohlížeče.
Přísná CSP dramaticky snižuje útočnou plochu stránky, která embed hostuje.
3. Same‑Origin izolace pomocí iframe sandboxu
Proč sandbox?
I přes CSP může kompromitovaná stránka zkusit proniknout do DOMu prohlížeče. Izolovaný <iframe> vytváří bezpečnostní klec, kterou hostitelská stránka nemůže prolomit bez explicitního povolení.
Sandbox flagy, kterým se vyhnout
allow-top-navigation– zabraňuje prohlížeči převzít kontrolu nad hlavním oknem.allow-popups– blokuje neočekávané vyskakovací okna, která by mohla být použita pro phishing.
Pokud prohlížeč potřebuje komunikovat s rodičovskou stránkou (např. pro synchronizaci UI), použijte postMessage s explicitní kontrolou originu.
4. Token‑based řízení přístupu
Problém s přímými URL
Veřejné, statické URL umožní komukoli s odkazem soubor stáhnout navždy.
Protože token je podepsán na serveru, jakákoli manipulace požadavek neplatí a prohlížeč odmítne načíst.
5. Vodoznakování a dynamické překryvy
Účel
Dynamický, klientský vodoznak přidává vrstvu odpovědnosti, aniž by měnil původní soubor.
Tipy pro implementaci
- Vykreslete vodoznak na canvas overlay, který leží nad stránkami PDF.
- Použijte e‑mail relace nebo náhodné UUID, aby každá instance prohlížeče byla unikátní.
- Přepínání overlaye pomocí jednoduchého flagu udrží výkon na minimu.
Pokud se unikne dokument, vložený identifikátor ukazuje přímo na zdroj.
6. Omezení stahování a tisku
Výchozí chování prohlížečů
Většina prohlížečů nabízí kontextové menu po kliknutí pravým tlačítkem, které může uložit canvas jako obrázek, čímž efektivně exportuje dokument.
Defenzivní flagy
| Možnost prohlížeče | Efekt |
|---|---|
disableDownload: true | Skryje jakékoli UI „Download“ a zakáže zkratku Ctrl+S. |
disablePrint: true | Zabrání otevření dialogu tisku Ctrl+P pro embed. |
preventContextMenu: true | Zablokuje nativní kontextové menu nad oblastí prohlížeče. |
Kombinujte to s iframe sandboxem, aby hostitelská stránka nemohla obejít omezení pomocí JavaScriptu.
7. Auditní logování a událostní háčky
Hodnota viditelnosti
I ten nejpevněji zabezpečený prohlížeč může být zneužit. Logování, kdo otevřel který dokument, kdy a jaké akce provedl, vytváří forenzní stopu.
S logy v reálném čase můžete detekovat anomální vzorce – např. jeden uživatel otevře desítky důvěrných PDF během několika sekund – a spustit upozornění nebo revokaci přístupu.
Závěr
Vkládání prohlížeče dokumentů není jen otázka UI; je to bezpečnostní odpovědnost. Začleněním end‑to‑end šifrování, přísné Content‑Security‑Policy, izolovaného iframe sandboxu, token‑based přístupu, dynamických vodoznaků, omezení stahování/tisku a komplexního auditního logování proměníte jednoduchý embed v robustní, odolný komponent proti narušení.
Připravený zabezpečit další aplikaci?
- Stáhněte si zdarma SDK z https://doconut.com – žádné pluginy, žádné další závislosti.
- Zkopírujte sedmibodový kontrolní seznam do šablony pull‑requestu, aby se bezpečnost stala zvykem.
- Implementujte první funkci ještě dnes a podělte se o svůj pokrok v komentářích – komunitní odpovědnost pomáhá všem zůstat v bezpečí.
Zůstaňte v bezpečí, zůstaňte rychlí a šťastné kódování!