𝗜 𝗠𝗲𝘀𝘀𝗲𝗱 𝗨𝗽 𝗠𝘆 𝗡𝗲𝘅𝘁.𝗷𝘀 𝗔𝘂𝘁𝗵 𝗠𝗮𝘁𝗰𝗵𝗲𝗿 𝗧𝗵𝗿𝗲𝗲 𝗧𝗶𝗺𝗲𝘀

Saya Tersilap Menguruskan Matcher Auth Next.js Saya Sebanyak Tiga Kali

Saya merosakkan tiga projek sebelum saya memahami cara proxy.ts berfungsi dalam Next.js 16.

Ralatnya tidak berbunyi. Tiada log. Tiada amaran. Tiada ralat. Hanya redirect yang rosak dan jurang keselamatan.

Jika anda sedang menaik taraf ke Next.js 16, jangan sekadar menjalankan codemod dan berdiam diri. Anda perlu menyemak tiga perkara ini.

Perangkap Migrasi

Next.js telah menamakan semula middleware.ts kepada proxy.ts. Ini bukan sekadar pertukaran nama.

• middleware.ts berjalan pada Edge runtime. Ia mempunyai sokongan kripto yang terhad.
• proxy.ts berjalan pada Node.js runtime secara lalai. Ia mempunyai sokongan kripto yang penuh.

Jika anda mengemas kini pakej anda secara manual tanpa codemod, fail middleware.ts lama anda mungkin masih wujud. Ia akan dikompil dengan baik. Ia akan melepasi semakan TypeScript. Tetapi ia tidak akan melakukan apa-apa. Laluan (routes) anda tidak akan dipintas. Redirect anda tidak akan berfungsi.

Semak tiga perkara ini secara manual:

• proxy.ts mesti wujud di akar (root) projek anda.
• Fungsi yang dieksport mesti dinamakan proxy.
• middleware.ts mesti dipadamkan.

Jurang Matcher

Matcher adalah tempat di mana tetapan auth paling kerap gagal.

Jika matcher anda terlalu luas, proxy akan berjalan pada setiap fail CSS dan imej. Ini menyebabkan gelung redirect yang tidak berhingga.

Jika matcher anda terlalu sempit, anda mencipta lubang keselamatan.

Jika sesuatu laluan tidak ada dalam matcher anda, proxy tidak akan pernah berjalan. Pengguna boleh menghantar header mereka sendiri ke laluan tersebut. Jika Server Component anda mempercayai header tersebut, penyerang boleh menyamar sebagai sesiapa sahaja.

Penyelesaian: Jangan Percayai Headers

Saya belajar melalui pengalaman pahit: jangan bergantung semata-mata pada header yang dipanjangkan oleh proxy.

Gunakan pendekatan dua lapisan:

• Proxy bertindak sebagai pintu gerbang pantas pada sempadan rangkaian.
• Server Component mengesahkan JWT secara terus daripada cookie semasa masa render.

Semakan kedua ini menutup jurang tersebut. Walaupun matcher terlepas sesuatu laluan, Server Component akan mengesan pengguna yang tidak sah. Ia menambah beberapa milisaat kependaman (latency) tetapi menghalang kegagalan keselamatan yang besar.

Senarai Semak Ringkasan:

• Gunakan proxy.ts untuk auth.
• Gunakan Node.js runtime untuk sokongan kripto penuh.
• Tetapkan header pada request, bukan pada response.
• Sentiasa sahkan JWT di dalam Server Components.

Sumber: https://dev.to/shubhradev/i-got-the-proxyts-matcher-wrong-for-three-projects-before-i-understood-why-4e5c