Topik temu duga representatif

Temu Bual Frontend: Bagaimana anda memadankan dan mengekstrak laluan dengan selamat menggunakan URLPattern?

FrontendSukar
Pasukan Editorial Offer.ccDiterbitkan Dikemas kini

Soalan

Service Worker mesti memintas hanya laluan imej dan dokumen same-origin serta mengekstrak ID tenant dan resource. Reka bentuk pemadan URLPattern yang merangkumi sempadan komponen, kumpulan, peraturan huruf besar/kecil, dan fallback untuk pelayar yang tidak disokong.

Prompt dan Konteks Berkenaan

Service Worker mesti memintas hanya laluan imej dan dokumen same-origin serta mengekstrak ID tenant dan resource. Reka bentuk pemadan URLPattern yang merangkumi sempadan komponen, kumpulan, peraturan huruf besar/kecil, dan fallback untuk pelayar yang tidak disokong.

URLPattern ialah pemadan corak URL yang dipiawaikan untuk komponen protokol, hos, port, pathname, search, dan hash, dengan kumpulan tangkapan (capture groups) yang dinamakan atau bernombor. Ia berguna untuk penghalaan (routing), penimbalan (caching) Service Worker, dan peraturan edge, tetapi padanan bukanlah pengesahan (authorization) dan tidak menggantikan normalisasi atau pemeriksaan akses.

Perkara yang Dinilai oleh Penemu Bual

Merangkumi pemadanan komponen dan bukannya pemadanan keseluruhan rentetan, sintaks wildcard dan kumpulan, baseURL untuk corak relatif, tingkah laku huruf besar/kecil bagi setiap komponen, sempadan kepercayaan tangkapan, kegagalan kompilasi, dan keserasian rentas pelayar.

Soalan Penjelasan

Sahkan protokol, hos, dan port yang dibenarkan; sama ada laluan peka huruf besar/kecil (case-sensitive); sama ada parameter carian terlibat; dan sama ada ID tenant dan resource mestilah lengkap. Sahkan juga konteks halaman, Service Worker, atau Worker, sokongan pelayar, dan sama ada padanan mempengaruhi keputusan penimbalan atau keselamatan.

Kerangka Jawapan 30 Saat

“Saya akan menetapkan komponen protokol, hos, dan port, menggunakan named groups hanya dalam laluan, dan menetapkan baseURL yang jelas untuk corak relatif. Pembinaan semasa masa kompilasi menangkap ralat sintaks; semasa masa jalanan saya akan memadankan URL lengkap, menguatkuasakan same-origin, kemudian menggunakan tangkapan untuk penghalaan atau kunci cache. URLPattern menyediakan pemadanan, bukan pengesahan. Pelayar yang tidak disokong mendapat fallback komponen URL terhad yang diliputi oleh ujian yang sama, bukan regex luas yang melaksanakan semula semantik URL.”

Penyelaman Mendalam Langkah demi Langkah

Langkah 1: Bina corak yang peka komponen (component-aware)

URLPattern menerima objek dengan protocol, hostname, port, pathname, search, dan hash, atau rentetan gaya URL. Laluan yang sensitif terhadap keselamatan harus menetapkan protokol dan hos dan bukannya menerima sebarang origin yang kebetulan berkongsi laluan.

Langkah 2: Gunakan named capture groups

Kumpulan laluan yang dinamakan boleh dibaca daripada hasil exec() dan dipetakan ke medan tenant dan resource. Tangkapan hanya membuktikan bahawa rentetan mempunyai bentuk yang diharapkan; sahkan set aksara, panjang, dan kewujudan perniagaannya secara berasingan.

javascript
const assetPattern = new URLPattern({
  protocol: "https",
  hostname: "cdn.example.com",
  pathname: "/tenant/:tenantId/assets/:assetId.:ext",
});

const match = assetPattern.exec(request.url);
const assetId = match?.pathname.groups.assetId;

Langkah 3: Tentukan sempadan wildcard dan pemisah

Wildcard memadankan aksara dalam komponennya; jangan menganggap ia melintasi pemisah laluan atau meliputi parameter carian secara automatik. Tulis setiap tahap hierarki secara eksplisit dan uji nilai kosong, garis condong tambahan, dan aksara yang dikodkan.

Langkah 4: Fahami baseURL dan corak relatif

Corak relatif memerlukan baseURL untuk menyelesaikan protokol, hos, dan komponen lain. Oleh itu, persekitaran yang berbeza boleh menghasilkan pemadan yang berbeza. Tetapkan asas semasa pembinaan dan uji domain pembangunan, pratonton, dan pengeluaran.

Langkah 5: Kendalikan peraturan huruf besar/kecil dan normalisasi

Komponen URL mempunyai peraturan huruf besar/kecil yang berbeza. Nama hos secara amnya tidak peka huruf besar/kecil, manakala laluan dan komponen lain mungkin peka huruf besar/kecil. Jangan tukar keseluruhan URL kepada huruf kecil sebelum pemadanan kerana itu boleh mengubah laluan sumber atau input tandatangan.

Langkah 6: Asingkan pemadanan daripada pengesahan (authorization)

URLPattern tidak membuktikan bahawa tenant adalah milik pengguna atau bahawa sumber boleh dibaca. Selepas pemadanan, kuat kuasakan pemeriksaan origin, pengesahan identiti (authentication), pengesahan kebenaran (authorization), pengasingan cache, dan jenis respons. ID tenant yang ditangkap kekal sebagai input yang tidak dipercayai.

Langkah 7: Ralat kompilasi dan kos masa jalanan

Corak dihuraikan semasa pembinaan, jadi sintaks yang tidak sah harus gagal semasa permulaan atau pendaftaran dan bukannya pada permintaan pertama. Guna semula tika (instances) yang telah dikompilasi daripada membina satu bagi setiap permintaan, dan ukur kos pemadanan terhadap taburan URL sebenar pada laluan hangat (hot paths).

Langkah 8: Reka bentuk fallback keserasian

Persekitaran yang tidak disokong boleh menggunakan new URL() dan hanya memeriksa komponen yang diperlukan oleh perniagaan. Jangan gunakan regex luas untuk menghasilkan semula penghuraian protokol, hos, pengekodan, dan carian. Fallback mesti berkongsi vektor ujian pemadan natif.

Contoh Jawapan Berkualiti Tinggi

Saya akan membina URLPattern dengan https yang tetap, hos CDN yang tetap, dan komponen laluan yang eksplisit, menggunakan named groups untuk ID tenant dan resource. Service Worker akan memadankan URL yang lengkap, kemudian menguatkuasakan same-origin, pengesahan identiti, dan pembahagian cache; tangkapan kekal sebagai rentetan yang tidak dipercayai dan masih memerlukan pemeriksaan panjang, set aksara, serta pengesahan kebenaran. Bina corak sekali dan gagal dengan pantas (fail fast) pada ralat sintaks. Tetapkan baseURL kepada domain pelaksanaan dan uji perbezaan huruf besar/kecil, garis condong yang dikodkan, parameter carian tambahan, dan setiap persekitaran. Pelayar lama menggunakan fallback komponen URL yang terhad, jangan sekali-kali menggunakan regex luas yang mendakwa menghasilkan semula semantik URL penuh.

Kesilapan Biasa

Memadankan pathname sahaja dan menganggap same-origin

Sebarang protokol atau hos boleh melepasi laluan yang sama. Pemadan yang sensitif terhadap keselamatan mesti menetapkan komponen origin dan menyemak semula origin permintaan pada masa jalanan.

Memperlakukan tangkapan sebagai ID yang disahkan

Tangkapan hanya membuktikan bentuk. Sahkan set aksara, panjang, pemilikan tenant, kewujudan sumber, dan pengesahan kebenaran.

Menukar kepada huruf kecil atau menormalkan setiap URL dengan regex

Semantik huruf besar/kecil dan pengekodan komponen berbeza-beza. Menukar keseluruhan rentetan kepada huruf kecil boleh merosakkan laluan dan tandatangan, manakala regex yang luas boleh melintasi pemisah atau terlepas peraturan carian.

Soalan Susulan dan Maklum Balas

Bagaimanakah anda menghalang baseURL pembangunan daripada sampai ke persekitaran pengeluaran?

Suntik baseURL sebagai konfigurasi pelaksanaan, sahkan protokol dan hos yang dibenarkan semasa permulaan, dan tetapkan domain pengeluaran dalam ujian binaan serta hujung-ke-hujung (end-to-end). Jangan sekali-kali menerbitkan asas pemadan keselamatan daripada URL yang dikawal oleh pengguna.

Bagaimanakah anda menyokong sambungan fail pilihan (optional)?

Gunakan kumpulan pilihan (optional group) sintaks corak dan uji sambungan, tanpa sambungan, titik tambahan, dan aksara yang dikodkan secara berasingan. Apabila tangkapan tiada, pilih jenis kandungan dan dasar cache yang eksplisit.

Bagaimanakah URLPattern boleh wujud bersama perpustakaan penghalaan (routing library)?

Biarkan URLPattern melakukan penapisan pantas di edge atau Service Worker, dan biarkan penghala aplikasi melakukan navigasi penuh serta pengesahan parameter. Kongsi ujian kontrak URL supaya kedua-dua lapisan mentafsir laluan secara identik.

Sumber awam

Soalan berkaitan