Công cụ kiểm tra IP miễn phí của WhatsMyIp.me

Hiểu chia sẻ tài nguyên giữa các nguồn gốc (CORS)

Hiểu chia sẻ tài nguyên giữa các nguồn gốc (CORS)

Chia sẻ tài nguyên giữa các nguồn gốc (CORS) được World Wide Web Consortium (W3C) giới thiệu vào năm 2006 để cung cấp cho các máy chủ web cách chỉ định bất kỳ nguồn gốc nào khác (tên miền, sơ đồ hoặc cổng) được phép truy cập vào tài nguyên của máy chủ ngoài chính sách cùng nguồn gốc. Đây là một bước phát triển đáng kể trong bảo mật web, cho phép các ứng dụng web tích hợp và tương tác hơn trong khi vẫn duy trì các giao thức bảo mật nghiêm ngặt.

Hiểu cơ chế của CORS (Chia sẻ tài nguyên nguồn gốc chéo) là rất quan trọng để phát triển web hiện đại. Phần này đi sâu vào cách CORS tăng cường bảo mật web, phân biệt giữa các yêu cầu đơn giản và yêu cầu chuẩn bị trước, đồng thời giải thích tầm quan trọng của các tiêu đề CORS.

Chia sẻ tài nguyên giữa các nguồn gốc là gì?

CORS (Chia sẻ tài nguyên nguồn gốc chéo) là một cơ chế sử dụng các tiêu đề HTTP để yêu cầu trình duyệt cho phép ứng dụng web chạy ở một nguồn (miền) có quyền truy cập các tài nguyên đã chọn từ máy chủ ở một nguồn khác. Đây là bước phát triển quan trọng trong bảo mật web vì nó cho phép giao tiếp cởi mở hơn giữa các dịch vụ web khác nhau trong khi vẫn bảo vệ khỏi các cuộc tấn công độc hại.

CORS tăng cường bảo mật web như thế nào: Thông tin chi tiết về kỹ thuật

CORS là một tính năng bảo mật cho phép các ứng dụng web gửi yêu cầu đến các máy chủ được lưu trữ trên các nguồn khác với trang web.

Trước CORS, chính sách cùng nguồn gốc đã hạn chế các ứng dụng web chỉ thực hiện các yêu cầu đối với cùng một miền với trang web. Mặc dù chính sách này là một biện pháp bảo mật quan trọng, ngăn chặn các trang web độc hại truy cập vào dữ liệu nhạy cảm nhưng nó cũng hạn chế các tương tác hợp pháp giữa các nguồn gốc cần thiết cho các ứng dụng web hiện đại.

CORS cho phép máy chủ bao gồm các tiêu đề cụ thể cho trình duyệt biết nguồn gốc nào được phép truy cập tài nguyên. Đây là một ví dụ cơ bản về cách CORS tăng cường bảo mật:

  1. Một ứng dụng web tại https://example.com cố gắng đưa ra yêu cầu https://api.example.org/data.
  2. Trình duyệt tự động gửi yêu cầu CORS tới https://api.example.org/data.
  3. Máy chủ tại https://api.example.org kiểm tra chính sách CORS của nó để xác định xem https://example.com được cho phép.
  4. Nếu như https://example.com được cho phép, máy chủ sẽ phản hồi bằng các tiêu đề CORS thích hợp, chẳng hạn như Access-Control-Allow-Origin: https://example.com, cho biết trình duyệt sẽ cho phép ứng dụng web truy cập tài nguyên.

Nếu không có CORS, chính sách cùng nguồn gốc sẽ chặn yêu cầu, nhưng với CORS, máy chủ có thể cho phép các yêu cầu có nguồn gốc chéo từ các nguồn đáng tin cậy một cách an toàn.

Yêu cầu đơn giản so với yêu cầu trước chuyến bay: Tìm hiểu sự khác biệt

Yêu cầu CORS được phân loại thành hai loại: yêu cầu đơn giản và yêu cầu được chiếu trước. Sự khác biệt giữa chúng dựa trên phương thức được sử dụng và tiêu đề được gửi cùng với yêu cầu.

  • Yêu cầu đơn giản: Đây là những yêu cầu đáp ứng các tiêu chí nhất định do CORS xác định. Một yêu cầu đơn giản có thể sử dụng phương thức GET, POST hoặc HEAD. Hơn nữa, nó chỉ được sử dụng các tiêu đề được coi là an toàn và không do người dùng xác định, chẳng hạn như Accept, Accept-Language, Content-Language, Và Content-Type với các giá trị của application/x-www-form-urlencoded, multipart/form-data, hoặc text/plain. Đây là một ví dụ về một yêu cầu đơn giản:
fetch('https://api.example.org/data', {
  method: 'GET',
  headers: {
    'Accept': 'application/json',
  }
});
  • Yêu cầu được chiếu trước: Các yêu cầu này không đáp ứng tiêu chí dành cho các yêu cầu đơn giản và yêu cầu yêu cầu “preflight” ban đầu bằng phương thức OPTIONS trước khi yêu cầu thực tế được gửi. Chuyến bay trước này kiểm tra xem yêu cầu thực tế có an toàn để gửi hay không, dựa trên chính sách CORS của tài nguyên đích. Các yêu cầu được chiếu trước được sử dụng khi phương thức này không phải là GET, POST hoặc HEAD hoặc khi sử dụng tiêu đề tùy chỉnh. Đây là một ví dụ:
fetch('https://api.example.org/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-Custom-Header': 'value'
  },
  body: JSON.stringify({key: 'value'})
});

Trong trường hợp này, trước tiên trình duyệt sẽ gửi yêu cầu OPTIONS tới https://api.example.org/data để xác định xem yêu cầu POST có Content-Type của application/json và một tiêu đề tùy chỉnh X-Custom-Header được cho phép.

Giải thích về tiêu đề CORS: Chúng là gì và chúng hoạt động như thế nào

CORS dựa vào các tiêu đề HTTP cụ thể để liên lạc giữa máy chủ và trình duyệt. Các tiêu đề này xác định xem trình duyệt có nên chặn hoặc cho phép yêu cầu tiếp tục hay không. Dưới đây là các tiêu đề CORS chính:

  • Access-Control-Allow-Origin: Tiêu đề này chỉ định (các) nguồn gốc nào được phép truy cập tài nguyên. Nó có thể được đặt thành một nguồn gốc cụ thể, chẳng hạn như https://example.com, hoặc * để cho phép tất cả nguồn gốc (mặc dù sử dụng * với thông tin xác thực là không được phép).
  • Access-Control-Allow-Methods: Tiêu đề này được sử dụng để đáp lại yêu cầu preflight nhằm cho biết phương thức HTTP nào được phép khi truy cập tài nguyên.
  • Access-Control-Allow-Headers: Để đáp lại yêu cầu preflight, tiêu đề này chỉ định tiêu đề nào có thể được sử dụng trong yêu cầu thực tế.
  • Access-Control-Expose-Headers: Tiêu đề này cho phép máy chủ đưa các tiêu đề vào danh sách trắng mà trình duyệt được phép truy cập.
  • Access-Control-Allow-Credentials: Tiêu đề này cho biết liệu phản hồi cho yêu cầu có thể được hiển thị hay không khi cờ thông tin xác thực là đúng. Nó phải được đặt thành true nếu cookie hoặc chi tiết xác thực có liên quan đến yêu cầu.
  • Access-Control-Max-Age: Tiêu đề này cho biết kết quả của yêu cầu preflight có thể được lưu vào bộ đệm trong bao lâu.

Hiểu và triển khai đúng cách các tiêu đề CORS là điều cần thiết để bảo mật các ứng dụng web đồng thời cho phép các yêu cầu có nguồn gốc chéo cần thiết. Bằng cách đặt các tiêu đề này, nhà phát triển có thể tinh chỉnh những yêu cầu có nguồn gốc chéo nào được phép, đảm bảo rằng chỉ những nguồn đáng tin cậy mới có thể truy cập tài nguyên web của họ.

Triển khai CORS

Việc triển khai Chia sẻ tài nguyên giữa các nguồn gốc (CORS) là điều cần thiết cho các ứng dụng web hiện đại tương tác với các tài nguyên trên các nguồn gốc khác nhau. Phần này khám phá cách bật CORS trong ứng dụng của bạn, gỡ lỗi các lỗi CORS phổ biến và phác thảo các phương pháp hay nhất dành cho nhà phát triển web.

Kích hoạt CORS trong ứng dụng của bạn: Hướng dẫn từng bước

Việc kích hoạt CORS liên quan đến việc định cấu hình máy chủ của bạn để gửi các tiêu đề CORS thích hợp để đáp ứng các yêu cầu. Quá trình này khác nhau tùy thuộc vào công nghệ máy chủ (ví dụ: Apache, Nginx, Node.js) mà bạn đang sử dụng. Dưới đây là cách bật CORS trên các môi trường máy chủ khác nhau:

  • Apache: Đối với máy chủ Apache, bạn có thể kích hoạt CORS bằng cách thêm các lệnh sau vào .htaccess tập tin hoặc tập tin cấu hình máy chủ:
<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
    Header set Access-Control-Allow-Headers "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
</IfModule>

Cấu hình này cho phép tất cả nguồn gốc (*) để thực hiện yêu cầu bằng các phương thức và tiêu đề được chỉ định. Điều chỉnh Access-Control-Allow-Origin value để hạn chế quyền truy cập vào nguồn gốc đáng tin cậy.

  • Nginx: Trong Nginx, CORS có thể được kích hoạt bằng cách thêm phần sau vào khối máy chủ của bạn:
location / {
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
        add_header 'Access-Control-Allow-Headers' 'Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With';
        add_header 'Content-Length' '0';
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        return 204;
    }
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
    add_header 'Access-Control-Allow-Headers' 'Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With';
}
  • Node.js (Express): Đối với các ứng dụng Node.js sử dụng Express, CORS có thể được kích hoạt dễ dàng bằng cách sử dụng cors phần mềm trung gian:
const express = require('express');
const cors = require('cors');

const app = express();

app.use(cors({
    origin: '*', // Adjust this to your specific origin
    methods: ['GET', 'POST', 'OPTIONS', 'DELETE', 'PUT'],
    allowedHeaders: ['Content-Type', 'Access-Control-Allow-Headers', 'Authorization', 'X-Requested-With'],
}));

app.get('/data', (req, res) => {
    res.json({ message: 'This is CORS-enabled for all origins!' });
});

app.listen(3000, () => {
    console.log('Server running on port 3000');
});

Gỡ lỗi các lỗi CORS phổ biến: Mẹo và thủ thuật

Lỗi CORS thường xảy ra khi trình duyệt chặn yêu cầu do chính sách CORS của máy chủ. Các lỗi phổ biến bao gồm thông báo về việc thiếu Access-Control-Allow-Origin tiêu đề hoặc phương pháp không được phép. Để gỡ lỗi các lỗi này:

  1. Sử dụng DevTools của trình duyệt: Các trình duyệt hiện đại cung cấp thông báo lỗi chi tiết trong bảng điều khiển. Những thông báo này thường cho biết những gì bị thiếu hoặc bị định cấu hình sai.
  2. Kiểm tra cấu hình máy chủ: Đảm bảo máy chủ của bạn được định cấu hình chính xác để gửi các tiêu đề CORS cần thiết. Thiếu tiêu đề hoặc giá trị không chính xác là những vấn đề phổ biến.
  3. Kiểm tra bằng công cụ: Các công cụ như Postman hoặc cURL có thể mô phỏng các yêu cầu từ các nguồn gốc khác nhau và giúp xác định xem máy chủ có phản hồi với tiêu đề CORS chính xác hay không.
  4. Xem lại chính sách CORS: Đảm bảo chính sách CORS trên máy chủ phù hợp với yêu cầu của ứng dụng web của bạn. Ví dụ: nếu ứng dụng của bạn cần gửi thông tin xác thực (cookie, xác thực HTTP), hãy đảm bảo Access-Control-Allow-Credentials được đặt thành true Và Access-Control-Allow-Origin không được đặt thành *.

Các phương pháp hay nhất về cấu hình CORS dành cho nhà phát triển web

Việc triển khai CORS một cách an toàn và hiệu quả đòi hỏi phải tuân thủ các phương pháp hay nhất:

  • Chỉ định nguồn gốc chính xác: Thay vì sử dụng * vì Access-Control-Allow-Origin, chỉ định nguồn gốc chính xác sẽ được phép truy cập tài nguyên của bạn. Điều này hạn chế khả năng tiếp xúc với các yêu cầu có nguồn gốc chéo không mong muốn.
  • Sử dụng thông tin xác thực một cách cẩn thận: Nếu ứng dụng của bạn sử dụng thông tin xác thực, hãy đảm bảo Access-Control-Allow-Credentials được đặt thành truevà chỉ định nguồn gốc chính xác thay vì *. Hãy nhớ rằng thông tin xác thực bao gồm cookie, xác thực HTTP và chứng chỉ SSL phía máy khách.
  • Giới hạn tiêu đề tiếp xúc: Chỉ hiển thị các tiêu đề cần thiết thông qua Access-Control-Expose-Headers. Việc hiển thị quá nhiều tiêu đề có thể vô tình làm rò rỉ thông tin nhạy cảm.
  • Xác thực thời lượng bộ nhớ đệm trước chuyến bay: Sử dụng Access-Control-Max-Age để lưu vào bộ nhớ đệm các phản hồi trước chuyến bay, giảm số lượng yêu cầu trước chuyến bay. Tuy nhiên, hãy đảm bảo thời lượng phù hợp với tần suất chính sách CORS của bạn có thể thay đổi.
  • Triển khai chính sách CORS động: Đối với các ứng dụng phức tạp hơn, hãy xem xét triển khai các chính sách CORS động để điều chỉnh Access-Control-Allow-Origin dựa trên nguồn gốc của yêu cầu. Điều này có thể được thực hiện theo chương trình trên máy chủ.
  • Thường xuyên xem xét các chính sách của CORS: Khi ứng dụng web của bạn phát triển, hãy thường xuyên xem xét và cập nhật các chính sách CORS của bạn để đảm bảo chúng vẫn đáp ứng các yêu cầu về chức năng và bảo mật của bạn.

Bằng cách tuân theo các nguyên tắc này cũng như hiểu cách định cấu hình và gỡ lỗi CORS, nhà phát triển có thể đảm bảo các ứng dụng web của họ giao tiếp an toàn và hiệu quả giữa các nguồn gốc.

CORS đang hoạt động

Việc triển khai Chia sẻ tài nguyên nhiều nguồn gốc (CORS) không chỉ là kích hoạt một tính năng; đó là hiểu cách thức hoạt động của nó trong bối cảnh của các ứng dụng web hiện đại. Phần này khám phá các ví dụ thực tế về CORS, quản lý các chính sách CORS cũng như các công cụ và kỹ thuật để triển khai hiệu quả.

Ví dụ thực tế về CORS: Từ lý thuyết đến thực hành

CORS là một phần cơ bản của quá trình phát triển web cho phép các tài nguyên được yêu cầu một cách an toàn trên nhiều nguồn khác nhau. Dưới đây là một số tình huống thực tế trong đó CORS đóng vai trò quan trọng:

  • Mức tiêu thụ API trong các ứng dụng một trang (SPA): SPA thường sử dụng API được lưu trữ trên các miền khác nhau. Ví dụ: một ứng dụng React được cung cấp từ https://myapp.com có thể cần lấy dữ liệu người dùng từ https://api.userdata.com. Nếu không có CORS, yêu cầu có nguồn gốc chéo này sẽ bị trình duyệt chặn. Bằng cách đặt tiêu đề CORS thích hợp (Access-Control-Allow-Origin: https://myapp.com) trên máy chủ API, SPA có thể yêu cầu dữ liệu cần thiết một cách an toàn.
// Example fetch request in an SPA
fetch("https://api.userdata.com/user", {
  method: "GET",
  headers: {
    "Content-Type": "application/json",
  },
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error fetching user data:', error));
  • Mạng phân phối nội dung (CDN): CDN phục vụ nội dung tĩnh (hình ảnh, tập lệnh, biểu định kiểu) từ nhiều địa điểm khác nhau trên toàn thế giới. Khi ứng dụng web của bạn được lưu trữ tại https://example.com yêu cầu một hình ảnh từ https://cdn.example.com, CORS đảm bảo rằng các yêu cầu có nguồn gốc chéo này đối với nội dung tĩnh được xử lý một cách an toàn.
  • Tiện ích và tích hợp của bên thứ ba: Các trang web thường tích hợp các tiện ích của bên thứ ba (ví dụ: chatbot, nguồn cấp dữ liệu mạng xã hội) yêu cầu truy cập tài nguyên từ máy chủ bên ngoài. CORS cho phép các tiện ích này hoạt động liền mạch trên nhiều nguồn gốc khác nhau, nâng cao trải nghiệm người dùng mà không ảnh hưởng đến bảo mật.

Quản lý chính sách CORS: Công cụ và kỹ thuật để triển khai hiệu quả

Việc quản lý hiệu quả các chính sách CORS đòi hỏi phải hiểu rõ các công cụ và kỹ thuật mà bạn có thể sử dụng:

  • Cấu hình máy chủ: Bước đầu tiên trong việc quản lý chính sách CORS là định cấu hình máy chủ web của bạn. Điều này liên quan đến việc thiết lập các tiêu đề CORS cần thiết dựa trên nhu cầu của ứng dụng của bạn. Hầu hết các máy chủ web (Apache, Nginx, IIS) cho phép bạn chỉ định các tiêu đề này trong tệp cấu hình của chúng hoặc thông qua .htaccess (đối với Apache).
  • Middleware cho Web Framework: Nếu bạn đang sử dụng một khung web (Express.js cho Node.js, Django cho Python), nhiều nền tảng cung cấp các gói phần mềm trung gian giúp đơn giản hóa việc quản lý chính sách CORS. Ví dụ, cors gói dành cho Express cho phép bạn xác định chính sách CORS trực tiếp trong mã ứng dụng của mình.
// Example using the cors middleware in an Express.js application
const cors = require('cors');
const express = require('express');
const app = express();

// Define CORS options
const corsOptions = {
  origin: 'https://example.com',
  optionsSuccessStatus: 200,
};

app.use(cors(corsOptions));

app.get('/data', (req, res) => {
  res.json({ message: 'CORS-enabled route' });
});

app.listen(3000, () => console.log('Server running on port 3000'));
  • Xử lý CORS động: Đối với các ứng dụng cần cho phép các yêu cầu từ nhiều nguồn đáng tin cậy, có thể triển khai xử lý CORS động. Điều này liên quan đến việc lập trình thiết lập Access-Control-Allow-Origin tiêu đề dựa trên nguồn gốc của yêu cầu đến.
// Example of dynamic CORS handling
app.use((req, res, next) => {
  const allowedOrigins = ['https://example.com', 'https://api.example.com'];
  const origin = req.headers.origin;
  if (allowedOrigins.includes(origin)) {
    res.setHeader('Access-Control-Allow-Origin', origin);
  }
  next();
});

Công cụ kiểm tra và gỡ lỗi chính sách CORS

  • Công cụ dành cho nhà phát triển trình duyệt: Tab mạng trong các công cụ dành cho nhà phát triển trình duyệt là vô giá để kiểm tra lỗi CORS và hiểu cách gửi và nhận tiêu đề CORS trong thời gian thực.
  • Công cụ trực tuyến: Công cụ như Máy kiểm tra CORS Và Người phát thơ cho phép bạn kiểm tra các chính sách CORS bằng cách gửi yêu cầu đến máy chủ của bạn từ các nguồn khác nhau và kiểm tra phản hồi.
  • Công cụ dòng lệnh: curl là một công cụ mạnh mẽ để kiểm tra các chính sách CORS từ dòng lệnh. Nó có thể được sử dụng để mô phỏng các yêu cầu từ các nguồn gốc khác nhau và kiểm tra các tiêu đề CORS trong phản hồi của máy chủ.
# Example curl command to test CORS
curl -H "Origin: https://example.com" \
     -I https://api.example.com/data

Bằng cách hiểu các chiến lược quản lý và ứng dụng trong thế giới thực này, các nhà phát triển có thể đảm bảo ứng dụng web của họ tương tác an toàn với các tài nguyên trên nhiều nguồn, tận dụng CORS để phát huy hết tiềm năng của nó.

Cho dù đó là kích hoạt các yêu cầu API có nguồn gốc chéo trong SPA, phân phát nội dung thông qua CDN hay tích hợp các tiện ích của bên thứ ba, CORS là một phần thiết yếu của hệ sinh thái web hiện đại mà khi được quản lý chính xác sẽ cung cấp cả tính bảo mật và chức năng.

Ý nghĩa bảo mật của CORS

Việc triển khai Chia sẻ tài nguyên giữa các nguồn gốc (CORS) mang lại ý nghĩa bảo mật quan trọng cho các ứng dụng web. Mặc dù CORS cho phép các ứng dụng web yêu cầu tài nguyên từ các nguồn khác nhau nhưng nó cũng gây ra các lỗ hổng tiềm ẩn nếu không được định cấu hình đúng cách.

Phần này đi sâu vào các khía cạnh bảo mật của CORS, nêu bật việc giảm thiểu các cuộc tấn công Cross-Site Scripting (XSS) và tầm quan trọng của các chính sách CORS nghiêm ngặt.

CORS và bảo mật web: Giảm thiểu các cuộc tấn công tập lệnh chéo trang (XSS)

Các cuộc tấn công tập lệnh chéo trang (XSS) cho phép kẻ tấn công đưa các tập lệnh độc hại vào nội dung từ các trang web lành tính và đáng tin cậy.

Các cuộc tấn công này xảy ra khi một ứng dụng bao gồm dữ liệu không đáng tin cậy trong một trang web mà không được xác thực hoặc thoát thích hợp, cho phép kẻ tấn công thực thi các tập lệnh trong ngữ cảnh trình duyệt của nạn nhân. CORS rất quan trọng trong việc giảm thiểu các cuộc tấn công XSS bằng cách kiểm soát nguồn gốc nào được phép tương tác với ứng dụng web của bạn.

Hãy xem xét tình huống trong đó ứng dụng cho phép nội dung do người dùng tạo có thể bao gồm các tập lệnh độc hại.

Nếu không khử trùng nội dung phù hợp và chính sách CORS nghiêm ngặt, ứng dụng này có thể trở thành trung tâm cho các cuộc tấn công XSS. CORS không trực tiếp ngăn chặn XSS nhưng góp phần vào chiến lược bảo mật rộng hơn bằng cách đảm bảo rằng chỉ những nguồn gốc được chỉ định mới có thể đưa ra yêu cầu đối với ứng dụng của bạn, giảm bề mặt tấn công.

Ví dụ: giả sử ứng dụng của bạn https://safe-app.com sử dụng API được lưu trữ tại https://api.safe-app.com. Bằng cách thiết lập Access-Control-Allow-Origin tiêu đề tới https://safe-app.com, bạn đảm bảo rằng chỉ những yêu cầu bắt nguồn từ ứng dụng của bạn mới có thể truy cập API. Hạn chế này giúp giảm thiểu các cuộc tấn công XSS tiềm ẩn bằng cách hạn chế tương tác với API của bạn ở các nguồn đáng tin cậy.

Access-Control-Allow-Origin: https://safe-app.com

Tuy nhiên, điều quan trọng là phải kết hợp các chính sách CORS với các biện pháp bảo mật khác, chẳng hạn như xác thực và lọc dữ liệu đầu vào của người dùng, để giảm thiểu XSS và các loại tấn công khác một cách hiệu quả.

Tầm quan trọng của chính sách CORS nghiêm ngặt: Bảo vệ ứng dụng web của bạn

Việc triển khai các chính sách CORS nghiêm ngặt là điều quan trọng để bảo vệ các ứng dụng web của bạn khỏi các mối đe dọa bảo mật khác nhau. Chính sách CORS lỏng lẻo, chẳng hạn như cài đặt Access-Control-Allow-Origin ĐẾN *, có thể khiến ứng dụng của bạn bị đánh cắp dữ liệu, tấn công CSRF và các lỗ hổng khác bằng cách cho phép bất kỳ nguồn gốc nào thực hiện yêu cầu tới máy chủ của bạn.

Chính sách CORS nghiêm ngặt chỉ định nguồn gốc, phương thức và tiêu đề nào được phép. Tính đặc hiệu này đảm bảo rằng chỉ những ứng dụng web đáng tin cậy mới có thể tương tác với tài nguyên của bạn, cung cấp lớp bảo mật giúp bảo vệ dữ liệu nhạy cảm và tính toàn vẹn của ứng dụng.

Ví dụ: hãy xem xét một ứng dụng cho phép truy cập từ một miền cụ thể và sử dụng thông tin xác thực (cookie, xác thực HTTP):

Access-Control-Allow-Origin: https://trusted-domain.com
Access-Control-Allow-Credentials: true

Cấu hình này cho phép https://trusted-domain.com để thực hiện các yêu cầu có thông tin đăng nhập vào ứng dụng của bạn, trong khi các yêu cầu từ nguồn khác bị từ chối. Hạn chế này rất quan trọng đối với các ứng dụng xử lý thông tin nhạy cảm hoặc thực hiện các hành động thay mặt người dùng.

Hơn nữa, việc chỉ định các phương thức và tiêu đề được phép sẽ thắt chặt hơn nữa tính bảo mật:

Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type, X-Custom-Header

Thiết lập này đảm bảo rằng chỉ những yêu cầu GET và POST có tiêu đề được chỉ định mới được chấp nhận, giúp giảm nguy cơ yêu cầu trái phép hoặc độc hại.

Các phương pháp hay nhất để triển khai CORS an toàn

  1. Chỉ định nguồn gốc được phép: Luôn xác định nguồn gốc cụ thể thay vì sử dụng ký tự đại diện *. Cách thực hành này đảm bảo rằng chỉ những miền đáng tin cậy mới có thể gửi yêu cầu tới ứng dụng của bạn.
  2. Giới hạn quyền truy cập bằng thông tin xác thực: Hãy thận trọng khi cho phép thông tin xác thực. Đảm bảo rằng Access-Control-Allow-Credentials được đặt thành true chỉ khi cần thiết và nguồn gốc đó được xác định rõ ràng.
  3. Xác định các phương thức và tiêu đề được phép: Chỉ định phương thức và tiêu đề nào được phép. Hạn chế này không chỉ thắt chặt bảo mật mà còn cung cấp tài liệu rõ ràng cho các nhà phát triển tương tác với API của bạn.
  4. Sử dụng Yêu cầu trước chuyến bay: Tận dụng các yêu cầu preflight để xác minh các yêu cầu có nguồn gốc chéo trước khi chấp nhận chúng. Yêu cầu preflight bổ sung thêm một lớp xác minh, đảm bảo rằng yêu cầu thực tế tuân thủ chính sách CORS của bạn.
  5. Thường xuyên xem xét các chính sách của CORS: Khi ứng dụng của bạn phát triển, hãy thường xuyên xem xét và cập nhật các chính sách CORS của bạn để phản ánh những thay đổi trong kiến trúc ứng dụng và tương tác miền của bạn.
  6. Kết hợp CORS với các biện pháp bảo mật khác: CORS phải là một phần của chiến lược bảo mật toàn diện. Kết hợp các chính sách CORS với chính sách bảo mật nội dung (CSP), xác thực đầu vào, mã hóa đầu ra và các phương pháp bảo mật tốt nhất khác để bảo vệ khỏi XSS và các lỗ hổng web khác.

Bằng cách hiểu được ý nghĩa bảo mật của CORS và triển khai các chính sách CORS nghiêm ngặt, các nhà phát triển có thể bảo vệ ứng dụng web của họ trước các cuộc tấn công trên nhiều nguồn gốc, đồng thời cho phép các tương tác giữa các nguồn gốc cần thiết mà các ứng dụng web hiện đại yêu cầu.

Chủ đề CORS nâng cao

Khi các ứng dụng web ngày càng phức tạp, việc hiểu rõ các sắc thái của Chia sẻ tài nguyên giữa các nguồn gốc (CORS) ngày càng trở nên quan trọng. Phần này khám phá các chủ đề CORS nâng cao, bao gồm bảo mật CORS và API, ngoài các cấu hình cơ bản và khắc phục các sự cố phổ biến.

Bảo mật CORS và API: Đảm bảo các yêu cầu có nguồn gốc chéo an toàn

API là xương sống của các ứng dụng web hiện đại, hỗ trợ trao đổi dữ liệu và chức năng trên các dịch vụ khác nhau. CORS đóng vai trò then chốt trong bảo mật API bằng cách đảm bảo rằng chỉ những nguồn gốc được ủy quyền mới có thể truy cập API của bạn. Đây là cách CORS tăng cường bảo mật API:

  • Xác thực dựa trên mã thông báo: Nhiều API sử dụng xác thực dựa trên mã thông báo (ví dụ: OAuth 2.0, JWT) để bảo mật quyền truy cập. Chính sách CORS cần được định cấu hình cẩn thận để cho phép các tiêu đề mã thông báo, chẳng hạn như Authorization, từ nguồn gốc đáng tin cậy. Ví dụ, để cho phép Authorization các tiêu đề trong các yêu cầu có nguồn gốc chéo, máy chủ của bạn phải liệt kê nó một cách rõ ràng trong Access-Control-Allow-Headers.
Access-Control-Allow-Headers: Authorization
  • Mức tiêu thụ API của bên thứ ba: Khi ứng dụng web của bạn sử dụng API của bên thứ ba, việc hiểu chính sách CORS của các API này là rất quan trọng. Nếu API của bên thứ ba có chính sách CORS hạn chế, bạn có thể cần sử dụng proxy phía máy chủ trên miền của mình để chuyển tiếp các yêu cầu tới API, từ đó tránh được các hạn chế của CORS.
  • Hiển thị tiêu đề tùy chỉnh: Nếu API của bạn sử dụng các tiêu đề tùy chỉnh cho thông tin dành riêng cho ứng dụng thì các tiêu đề này phải được hiển thị rõ ràng cho khách hàng thông qua Access-Control-Expose-Headers. Điều này cho phép ứng dụng phía máy khách đọc các giá trị của các tiêu đề này.
Access-Control-Expose-Headers: X-My-Custom-Header

Ngoài CORS cơ bản: Cấu hình nâng cao và khắc phục sự cố

Cấu hình CORS nâng cao có thể giải quyết các tình huống phức tạp hơn:

  • Xác thực nguồn gốc động: Đối với các ứng dụng cần cho phép các yêu cầu từ một nhóm nguồn gốc động (ví dụ: các ứng dụng có nhiều đối tượng thuê trong đó mỗi đối tượng thuê có miền riêng), việc triển khai xác thực nguồn gốc động là cần thiết. Điều này liên quan đến việc kiểm tra theo chương trình Origin tiêu đề dựa vào danh sách nguồn gốc được phép và thiết lập Access-Control-Allow-Origin tiêu đề tương ứng.
const allowedOrigins = ['https://tenant1.example.com', 'https://tenant2.example.com'];
const origin = request.headers.origin;
if (allowedOrigins.includes(origin)) {
    response.setHeader('Access-Control-Allow-Origin', origin);
}
  • CORS cho WebSockets: Mặc dù WebSockets không phải tuân theo CORS giống như các yêu cầu HTTP, nhưng việc bảo mật các kết nối WebSocket là rất quan trọng. Việc đảm bảo rằng yêu cầu bắt tay WebSocket ban đầu (là yêu cầu HTTP) bao gồm xác thực CORS thích hợp là một cách làm tốt.
  • Tối ưu hóa bộ nhớ đệm trước: Các Access-Control-Max-Age tiêu đề có thể được sử dụng để chỉ định thời gian lưu trữ kết quả của yêu cầu preflight. Tối ưu hóa giá trị này dựa trên tần suất thay đổi chính sách CORS của bạn có thể làm giảm số lượng yêu cầu preflight, cải thiện hiệu suất ứng dụng.
Access-Control-Max-Age: 86400

Khắc phục sự cố CORS thường gặp

Ngay cả khi thiết lập CORS thích hợp, vấn đề vẫn có thể phát sinh. Dưới đây là các chiến lược để khắc phục sự cố CORS phổ biến:

  • Tiêu đề CORS bị thiếu hoặc không chính xác: Đảm bảo rằng máy chủ của bạn được định cấu hình chính xác để gửi tiêu đề CORS dự kiến. Công cụ như curl có thể được sử dụng để kiểm tra các tiêu đề theo cách thủ công:
curl -I -H "Origin: https://example.com" https://api.example.com/resource
  • Phản hồi không rõ ràng trong API tìm nạp JavaScript: Khi thực hiện yêu cầu bằng API tìm nạp, phản hồi không rõ ràng (phản hồi từ yêu cầu không có cors) có thể dẫn đến sự cố vì nó giới hạn loại thông tin bạn có thể truy cập về phản hồi. Đảm bảo bạn không cài đặt mode: 'no-cors' trong các yêu cầu API tìm nạp của bạn trừ khi thực sự cần thiết.
  • Lỗi CORS với thông tin xác thực: Nếu yêu cầu của bạn bao gồm thông tin xác thực (cookie, xác thực HTTP), hãy đảm bảo Access-Control-Allow-Credentials được đặt thành true, và đó Access-Control-Allow-Origin không phải là ký tự đại diện (*).
  • Gỡ lỗi các yêu cầu trước chuyến bay: Nếu yêu cầu preflight không thành công, hãy kiểm tra xem máy chủ của bạn có xử lý được không OPTIONS yêu cầu chính xác và nó phản hồi với các tiêu đề CORS thích hợp (Access-Control-Allow-Methods, Access-Control-Allow-Headers).

Bằng cách đi sâu vào các chủ đề CORS nâng cao này, các nhà phát triển có thể hiểu rõ hơn cách bảo mật và tối ưu hóa các ứng dụng web của họ để chia sẻ tài nguyên giữa các nguồn gốc. Cho dù xử lý vấn đề bảo mật API, cấu hình CORS phức tạp hay khắc phục sự cố CORS đầy thách thức, thì sự hiểu biết sâu sắc về CORS là điều cần thiết để phát triển web hiện đại.

Phần kết luận

Hiểu CORS là điều cần thiết để tương tác web an toàn; việc triển khai nó một cách chính xác sẽ củng cố các ứng dụng chống lại các vi phạm, chính sách nghiêm ngặt của nó bảo vệ chống lại các cuộc tấn công XSS và khám phá các chủ đề nâng cao giúp tối ưu hóa việc phát triển web.

bài viết liên quan