Tạm biệt nỗi đau mang tên CORS!

Tram Ho

hình ảnh.png

Khi bạn đang viết mã cho một ứng dụng, lỗi này có thể xảy ra thường xuyên hơn bình thường. Mỗi khi nó xảy ra, mọi người đều có phản ứng giống nhau.

Khắc phục một: cài đặt plugin Allow-Control-Allow-Origin

Để khắc phục sự cố của bạn một cách nhanh chóng, bạn có thể cài đặt tiện ích mở rộng moesif CORS . Sau khi nó được cài đặt, hãy nhấp vào biểu tượng trong trình duyệt của bạn để bật nó lên. Nhãn trên biểu tượng sẽ thay đổi từ “tắt” thành “bật”.

Nhấn nút làm mới trên ứng dụng của bạn và các yêu cầu API của bạn sẽ hoạt động ngay bây giờ! Đúng!

Nhưng sửa chữa plugin là lừa dối

Plugin có thể giúp bạn khắc phục sự cố trên máy tính của chính mình, nhưng nó sẽ không hoạt động đối với những người khác sử dụng ứng dụng của bạn. Sẽ không phải là một ý tưởng hay nếu yêu cầu họ cài đặt plugin. Chúng ta cần tìm một giải pháp tốt hơn, vì vậy hãy suy nghĩ về một số câu hỏi.

Tại sao lại có lỗi CORS ngay từ đầu?

Chính sách cùng nguồn gốc ngăn các trang web độc hại truy cập cookie được liên kết với các miền khác.

Chính sách cùng nguồn gốc là một biện pháp bảo mật mà các trình duyệt sử dụng để bảo vệ bạn khỏi các cuộc tấn công mạng. Nó ngăn các trang web độc hại lợi dụng cookie được lưu trữ trong trình duyệt của bạn để truy cập thông tin từ các trang web khác.

hình ảnh.png

Mỗi khi bạn quay lại tab facebook-clone.com , bạn không cần phải đăng nhập lại! Nó giống như ma thuật! Trang web ghi nhớ bạn và bạn chỉ cần tiếp tục nhấp vào ứng dụng.

Ồ ồ! Bạn đã nhấp vào một quảng cáo bật lên phức tạp và bây giờ bạn đang gặp rắc rối! Bạn đã được đưa đến một trang web có tên evil-site.com và trình duyệt của bạn đã tự động cung cấp cho trang web này tất cả các cookie của bạn! Điều đó không tốt!

hình ảnh.png

Kẻ xấu đã lừa trình duyệt của bạn cấp cho chúng quyền truy cập vào tài khoản của bạn trên facebook-clone. Giống như họ đã lừa trình duyệt của bạn để đưa cho họ chìa khóa vào nhà của bạn!

Trình duyệt giống như một con diều hâu, sẵn sàng lao vào và bảo vệ chúng ta khỏi trang web độc ác. Nó sẽ không cho phép trang web ác làm bất cứ điều gì xấu và nó sẽ cho nó một chữ “KHÔNG!” 🕶️

Làm thế nào để chính sách cùng nguồn gốc hoạt động dưới mui xe?

Trình duyệt giống như một thám tử, kiểm tra để đảm bảo rằng ứng dụng web và máy chủ đúng như những gì họ nói. Nó xem xét sự kết hợp của địa chỉ trang web, số cổng ẩn và loại kết nối (như https). Ví dụ: nếu bạn truy cập www.facebook-clone.com , thám tử sẽ xem địa chỉ, số cổng ẩn ( 443 ) và loại kết nối ( https ) để đảm bảo mọi thứ đều theo thứ tự.

Khi bạn muốn lấy thứ gì đó từ một trang web, trình duyệt của bạn sẽ gửi một thông báo đặc biệt đến trang web đó để cho biết bạn đến từ đâu. Nó giống như khi bạn đến một cửa hàng và bạn phải xuất trình giấy tờ tùy thân để chứng minh rằng bạn đủ tuổi để mua một thứ gì đó. Ví dụ: nếu bạn đang cố lấy nội dung nào đó từ một trang web chạy trên localhost:3000 , trình duyệt của bạn sẽ gửi một thông báo đặc biệt giống như sau.

Origin: [http://localhost:3000](http://localhost:3000)

Máy chủ giống như một người phục vụ tại một bữa tiệc. Nó đang kiểm tra xem liệu một số người có thể vào hay không. Nó xem xét yêu cầu đặc biệt rồi gửi lại một tiêu đề phản hồi. Tiêu đề này có một khóa gọi là Access-Control-Allow-Origin cho máy chủ biết những người nào được phép vào. Nó có thể thực sự nghiêm ngặt và chỉ cho phép một người vào, hoặc nó có thể thoải mái hơn và cho phép nhiều người vào.

Access-Control-Allow-Origin: [http://localhost:3000](http://localhost:3000)

Người phục vụ có thể mở rộng cổng và nói “bất kỳ ai cũng có thể vào!” để tất cả các miền có thể nhận được những gì họ cần.

Access-Control-Allow-Origin: *

Sau khi trình duyệt lấy lại thông tin, nó sẽ kiểm tra xem trang web có khớp với trang web mà máy chủ yêu cầu hay không. Nếu không, trình duyệt sẽ phát điên và không cho phép yêu cầu được thực hiện – giống như một nhân viên bảo vệ tại câu lạc bộ!

Plugin đã “sửa” nó chưa?

Tóm lại là không. Plugin access-control-allow-origin giống như một trò ảo thuật khiến trình duyệt nghĩ rằng nó có thể làm điều gì đó mà bình thường không thể. Nó giống như một phù thủy vẫy đũa phép và nói “Abracadabra!” và gặp sự cố, trình duyệt có thể làm điều mà trước đây nó không thể làm được.

Bạn có thể tiếp tục bật plugin này trong khi đang làm việc với dự án của mình. Về cơ bản, máy chủ sẽ cho trình duyệt biết nó có thể giao tiếp với trang web nào. Vì vậy, nếu bạn muốn trình duyệt nói chuyện với dự án cục bộ của mình, thì bạn nên sử dụng plugin này!

Nếu bạn đang sử dụng nội dung của người khác, plugin sẽ không giúp được gì. Bạn không muốn người dùng của mình phải cài đặt plugin chỉ để sử dụng nội dung của bạn. Đó sẽ là ngớ ngẩn!

Khắc phục hai: gửi yêu cầu của bạn tới một proxy

Bạn không cố đánh lừa trình duyệt của mình bằng cách cài đặt plugin – điều đó thật nghịch ngợm! Nhưng bạn có thể kiểm soát địa chỉ mà các yêu cầu API của ứng dụng web của bạn chuyển đến – điều đó thú vị hơn nhiều!

Nó giống như có một người trung gian giữa bạn và máy chủ. Máy chủ proxy cors-anywhere giống như một nhân viên bảo vệ tại một câu lạc bộ, nó thêm một tiêu đề đặc biệt vào yêu cầu để máy chủ cho phép bạn vào và cung cấp cho bạn dữ liệu bạn muốn. Nó giống như một mật khẩu bí mật mở cánh cửa vào dữ liệu của máy chủ!

Nó hoạt động như thế này. Giả sử giao diện người dùng của bạn đang cố thực hiện yêu cầu GET tới:

https://joke-api-strict-cors.appspot.com/jokes/random

Nhưng api này không có giá trị Access-Control-Allow-Origin cho phép miền ứng dụng web truy cập nó. Vì vậy, thay vào đó, hãy gửi yêu cầu NHẬN của bạn tới:

https://cors-anywhere.herokuapp.com/https://joke-api-strict-cors.appspot.com/jokes/random

Máy chủ proxy nhận https://joke-api-strict-cors.appspot.com/jokes/random từ url ở trên. Sau đó, nó yêu cầu nhận phản hồi của máy chủ đó. Và cuối cùng, proxy áp dụng Access-Control-Allow-Origin: * cho phản hồi ban đầu đó.

Giải pháp này thật tuyệt vời! Nó giống như bạn đang sử dụng một lỗ hổng bí mật để vượt qua các quy tắc. Nó giống như bạn đang nói với trình duyệt, “Này, tôi đang nói chuyện với một máy chủ khác, vì vậy bạn không phải lo lắng về chính sách xuất xứ tương tự!”

Tin xấu là việc sử dụng proxy này có thể khiến các ứng dụng của bạn có cảm giác như chúng đang chuyển động chậm! Phải mất một lúc để proxy đưa ra câu trả lời cho bạn.

Điều này đưa chúng ta đến một cách tiếp cận cuối cùng, thậm chí còn tốt hơn.

Khắc phục ba: xây dựng proxy của riêng bạn

Nếu bạn gặp khó khăn khi sử dụng cùng một chính sách gốc, tại sao không xây dựng proxy của riêng bạn? Bằng cách đó, bạn không phải lo lắng về việc chia sẻ với người khác và bạn có thể đảm bảo rằng mình có đủ tài nguyên để hoàn thành công việc. Ngoài ra, bạn không phải lo lắng về bất kỳ sự chậm trễ nào!

Hãy tạo một máy chủ đặc biệt sẽ mang đến cho chúng ta một trò đùa vui nhộn! Tất cả những gì chúng ta cần làm là viết một vài dòng mã bằng thứ gọi là Node.jsExpress . Sau đó, chúng ta có thể nhận được một trò đùa ngẫu nhiên từ một trang web có tên (https://joke-api-strict-cors.appspot.com/random_joke . Hãy viết mã!

Đây giống như một trò chơi điện thoại! Người đại diện giống như người đầu tiên trong trò chơi. Nó nói chuyện với một máy chủ khác và yêu cầu một trò đùa ngẫu nhiên. Sau đó, nó chuyển trò đùa trở lại người yêu cầu ban đầu, giống như người cuối cùng trong trò chơi. Phần mềm trung gian giống như một quy tắc đặc biệt cho phép proxy giao tiếp với máy chủ khác, mặc dù chúng ở trên các miền khác nhau.

Phần kết luận

Lỗi CORS có thể là một nỗi đau thực sự đối với các nhà phát triển giao diện người dùng. Nhưng một khi bạn hiểu tại sao nó ở đó – để bảo vệ chúng ta khỏi những kẻ xấu đang cố làm điều xấu – thì nó không tệ lắm.

Cuối cùng, với những thay đổi này, bạn sẽ không phải lo lắng về việc nhìn thấy lỗi CORS màu đỏ đó trong nhật ký bảng điều khiển trình duyệt của mình nữa. Bạn sẽ có thể rút plugin hoặc proxy ra và hét “Yippee!”

Và cuối cùng

Như mọi khi, tôi hy vọng bạn thích bài viết này và học được điều gì đó mới. Xin cảm ơn và hẹn gặp lại các bạn trong những bài viết tiếp theo!

Nếu các bạn thích bài viết này thì hãy cho mình 1 like và subscribe để ủng hộ mình nhé. Cảm ơn.

Nguồn

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo