Bảo vệ CSRF

Bạn đang xem tài liệu Inertia.js v2. Inertia.js v3 đã được phát hành và hiện là phiên bản mặc định. Hãy xem hướng dẫn nâng cấp để bắt đầu.

Thực hiện request

Laravel tự động thêm CSRF token phù hợp khi thực hiện request qua Inertia hoặc Axios. Tuy nhiên, nếu dùng Laravel, hãy nhớ bỏ thẻ meta csrf-token khỏi dự án vì thẻ này sẽ ngăn CSRF token được làm mới đúng cách. Nếu framework phía máy chủ có bảo vệ cross-site request forgery (CSRF), bạn cần đảm bảo mỗi request Inertia đều chứa CSRF token cần thiết cho POST, PUT, PATCH và DELETE. Tất nhiên, như đã đề cập, một số framework phía máy chủ như Laravel tự động xử lý việc đưa CSRF token vào request. Vì vậy, khi dùng các framework này, bạn không cần cấu hình bổ sung. Tuy nhiên, nếu cần tự xử lý bảo vệ CSRF, một cách là gửi CSRF token dưới dạng prop trong mọi response. Sau đó bạn có thể sử dụng token này khi thực hiện request Inertia.

import { router, usePage } from '@inertiajs/vue3'

const page = usePage()

router.post('/users', {
    _token: page.props.csrf_token,
    name: 'John Doe',
    email: 'john.doe@example.com',
})

import { router, usePage } from '@inertiajs/react'

const props = usePage().props

router.post('/users', {
    _token: props.csrf_token,
    name: 'John Doe',
    email: 'john.doe@example.com',
})

import { page, router } from '@inertiajs/svelte'

router.post('/users', {
    _token: $page.props.csrf_token,
    name: 'John Doe',
    email: 'john.doe@example.com',
})

Bạn có thể dùng chức năng dữ liệu dùng chung của Inertia để tự động gửi csrf_token trong mỗi response. Tuy nhiên, cách tốt hơn là tận dụng chức năng CSRF có sẵn trong axios. Axios là thư viện HTTP mà Inertia sử dụng bên dưới. Axios tự động kiểm tra cookie XSRF-TOKEN có tồn tại hay không. Nếu có, nó sẽ gửi token trong header X-XSRF-TOKEN cho mọi request được tạo. Cách dễ nhất để triển khai là dùng middleware phía máy chủ. Chỉ cần gửi cookie XSRF-TOKEN trong mỗi response, sau đó xác minh token bằng header X-XSRF-TOKEN được Axios gửi trong request.

Xử lý token không khớp

Khi CSRF token không khớp, framework phía máy chủ thường ném exception dẫn đến response lỗi. Ví dụ, khi dùng Laravel, TokenMismatchException được ném và dẫn đến trang lỗi 419. Vì đây không phải response Inertia hợp lệ nên lỗi sẽ được hiển thị trong modal.

Rõ ràng đây không phải trải nghiệm tốt cho người dùng. Cách xử lý tốt hơn là redirect về trang trước kèm flash message cho biết trang đã hết hạn. Kết quả sẽ là một response Inertia hợp lệ, trong đó flash message có sẵn dưới dạng prop để bạn hiển thị cho người dùng. Tất nhiên, bạn cần chia sẻ flash message với Inertia để cách này hoạt động. Khi dùng Laravel, bạn có thể chỉnh exception handler của ứng dụng để tự động redirect người dùng về trang trước và flash message vào session. Bạn có thể thực hiện việc này bằng phương thức exception respond trong file bootstrap/app.php.

use Symfony\Component\HttpFoundation\Response;

->withExceptions(function (Exceptions $exceptions) {
    $exceptions->respond(function (Response $response) {
        if ($response->getStatusCode() === 419) {
            return back()->with([
                'message' => 'The page expired, please try again.',
            ]);
        }

        return $response;
    });
});

Kết quả cuối cùng mang lại trải nghiệm tốt hơn nhiều. Thay vì nhìn thấy modal lỗi, người dùng sẽ nhận thông báo rằng trang đã “hết hạn” và được yêu cầu thử lại.

Tài liệu chính thức

Bài dịch này được đối chiếu từ tài liệu Inertia.js v2 chính thức. Nếu có khác biệt do phiên bản hoặc cập nhật mới, hãy ưu tiên tài liệu chính thức làm nguồn tham chiếu.

Bắt đầu

Cài đặt

Khái niệm cốt lõi

Kiến thức cơ bản

Dữ liệu & Props

Bảo mật

Nâng cao

Thực hiện request

Xử lý token không khớp

Tài liệu chính thức

​Thực hiện request

​Xử lý token không khớp

​Tài liệu chính thức

Thực hiện request

Xử lý token không khớp

Tài liệu chính thức