Mẹo nhỏ: Để tìm kiếm chính xác các bài viết của Mapleshoes.vn, hãy search trên Google với cú pháp: "Từ khóa" + "Mapleshoes". (Ví dụ: cách chơi fifa online mapleshoes). Tìm kiếm ngay
16 lượt xem

Cors là gì? 15 bức ảnh chuyển động tinh tế giúp bạn hiểu rõ về cors

Cors là gì? Vai trò của Cors? Nó là một nhu cầu rất thông dụng với các developer web đó là truy truy vấn qua API. Tuy nhiên, việc truy vấn và xử lý dữ liệu từ API nhiều khi cũng rất khó khăn.

Rất nhiều lập trình viên phải đối mặt với các vấn đề liên quan đến CORS. Vậy CORS là gì? Và lý do tại sao chúng ta cần CORS?

CORS là gì?

CORS là một cơ chế cho phép nhiều tài nguyên khác nhau (fonts, Javascript, v.v…) của một trang web có thể được truy vấn từ domain khác với domain của trang đó. CORS là viết tắt của từ Cross-origin resource sharing.

no ‘access-control-allow-origin’ header is present on the requested resource

Đây chính là lỗi CORS policy mà bất cứ lập trình viên nào cũng sẽ gặp phải. Khi call API tới server mà không có header Access-Control-Allow-Origin hoặc giá trị của nó không hợp lệ thì sẽ phát sinh lỗi này và không lấy được dữ liệu từ API. Cách khắc phục lỗi trên là phải config enable CORS lên để phía client có thể gọi được dữ liệu. Các bạn có thể tham khảo cách để enable với các ngôn ngữ tại đây Enable CORS on Server

Tại sao chúng ta cần CORS

CORS được sinh ra là vì same-origin policy, là một chính sách liên quan đến bảo mật được cài đặt vào toàn bộ các trình duyệt hiện nay. Chính sách này ngăn chặn việc truy cập tài nguyên của các domain khác một cách vô tội vạ.

Xem thêm: https://vonggosua.com.vn/cach-combo-ryze-mua-5/

Ta có ví dụ một kịch bản như sau:

  • Bạn truy cập một trang web có mã độc. Trang web đó sử dụng Javascript để truy cập tin nhắn Facebook của bạn ở địa chỉ https://facebook.com/messages.
  • Nếu bạn đã đăng nhập Facebook từ trước rồi. Nếu không có same-origin policy, trang web độc hại kia có thể thoải mái lấy dữ liệu của bạn và bất cứ điều gì chúng muốn.
Xem Thêm:  Trundle mùa 11

Same-origin policy chính là để ngăn chặn những kịch bản như trên để bảo vệ người dùng, giúp an toàn hơn khi lướt web. Bạn có thể thử trên web console và sẽ nhận được lỗi ngay:

$.get('https://facebook.com/messages')
Access to XMLHttpRequest at 'https://facebook.com/messages' from
origin 'xxx' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource.

Truy cập URL trên từ bất kỳ domain nào ngoài facebook.com bạn cũng sẽ nhận được lỗi như vậy. Đó chính là nhờ same-origin policy.

Thế nhưng trong thế giới web, lập trình viên thường xuyên phải thực hiện truy vấn đến các domain khác, đặc biệt là khi làm việc với các API.

Đó là lúc chúng ta cần đến CORSCORS sử dụng các HTTP header để “thông báo” cho trình duyệt rằng, một ứng dụng web chạy ở origin này (thường là domain này) có thể truy cập được các tài nguyên ở origin khác (domain khác).

Một ứng dụng web sẽ thực hiện truy vấn HTTP cross-origin nếu nó yêu cầu đến các tài nguyên ở origin khác với origin nó đang chạy (khác giao thức, domain, port). Sự khác biệt về giao thức ở đây là khác biệt kiểu như HTTP với FTP chứ không phải HTTP và HTTPS (dù nhiều trình duyệt không cho phép trộn lẫn các tài nguyên truy cập bằng HTTP và HTTPS nhưng đó là vấn đề khác, không liên quan đến CORS).

Vậy, tại sao lại có same-origin policy tồn tại? Giả sử rằng chính sách cùng nguồn gốc không tồn tại và bạn đã vô tình nhấp vào một trong nhiều liên kết có virutss mà bạn của bạn gửi cho bạn trên Facebook. Liên kết này chuyển hướng bạn đến một “trang web xấu” có nhúng iframe tải trang web của ngân hàng của bạn và đăng nhập thành công cho bạn bằng một số cookie đã đặt! 😬 Sau khi đăng nhập thành công, trang web lừa đảo này còn có thể kiểm soát DOM của iframe và chuyển tiền trong thẻ của bạn thông qua một loạt thao tác thần sầu mà bạn không hề biết được.

Xem Thêm:  Kiến thức unit 10 lớp 8

Đây là một vi phạm bảo mật rất nghiêm trọng. Chúng tôi không muốn nội dung của mình trên Internet bị truy cập một cách tùy tiện, chứ đừng nói đến các trang web liên quan đến tiền. Chính vì vậy chính sách nguồn gốc giống nhau có thể giúp chúng tôi giải quyết vấn đề bảo mật này. Chính sách này đảm bảo rằng chúng tôi chỉ có thể truy cập các tài nguyên trên cùng một trang web.

Trong trường hợp này, https://anonystick.com hãy thử truy cập https://www.bank.com tài nguyên trên nhiều trang web , chính sách nguồn gốc giống nhau sẽ ngăn chặn hoạt động này, do đó các trang web lừa đảo không thể truy cập trang web của ngân hàng dữ liệu. Nói như vậy, mối quan hệ giữa chính sách cùng xuất xứ và CORS là gì?

🔥 Client-side CORS

Vì lý do bảo mật, các browser hạn chế các yêu cầu HTTP giữa nhiều domain được khởi tạo từ bên trong các tập lệnh . Ví dụ: XHR và fetch bắt buộc phải tuân theo chính sách nguồn gốc giống nhau. Điều này có nghĩa là ứng dụng web sử dụng API chỉ có thể yêu cầu tài nguyên HTTP từ cùng một miền nơi ứng dụng được tải.

Trong quá trình phát triển kinh doanh hàng ngày, chúng tôi thường truy cập tài nguyên ở một domian khác hay còn gọi là tên miền chéo. Để yêu cầu tài nguyên miền chéo một cách an toàn, browser sử dụng cơ chế gọi là CORS. Tên đầy đủ của CORS là Cross-Origin Resource Sharing , có nghĩa là chia sẻ tài nguyên giữa nhiều miền . Mặc dù browser cấm chúng tôi truy cập tài nguyên domain chéo theo mặc định, nhưng chúng tôi có thể sử dụng CORS để nới lỏng hạn chế này và truy cập tài nguyên domain chéo theo tiền đề đảm bảo an ninh.

Browser có thể sử dụng cơ chế CORS để cho phép tuân thủ quyền truy cập domain chéo và ngăn chặn truy cập domain chéo không tuân thủ. Những gì được thực hiện bên trong browser? Hãy phân tích nó dưới đây. Sau khi các vấn đề chương trình Web một yêu cầu cross-domain, browser sẽ tự động thêm một lĩnh vực tiêu đề phụ để yêu cầu tiêu đề của chúng tôi HTTP: OriginOrigin của trang web được yêu cầu được đánh dấu:

GET https://api.website.com/users HTTP/1/1
Origin: https://www.mywebsite.com

Để cho phép browser truy cập tài nguyên miền chéo, phản hồi do server trả về cũng cần thêm một số trường tiêu đề phản hồi, trường này sẽ cho biết rõ ràng server có cho phép yêu cầu miền chéo hay không.

Xem Thêm:  08710 là mã vùng ở đâu

💻 Server-side CORS

Với tư cách là một dev làm ở phía back-end, chúng tôi có thể thêm một trường tiêu đề phản hồi bổ sung trong phản hồi HTTP Access-Control-* để cho biết có cho phép các yêu cầu domain chéo hay không. Dựa trên các trường tiêu đề phản hồi CORS này, browser có thể cho phép một số câu trả lời có nguồn gốc chéo bị hạn chế bởi chính sách cùng nguồn gốc.

Mặc dù có một số trường tiêu đề phản hồi CORS , nhưng có một trường phải được thêm vào, đó là Access-Control-Allow-Origin. Giá trị của trường tiêu đề này chỉ định các trang web nào được phép truy cập tài nguyên trên các miền.

1️⃣ Nếu chúng tôi phải phát triển quyền truy cập vào server, chúng tôi có thể cấp https://www.mywebsite.com thêm quyền truy cập vào: thêm miền vào Access-Control-Allow-Origin. Xem code phía dưới

Trường tiêu đề phản hồi này hiện được thêm vào tiêu đề phản hồi mà server gửi lại cho máy khách. Sau khi thêm trường này, Nếu chúng tôi https://www.mywebsite.com gửi yêu cầu domain chéo, chính sách nguồn gốc tương tự sẽ không còn giới hạn https://api.mywebsite.com trang web trả lại tài nguyên.

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://www.mywebsite.com
Date: Fri, 11 Oct 2019 15:47 GM
Content-Length: 29
Content-Type: application/json
Server: Apache

{user: [{...}]}

2️⃣ Sau nhận được phản hồi từ server, browser sẽ kiểm tra cơ chế CORS Access-Control-Allow-Origin Yêu cầu có giá trị bằng nhau hay không có Origin. Trong ví dụ này, yêu cầu Origin là https://www.mywebsite.com phản hồi này và Access-Control-Allow-Origin giá trị giống nhau:

Chuyên mục: chia sẻ

Thông báo chính thức: Vonggosua.com.vn thuộc Mapleshoes.vn (Mapleshoes) là trang duy nhất chia sẻ bài viết hay Facebook.

Xin cám ơn!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *