Saat Anda meluncurkan UI yang halus untuk menampilkan PDF, PPT, atau faktur, biasanya Anda fokus pada estetika, responsivitas, dan waktu muat. Namun yang sering terlewatkan adalah bagaimana dokumen bergerak dari server Anda ke browser pengguna. Satu langkah yang salah dapat mengubah aplikasi yang solid menjadi vektor kebocoran data.
Dalam panduan ini kami akan membahas tujuh kemampuan berfokus‑keamanan yang harus Anda sematkan—langsung dari kotak—saat mengintegrasikan penampil dokumen yang mengutamakan privasi. Daftar periksa ini ditulis untuk insinyur front‑end yang ingin memperkuat penyematan mereka tanpa menambah kompleksitas yang tidak perlu.
1. Enkripsi End‑to‑End pada Aliran Dokumen
Mengapa penting
Bahkan jika Anda menyajikan file melalui HTTPS, dokumen mentah dapat disadap oleh ekstensi browser yang terkompromi atau skrip berbahaya yang membaca respons sebelum mencapai penampil.
Cara mengimplementasikan
| Langkah | Tindakan |
|---|---|
| Enkripsi sisi‑server | Enkripsi file (AES‑256‑GCM adalah pilihan yang solid) sebelum menyimpannya atau mengalirkannya. |
| Keamanan transport | Kirim blob terenkripsi melalui TLS 1.3. |
| Dekripsi sisi‑klien | Jalankan Web Worker yang menerima aliran terenkripsi, mendekripsinya di memori, dan mengalirkan plaintext langsung ke kanvas penampil. |
| Jangan pernah mengungkapkan kunci | Simpan kunci dekripsi dalam token yang dihasilkan server dengan masa hidup pendek (lihat Fitur #4). |
Pada saat penampil merender, dokumen belum pernah terpapar dalam teks biasa di jaringan atau di thread utama.
2. Content‑Security‑Policy (CSP) Whitelisting
Risikonya
CSP yang longgar memungkinkan penyerang menyuntikkan skrip berbahaya atau memuat sumber daya jahat yang dapat membaca data kanvas penampil.
Poin penting
- ‘unsafe‑inline’ dan ‘unsafe‑eval’ dilarang untuk skrip.
- Hanya CDN penampil (atau bundel yang di‑host sendiri) yang diizinkan menyajikan JavaScript.
- Frame dibatasi hanya ke domain penampil yang tepercaya.
CSP yang ketat secara dramatis mengurangi permukaan serangan pada halaman yang menampung penyematan.
3. Isolasi Same‑Origin melalui Sandbox iframe
Mengapa sandbox?
Bahkan dengan CSP, halaman yang terkompromi dapat mencoba merambah ke DOM penampil. <iframe> yang terisolasi menciptakan kandang keamanan yang tidak dapat ditembus halaman induk tanpa izin eksplisit.
Flag sandbox yang harus dihindari
allow-top-navigation– mencegah penampil mengambil alih jendela tingkat atas.allow-popups– memblokir pop‑up tak terduga yang dapat digunakan untuk phishing.
Jika penampil perlu berkomunikasi dengan halaman induk (misalnya untuk sinkronisasi UI), gunakan postMessage dengan pemeriksaan origin yang eksplisit.
4. Kontrol Akses Berbasis Token
Masalah dengan URL langsung
URL statis publik memungkinkan siapa saja yang memiliki tautan mengunduh file selamanya.
Karena token ditandatangani di sisi server, setiap manipulasi membuat permintaan tidak valid, dan penampil menolak memuat.
5. Watermarking & Overlay Dinamis
Tujuannya
Watermark dinamis di sisi klien menambahkan lapisan akuntabilitas tanpa mengubah file asli.
Tips implementasi
- Render watermark pada overlay kanvas yang berada di atas halaman PDF.
- Gunakan email sesi atau UUID acak sehingga setiap instance penampil unik.
- Aktifkan atau nonaktifkan overlay dengan flag sederhana untuk menjaga overhead performa tetap minimal.
Jika dokumen yang bocor muncul, identifier yang tertanam langsung menunjuk ke sumbernya.
6. Pembatasan Unduh & Cetak
Default browser
Sebagian besar browser menampilkan menu konteks klik kanan yang dapat menyimpan kanvas sebagai gambar, secara efektif mengekspor halaman.
Apa yang dapat dan tidak dapat dilakukan penampil
SDK penampil dokumen dapat menyembunyikan aksi ekspor dari toolbar, dan katalog fitur Doconut mencantumkan pencetakan browser serta ekspor PDF di antara kemampuan yang dapat Anda pilih untuk ditampilkan. Periksa nama opsi terhadap dokumentasi versi yang Anda pasang, bukan terhadap artikel manapun, termasuk artikel ini: kunci konfigurasi berubah antar versi.
Yang lebih penting adalah bagian yang tidak dapat ditutupi oleh pengaturan toolbar. Menyembunyikan tombol adalah pilihan alur kerja, bukan kontrol akses. Server tetap harus mengotorisasi setiap permintaan halaman, thumbnail, ekspor, unduhan, dan cetak secara terpisah, karena endpoint tersebut dapat dipanggil langsung. Dan begitu piksel berada di layar, screenshot, kamera, serta alat aksesibilitas tetap ada; penampil yang menjanjikan sebaliknya menjual sesuatu yang tidak dapat dipenuhi.
7. Audit Logging & Event Hooks
Nilai visibilitas
Bahkan penampil yang paling diperkuat sekalipun dapat disalahgunakan. Mencatat siapa yang membuka dokumen apa, kapan, dan tindakan apa yang mereka lakukan menciptakan jejak forensik.
Dengan log real‑time Anda dapat mendeteksi pola anomali—seperti satu pengguna membuka puluhan PDF rahasia dalam hitungan detik—dan memicu peringatan atau pencabutan akses.
Kesimpulan
Menyematkan penampil dokumen adalah tanggung jawab keamanan, bukan sekadar UI. Enkripsi aliran dokumen, Content‑Security‑Policy yang ketat, sandbox iframe yang terisolasi, akses berbasis token, watermark dinamis, pembatasan ekspor yang diperlakukan sebagai UX bukan perlindungan, dan audit logging adalah faktor yang memisahkan penyematan yang dapat Anda pertahankan dari yang tidak.
Dua dari tujuh poin tersebut selalu menjadi milik Anda terlepas dari penampil yang dipilih: otorisasi dan audit. Tidak ada komponen yang dapat membuat keputusan itu untuk tenancy Anda.
Siap membangun penyematan?
- Mulailah dari dokumentasi vendor untuk versi yang Anda pasang. Untuk Doconut, kunjungi doconut.com — paket, panduan pemasangan, dan contoh. Menyalin kunci konfigurasi dari artikel adalah cara integrasi rusak saat upgrade.
- Letakkan daftar periksa tujuh poin ini dalam templat pull‑request Anda sehingga tinjauan keamanan terjadi sebelum penggabungan, bukan setelah insiden.
- Uji kasus negatif terlebih dahulu: identifier dokumen tenant lain, sesi kedaluwarsa, permintaan langsung ke halaman atau endpoint ekspor. Itu adalah pengujian yang menemukan lubang nyata.