Topik wawancara representatif

Wawancara Frontend: Bagaimana Cara Anda Merancang Akses Jaringan Lokal yang Aman?

FrontendSulit
Tim Redaksi Offer.ccDipublikasikan Diperbarui

Pertanyaan

Sebuah dasbor HTTPS publik mengonfigurasi printer dan agen pengembang di jaringan pengguna. Rancang alur frontend untuk permintaan lokal dan loopback, termasuk izin prompt, Permissions Policy di iframe, penanganan mixed-content, pemeriksaan address-space, fallback browser, dan pengujian yang mencegah pemindaian produksi yang tidak disengaja.

Pertanyaan dan ruang lingkup

Dasbor disajikan dari origin HTTPS publik. Dasbor ini terkadang memanggil printer di alamat privat dan helper di localhost; dasbor ini juga menyematkan iframe vendor yang tidak boleh menjangkau jaringan lokal. Jelaskan bagaimana browser membedakan ruang alamat publik, lokal, dan loopback, kapan izin pengguna diperlukan, dan bagaimana halaman harus pulih dari penolakan izin.

Pertahankan otorisasi aplikasi, CORS, dan autentikasi perangkat dalam ruang lingkup sebagai lapisan yang terpisah. Izin browser adalah batas persetujuan pengguna, bukan bukti bahwa printer adalah milik akun saat ini. Asumsikan produk dapat menawarkan jalur konfigurasi manual saat browser tidak menerapkan Local Network Access.

Apa yang sedang diuji oleh pewawancara

Sinyal utamanya adalah apakah Anda mengenali bahwa halaman publik yang memanggil endpoint privat merupakan batas keamanan. Jawaban yang kuat menyebutkan serangan bergaya CSRF terhadap router dan printer, lalu membatasi alur dengan secure context, klasifikasi address-space, status izin, dan allowlist untuk konten yang disematkan.

Pewawancara juga akan menguji apakah Anda bingung membedakan antara local-network dan loopback-network, atau berasumsi bahwa preflight CORS yang berhasil langsung memberikan akses. Jawaban yang baik memisahkan kebijakan, izin, mixed content, CORS, dan autentikasi perangkat sebagai gerbang yang berbeda.

Pertanyaan untuk diklarifikasi sebelum menjawab

  • Apakah semua target diketahui sebelumnya, atau pengguna boleh memasukkan alamat IP arbitrer? Pemindaian arbitrer memerlukan batas produk yang berbeda dan tidak boleh disembunyikan di balik tombol "hubungkan" yang umum.
  • Apakah helper hanya ada di localhost, atau dapat dijangkau melalui subnet privat? Hal ini mengubah apakah izin loopback atau jaringan lokal yang diperlukan.
  • Bisakah iframe vendor atau frame bersarang melakukan permintaan tersebut? Jika ya, setiap batas frame harus mendelegasikan fitur dan kemungkinan origin navigasinya secara eksplisit.
  • Browser dan kebijakan perusahaan mana yang didukung? Waktu peluncuran berbeda-beda, sehingga jalur kompatibilitas harus dapat diobservasi daripada melemahkan keamanan secara diam-diam.

Kerangka jawaban 30 detik

"Saya akan mempertahankan dasbor pada HTTPS, mengklasifikasikan setiap tujuan sebagai publik, lokal, atau loopback, dan hanya meminta izin browser yang sesuai saat diperlukan. Kebijakan respons akan menolak akses lokal ke iframe vendor; jika iframe harus terhubung, daftar allow-nya akan menyebutkan origin yang tepat dan semua target navigasi. Saya akan memeriksa status izin sebelum tindakan dilakukan, menunjukkan alasan mengapa akses diperlukan, menangani kegagalan mixed-content dan CORS secara terpisah, serta menyediakan jalur penyiapan manual untuk browser yang tidak didukung. Pengujian akan memastikan bahwa host arbitrer dan frame iklan produksi tidak pernah memicu permintaan jaringan lokal."

Jawaban mendalam langkah demi langkah

Langkah 1: Tentukan batas kepercayaan dan ruang alamat

Situs web publik tidak boleh secara diam-diam mengirimkan permintaan yang mengubah status ke router, printer, atau layanan pengembangan milik pengguna. Buat model untuk tiga kelas tujuan: alamat publik dapat dijangkau secara global, alamat lokal hanya dapat dijangkau di jaringan pengguna, dan alamat loopback menargetkan perangkat yang sama. localhost tidak setara dengan setiap subnet privat.

Inventaris permintaan harus mencakup fetch, pemuatan sub-sumber daya, WebSockets, WebTransport, WebRTC, permintaan service-worker, dan navigasi frame. Pustaka yang membuka soket dapat melintasi batas yang sama bahkan ketika kode aplikasi tidak berisi panggilan fetch langsung.

Langkah 2: Mewajibkan secure context dan izin eksplisit

Gunakan halaman tingkat atas HTTPS. Pada browser yang mendukung, lakukan kueri izin yang relevan sebelum mencoba tindakan perangkat:

js
const localState = await navigator.permissions.query({ name: "local-network" });
const loopbackState = await navigator.permissions.query({ name: "loopback-network" });

Perlakukan granted, prompt, dan denied sebagai status produk. Jelaskan tujuannya sebelum memicu prompt; saat ditolak, tampilkan tautan perbaikan atau pengaturan manual daripada mencoba lagi dalam perulangan tak terbatas. Halaman HTTP harus dianggap tidak didukung untuk alur ini meskipun suatu target kebetulan merespons.

Langkah 3: Batasi dokumen yang disematkan

Respons tingkat atas hanya dapat mendelegasikan fitur dan origin yang membutuhkannya. Frame vendor tidak mendapatkan kapabilitas jaringan lokal:

http
Permissions-Policy: local-network=(self "https://dashboard.example"), loopback-network=(self "https://dashboard.example")

Jika frame penyiapan tepercaya harus terhubung, delegasikan secara terbatas:

html
<iframe src="https://setup.example" allow="local-network https://setup.example; loopback-network https://setup.example"></iframe>

Header dan kebijakan iframe beririsan. Sebuah frame tidak dapat memperluas penolakan dari induknya. Jika frame bernavigasi ke origin lain yang juga membuat permintaan lokal, cantumkan origin tersebut secara eksplisit atau tolak akses setelah navigasi. Frame bersarang memerlukan kebijakan di setiap batasnya.

Langkah 4: Pisahkan izin dari mixed content dan CORS

Izin tidak membuat permintaan yang tidak aman menjadi valid secara universal. Beberapa implementasi browser mengizinkan endpoint HTTP lokal tertentu setelah persetujuan diberikan, sementara pemeriksaan mixed-content lainnya tetap berlaku. Gunakan metadata target address-space dari permintaan hanya jika browser dan kontrak endpoint mendukungnya; jangan gunakan itu sebagai jalan pintas untuk tujuan publik.

CORS menjawab apakah target mengizinkan origin web untuk membaca respons. CORS tidak mengizinkan halaman publik untuk menjangkau printer, dan tidak dapat menggantikan autentikasi perangkat. Untuk perintah yang mengubah status, gunakan challenge khusus perangkat atau kode penyandingan dan buat perintah tersebut idempoten.

Langkah 5: Rancang fallback dan telemetri

Browser yang tidak didukung harus menyediakan IP manual, helper native, atau rute penyandingan yang dipandu pengguna. Catat kelas tujuan, status izin, hasil kebijakan, kapabilitas browser, hasil CORS, dan hasil autentikasi perangkat tanpa mencatat kredensial atau respons lokal mentah. Alarm produksi harus menyala jika suatu rilis menyebabkan kelas host baru meminta akses lokal atau jika frame iklan mencobanya.

Langkah 6: Uji matriks negatif

Uji localhost, IP privat, hostname publik yang me-resolve secara publik, hostname publik yang me-resolve secara lokal, halaman HTTP, izin yang hilang, izin yang ditolak, delegasi iframe yang hilang, frame bersarang, navigasi ke origin yang tidak terdaftar, respons CORS yang diblokir, kegagalan autentikasi perangkat, dan alamat yang berubah kelas selama resolusi DNS. Verifikasi bahwa hanya tindakan pengguna yang dimaksudkan yang dapat memicu prompt dan tidak ada percobaan ulang latar belakang yang memindai rentang IP.

Contoh jawaban berkualitas tinggi

"Saya akan memperlakukan permintaan publik-ke-lokal sebagai kapabilitas yang harus diminta dan dibatasi ruang lingkupnya. Dasbor tetap menggunakan HTTPS, mengklasifikasikan tujuan printer dan helper secara terpisah, memeriksa status local-network atau loopback-network, dan menjelaskan prompt sebelum membuat satu permintaan yang dibatasi. Kebijakan respons menolak kedua fitur tersebut untuk iframe vendor. Jika iframe penyiapan tepercaya diperlukan, daftar allow-nya hanya berisi origin penyiapan dan setiap origin yang mungkin dinavigasikannya.

Saya akan mempertahankan izin browser, pemeriksaan mixed-content, CORS, dan autentikasi perangkat sebagai gerbang terpisah. Browser yang ditolak atau tidak didukung mendapatkan penyandingan manual alih-alih permintaan berulang. Pengujian mencakup lokal, loopback, publik, reklasifikasi DNS, frame bersarang, delegasi yang hilang, izin yang ditolak, kegagalan CORS, dan kegagalan autentikasi perangkat. Rilis dihentikan jika iklan atau host arbitrer dapat memicu permintaan atau prompt."

Kesalahan umum

  • Memperlakukan setiap IP privat sebagai loopback → loopback dan jaringan lokal memiliki semantik izin yang berbeda → klasifikasikan tujuan sebelum memilih izin.
  • Mencoba lagi setelah penolakan hingga prompt muncul → ini menciptakan kejutan dan perilaku yang mirip pemindaian → tampilkan konteks satu kali dan berikan remediasi.
  • Mengasumsikan CORS membuat printer tepercaya → CORS mengontrol pembagian respons, bukan identitas perangkat → sandingkan perangkat dan autentikasi perintah.
  • Memberikan local-network * ke frame vendor → pengalihan dan dokumen bersarang dapat memperluas set kepercayaan → cantumkan origin yang tepat atau tolak delegasi.
  • Hanya mengandalkan pengujian localhost → ini mungkin tidak menguji batas publik-ke-lokal → uji dari origin HTTPS publik terhadap setiap kelas alamat.

Pertanyaan lanjutan dan tanggapan

Lanjutan 1: Mengapa localhost berhasil dalam tahap pengembangan tetapi gagal dalam produksi?

Pengembangan mungkin berjalan dari origin loopback atau browser tanpa pembatasan baru. Produksi adalah origin publik yang melintasi ruang loopback atau lokal, sehingga secure context, izin, kebijakan, mixed-content, dan gerbang CORS semuanya menjadi relevan. Reproduksi dari origin pengujian HTTPS publik.

Lanjutan 2: Bisakah iframe mewarisi izin tingkat atas secara otomatis?

Hanya dalam aturan kebijakan dan delegasi. Frame cross-origin memerlukan pemberian fitur secara eksplisit, dan frame bersarang memerlukan delegasinya sendiri. Keputusan pengguna terikat pada konteks penyematan, tetapi tidak melewati allow yang tidak ada atau origin navigasi yang tidak terdaftar.

Lanjutan 3: Bagaimana jika DNS untuk agent.example berubah dari publik menjadi privat?

Klasifikasikan ulang alamat yang di-resolve dan wajibkan izin yang sesuai serta jalur secure-context. Jangan menyimpan cache klasifikasi publik selamanya. Catat transisi klasifikasi dan fail closed jika tujuan tidak ada dalam set target produk yang disetujui.

Lanjutan 4: Mengapa prompt izin tidak cukup untuk perintah printer?

Prompt tersebut hanya menyatakan bahwa pengguna mengizinkan akses jaringan dari situs; prompt tidak mengautentikasi perangkat atau mengotorisasi operasi yang diminta. Sandingkan perangkat, ikat perintah ke akun dan nonce, dan buat percobaan ulang menjadi idempoten.

Sumber publik

Pertanyaan terkait