Cấu Hình CORS Domain

CORS! Phải hiểu cho đúng!

Nhìn lại thời gian mà anh em ngồi cấu hình CORS trên Spring mà thấy mất thời gian ghê gớm, có khi một hai ngày chưa xong, căn bản là lúc đó chưa hiểu cơ chế hoạt động của CORS thành ra cứ cấu hình bừa bãi đến khi nào được thì thôi!

Giới thiệu

Vậy CORS là gì nhỉ? CORS là viết tắt của Cross-origin resource sharing, google dịch là: Chia sẻ tài nguyên nhiều nguồn gốc, hơi khó hiểu nhỉ, 🙂. Đại loại nó là một cách thức để chúng ta giới hạn việc chia sẻ tài nguyên cho những nguồn mà chúng ta muốn, để chống tấn công giả mạo trang web.

Tấn công giả mạo trang web

Kiểu tấn công này có thể hiểu đơn giản là một người nào đó có tên miền là faKebook.com, do Facebook không có bảo mật gì cả (giả định vậy) nên kẻ tấn công có thể gọi tất cả API của Facebook để lấy tài nguyên để tạo ra giao diện giống hệt như facebook.com (ví dụ trang đăng ký), và thế là người dùng sẽ bị lừa và đăng ký vào trang đó thay vì facebook.com, hậu quả là tất cả thông tin về username, password hay token sẽ bị rơi vào tay hacker.

Ngày nay chúng ta đã có nhiều kiến thức hơn và đã ý thức hơn trong việc để ý thông tin của một website trước khi đăng nhập nên chúng ta ít bị tấn công giả mạo, nhưng thời xa xưa cách đây độ 5 năm thôi là tình trạng này diễn ra phổ biến, rất nhiều người đã bị lừa và mất hết thông tin cá nhân.

Khắc phục vấn đề

Để khắc phục lỗ hổng này này thi CORS đã ra đời, nó là một cơ chế để giúp cho trình duyệt có thể từ chối phục vụ những tên miền giả mạo. Luồng nghiệp vụ sẽ như thế này:

User truy cập trang web có tên miền
Trình duyệt (Browser) sẽ tự động thêm header: Origin = abc.com và gửi yêu cầu lấy tài nguyên lên server ví dụ file style.css
Server sẽ kiểm tra trường Origin, nếu server cho phép nó sẽ bổ sung thêm một trường Access-Control-Allow-Origin= <gì đó do chúng ta cài đặt, ví dụ abc.com> vào header để response
Trình duyệt nhận được response nó sẽ lấy giá trị từ header: Access-Control-Allow-Origin và so sánh với Origin là abc.com nếu trùng khớp

CORS! Hãy cấu hình đơn giản!

Ngày xưa mình, và mình đoán nhiều anh em ở đây cũng hiểu nhầm dẫn đến việc cấu hình sai. Lúc trước mình hiểu nhầm là server (spring) sẽ validate cái giá trị của header Access-Control-Allow-Origin nên cứ loay hoay mãi cấu hình ở nginx rồi code logic các kiểu ở Spring Filter mà cuối cùng vẫn bị lỗi đỏ lòm ở consonle ở client kiểu

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://some-url-here. (Reason: additional information here).

Ức chế kinh khủng.

Bình tĩnh tư duy

Sau một hai ngày bình tĩnh lại mới tự vẽ lại cái luồng của CORS mới nhận ra mình đã làm sai, nên mới bỏ hết code logic ở SpringFilter đi, nhưng lại quên vẫn chưa bỏ cái đoạn

public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurer() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/api/**").allowedOrigins("*");
        }
    };
}

Thế là lại gặp cái lỗi

The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed. Origin 'http://localhost:8000' is therefore not allowed access. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Ức chế lần 2 tí nữa thì cào cái bàn phím, nhưng may mình lại tiếp tục bình tĩnh suy nghĩ lần nữa và nhận ra mình không cần làm gì ở SpringFilter (mình đã xoá đi) mà chỉ cần cấu hình nginx thế này thôi là xong:

add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

Mọi chuyện thật đơn giản!

Việc cấu hình CORS là việc làm đơn giản nhưng rất quan trọng, nó giúp những khác hàng thân yêu của chúng ta tránh bị tấn công bằng CSRF và giúp họ bảo vệ được rất nhiều triệu đô, và quan trọng hơn là giữ được tình yêu của họ với sản phẩm của chúng ta. Mình biết nhiều anh em ở đây, trong đó có cả mình đã từng hoặc vẫn đang để cấu hình

add_header 'Access-Control-Allow-Origin' '*';

Cho tiện, nhưng đừng làm vậy nhé, làm vậy thì chẳng khác gì không cấu hình cả, hãy điền các domain cụ thể nhé, ví dụ:

add_header 'Access-Control-Allow-Origin' 'youngmonkeys.org';

Tổng kết

CORS không phải là chìa khoá vạn năng, nó chỉ có tác dụng đối với môi trường web thôi mọi người nhé, những kẻ tấn công vẫn có thể gọi thông qua các môi trường ngoài web bằng cách giả mạo trường Origin, nên hãy bảo vệ hệ thống của mình bằng nhiều cách khác nhau nữa nhé