Tôi đã làm hỏng Matcher Auth trong Next.js tới ba lần

Tôi đã làm hỏng ba dự án trước khi hiểu được cách proxy.ts hoạt động trong Next.js 16.

Lỗi xảy ra một cách âm thầm. Không có log. Không có cảnh báo. Không có lỗi. Chỉ có các lệnh redirect bị hỏng và các lỗ hổng bảo mật.

Nếu bạn đang nâng cấp lên Next.js 16, đừng chỉ chạy codemod rồi bỏ mặc. Bạn cần phải kiểm tra ba điều sau đây.

Cạm bẫy khi di chuyển (The Migration Trap)

Next.js đã đổi tên middleware.ts thành proxy.ts. Đây không chỉ đơn thuần là thay đổi tên gọi.

Nếu bạn cập nhật package thủ công mà không dùng codemod, file middleware.ts cũ của bạn có thể vẫn còn tồn tại. Nó sẽ biên dịch bình thường. Nó sẽ vượt qua các kiểm tra TypeScript. Nhưng nó sẽ không làm gì cả. Các route của bạn sẽ không bị chặn lại. Các lệnh redirect của bạn sẽ không hoạt động.

Kiểm tra thủ công ba điều sau:

Lỗ hổng Matcher (The Matcher Gap)

Matcher là nơi các thiết lập auth thường xuyên thất bại nhất.

Nếu matcher của bạn quá rộng, proxy sẽ chạy trên mọi file CSS và hình ảnh. Điều này gây ra các vòng lặp redirect vô tận.

Nếu matcher của bạn quá hẹp, bạn sẽ tạo ra một lỗ hổng bảo mật.

Nếu một route không nằm trong matcher, proxy sẽ không bao giờ chạy. Người dùng có thể gửi các header riêng của họ đến route đó. Nếu Server Component của bạn tin tưởng các header đó, kẻ tấn công có thể giả mạo bất kỳ ai.

Giải pháp: Đừng tin tưởng vào Headers

Tôi đã học được một bài học xương máu: đừng chỉ dựa dẫm vào các header được chuyển tiếp bởi proxy.

Sử dụng phương pháp tiếp cận hai lớp:

Bước kiểm tra thứ hai này sẽ lấp đầy lỗ hổng. Ngay cả khi matcher bỏ sót một route, Server Component sẽ phát hiện ra người dùng không hợp lệ. Nó có thể làm tăng thêm vài mili giây độ trễ nhưng sẽ ngăn chặn một lỗi bảo mật nghiêm trọng.

Danh sách kiểm tra tóm tắt:

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