Giới thiệu CORS cho người mới bắt đầu

Tự hỏi CORS là gì (Chia sẻ tài nguyên nguồn gốc)?


Trong các bộ phim gián điệp, các nhân viên an ninh có cách truyền thông tin mã hóa giữa họ với nhau. Vì chúng chủ yếu truyền thông tin có thể được sử dụng để chống lại chúng nếu nó rơi vào tay kẻ thù của chúng, chúng phải đảm bảo rằng những người đang nhận thông tin là các bên đáng tin cậy. Điều tương tự áp dụng cho những người đang gửi thông tin nói. Khi người gửi và người nhận được tin cậy, độ tin cậy và bảo mật của thông tin có thể được đảm bảo.

https://pt.sl slideshoware.net/atirekgupta/selenium-workshop-34820044

Một bản sao của kịch bản này xảy ra trong giao tiếp giữa các trình duyệt và máy chủ web và nó được gọi là chính sách cùng nguồn gốc.

Theo MDN:

Các chính sách cùng nguồn gốc là một cơ chế bảo mật quan trọng giới hạn cách tài liệu hoặc tập lệnh được tải từ một nguồn gốc có thể tương tác với một tài nguyên từ nguồn gốc khác. Nó giúp cách ly các tài liệu độc hại tiềm tàng, giảm các vectơ tấn công có thể.

CORS là gì?

Trong trường hợp thực tế, khi các nhà điều hành bảo mật đưa ra một quy tắc rằng giao tiếp chỉ nên xảy ra giữa các hoạt động của nó như một phương tiện bảo mật, điều đó tương tự như chính sách cùng nguồn gốc. Tuy nhiên, có thể có trường hợp họ sẽ cần phải tương tác với thế giới bên ngoài. Hoặc với các hợp tác xã của các trang phục bảo mật khác, để điều đó xảy ra, họ có thể thực hiện một biện pháp bảo mật khác để kiểm chứng những hợp tác xã. Xác minh này có thể đến theo những cách khác nhau, tùy thuộc vào các hợp tác xã liên quan. Trong trường hợp giao tiếp trên Internet, CORS là cơ chế giúp các trình duyệt có thể sử dụng để truy cập các tài nguyên mà ban đầu họ không thể sử dụng được vì tài nguyên có nguồn gốc khác.

Chia sẻ tài nguyên nguồn gốc chéo (CORS) là một cơ chế sử dụng các tiêu đề HTTP bổ sung để báo cho các trình duyệt cung cấp cho ứng dụng web chạy ở một nguồn gốc, truy cập vào các tài nguyên được chọn từ một nguồn gốc khác.

Tôi đã nói về nguồn gốc hơn một lần, và bạn có thể tự hỏi điều đó có nghĩa là gì. Một nguồn gốc được xác định bởi giao thức, tên miền và cổng của URL. Khi bạn có API của mình tại một nguồn gốc như https://api.geekflare.com:3001 và lối vào của bạn tại https://geekflare.com, nguồn gốc được cho là khác nhau. Trong tình huống này, bạn sẽ cần CORS để có thể truy cập tài nguyên ở cả hai đầu.

Khi yêu cầu được gửi đến máy chủ, trình duyệt (máy khách) và máy chủ gửi yêu cầu và phản hồi, tiêu đề HTTP được bao gồm. Trong số các tiêu đề này, các tiêu đề bổ sung được bao gồm để ngăn trình duyệt chặn liên lạc.

Tại sao trình duyệt sẽ chặn liên lạc?

Tính năng bảo mật trình duyệt của nó. Nó sẽ làm như vậy nếu yêu cầu đến từ một nguồn gốc khác với yêu cầu của khách hàng. Các tiêu đề bổ sung được bao gồm do kết quả của CORS là một cách để nói với khách hàng rằng nó có thể sử dụng phản hồi mà nó nhận được.

Tiêu đề CORS

Một trong những tiêu đề an toàn có thể là tiêu đề phản hồi hoặc yêu cầu.

Tiêu đề phản hồi

Đây là những tiêu đề mà máy chủ gửi lại trong phản hồi của nó.

  • Kiểm soát truy cập-Cho phép-Xuất xứ :: Điều này được sử dụng để chỉ định nguồn gốc được phép truy cập tài nguyên trên máy chủ. Nó có thể chỉ định rằng chỉ những yêu cầu từ một nguồn gốc cụ thể mới được phép – Truy cập-Kiểm soát-Cho phép-Xuất xứ: https://geekflare.com hoặc nguồn gốc đó không quan trọng – Truy cập-Kiểm soát-Cho phép-Xuất xứ: *.
  • Access-Control-Expose-Headers :: Như tên của nó, danh sách này liệt kê các tiêu đề mà trình duyệt có quyền truy cập.
  • Access-Control-Max-Age :: Điều này cho biết thời lượng mà phản hồi của yêu cầu preflight có thể được lưu trong bộ nhớ cache.
  • Kiểm soát truy cập-Cho phép-Thông tin xác thực :: Điều này cho biết trình duyệt có thể sử dụng phản hồi khi yêu cầu ban đầu được thực hiện với thông tin xác thực.
  • Kiểm soát truy cập-Cho phép-Phương thức :: Điều này cho biết (các) phương thức được phép khi cố gắng truy cập tài nguyên.
  • Kiểm soát truy cập-Cho phép-Tiêu đề :: Điều này cho biết các tiêu đề HTTP có thể được sử dụng trong yêu cầu.

Dưới đây là một ví dụ về phản ứng sẽ như thế nào

HTTP / 1.1 204 Không có nội dung
Kiểm soát truy cập-Cho phép-Xuất xứ: *
Kiểm soát truy cập-Cho phép-Phương thức: GET, Head, PUT, PATCH, POST, DELETE
Thay đổi: Kiểm soát truy cập-Yêu cầu-Tiêu đề
Kiểm soát truy cập-Cho phép-Tiêu đề: Loại nội dung, Chấp nhận
Độ dài nội dung: 0
Ngày: Thứ bảy, ngày 16 tháng 11 năm 2019 11:41:08 GMT + 1
Kết nối: giữ mạng

Yêu cầu tiêu đề

Dưới đây là các tiêu đề mà một yêu cầu khách hàng nên chứa để sử dụng cơ chế CORS.

  • Xuất xứ :: Điều này cho biết nguồn gốc của yêu cầu khách hàng. Khi làm việc với frontend và backend, như đã nêu trước đây, đây sẽ là máy chủ của ứng dụng frontend của bạn.
  • Phương thức kiểm soát truy cập-yêu cầu: Phương thức này được sử dụng trong yêu cầu chiếu trước để chỉ ra phương thức HTTP sẽ được sử dụng để thực hiện yêu cầu.
  • Kiểm soát truy cập-yêu cầu-tiêu đề :: Điều này được sử dụng trong yêu cầu chiếu trước để chỉ ra các tiêu đề HTTP sẽ được sử dụng để thực hiện yêu cầu.

Dưới đây là một ví dụ về những gì một yêu cầu sẽ trông như thế nào

curl -i -X ​​TÙY CHỌN localhost: 3001 / api \
-H ‘Phương thức kiểm soát truy cập-yêu cầu-phương thức: GET’ \
-H ‘Tiêu đề-Kiểm soát-Yêu cầu-Tiêu đề: Loại nội dung, Chấp nhận’ \
-H ‘Xuất xứ: http: // localhost: 3000’

Yêu cầu chiếu trước

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Sau khi đề cập đến các yêu cầu preflight ở đây và ở đó, điều đó có thể có nghĩa là gì?

Yêu cầu chiếu trước xảy ra khi khách hàng phải gửi yêu cầu chiếu trước trước yêu cầu chính. Yêu cầu preflight là nhiều hơn một thăm dò để xác định xem máy chủ có hỗ trợ yêu cầu chính mà sắp sửa thực hiện hay không. Khi có được xác nhận tích cực, yêu cầu chính sẽ được gửi đi.

Khi một yêu cầu không phải là yêu cầu trước, nó được gọi là yêu cầu đơn giản.

Thực hiện CORS

Bạn hầu như sẽ muốn thiết lập mọi thứ ở phần cuối của ứng dụng. Việc thực hiện phụ thuộc vào khung bạn đang sử dụng. Đối với hướng dẫn này, chúng tôi sẽ xem xét cách thực hiện trong NodeJS và Rails.

Đường ray

Tôi khuyên bạn nên sử dụng giá đỡ đá quý. Sau đó, bạn sẽ cần phải thêm nó vào tập tin config / application.rb của bạn.

config.middleware.insert_b Before 0, Rack :: Cors do
cho phép làm
nguồn gốc ‘*’
nguồn ‘*’,
tiêu đề :: bất kỳ,
phơi bày:% i (ứng dụng khách uid loại mã thông báo truy cập hết hạn),
phương thức:% i (nhận bài đăng tùy chọn xóa bản vá),
thông tin đăng nhập: đúng
kết thúc
kết thúc

Nút

Trong Node.js, nó sẽ trông như thế này.

app.all (’* xông, (req, res, next) => {
res.header (Truy cập-Kiểm soát-Cho phép-Xuất xứ, ‘*,);
res.header (Truy cập-Kiểm soát-Cho phép-Phương thức, ‘PUT, GET, POST, DELETE, PATCH, OPTION Head phiên bản);
res.header (Truy cập-Kiểm soát-Cho phép-Tiêu đề, ,, *);
res.header (Truy cập-Kiểm soát-Cho phép-Thông tin xác thực, đúng);
kế tiếp();
});

Trong đoạn mã, chúng tôi đang thiết lập nguồn gốc, phương thức, tiêu đề và thông tin đăng nhập cần được phép truy cập vào các tài nguyên có sẵn trên máy chủ của chúng tôi. Bạn cũng có thể kiểm tra Sqreen người cung cấp mô-đun tiêu đề bảo mật được tích hợp với các ứng dụng Ruby, PHP, Python, Java, Go, Node.JS. Và để triển khai trong Apache hoặc Nginx, hãy tham khảo hướng dẫn này.

Phần kết luận

CORS nới lỏng chính sách để trình duyệt của bạn có thể truy cập các tài nguyên mà bạn muốn. Hiểu nó là gì, tại sao nó cần thiết và cách thiết lập nó sẽ giúp tìm ra các vấn đề bạn có thể gặp phải khi xây dựng các ứng dụng web của mình.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map