Giải thích chính sách same-origin trong JavaScript?

Question

Nguyễn Thị Hồng Phúc · Accepted Answer

Chính sách Same-Origin là một khái niệm quan trọng trong bảo mật web, đặc biệt khi bạn làm việc với JavaScript. Chính sách này giúp ngăn chặn việc truy cập tài nguyên của một trang web từ các domain khác nhau, bảo vệ dữ liệu và giảm nguy cơ tấn công Cross-Site Scripting (XSS).
Chính sách Same-Origin là gì?
Same-Origin Policy (SOP) là một cơ chế bảo mật quan trọng được các trình duyệt web áp dụng để ngăn chặn các tài nguyên không an toàn từ việc truy cập lẫn nhau giữa các website. Chính sách này kiểm soát cách một tài nguyên có thể truy cập vào các tài nguyên khác thông qua JavaScript, giúp bảo vệ dữ liệu người dùng.
Origin là gì?
Origin (nguồn gốc) trong SOP được xác định dựa trên ba phần chính của URL: giao thức (protocol), domain (tên miền) và cổng (port). Hai URL được coi là cùng origin nếu tất cả ba phần này trùng khớp.
Ví dụ:
URL 1: https://example.com:443/path/page.html
URL 2: https://example.com:443/another-page.html
Hai URL này có cùng origin vì cả giao thức (https), domain (example.com) và cổng (443) đều giống nhau.
Các trường hợp khác origin
Nếu bất kỳ thành phần nào trong ba thành phần trên khác nhau, chúng được coi là khác origin. Dưới đây là một số ví dụ minh họa:
Khác giao thức: http://example.com khác với https://example.com
Khác domain: https://example.com khác với https://sub.example.com
Khác cổng: https://example.com:8080 khác với https://example.com:443
Áp dụng chính sách Same-Origin
Các trình duyệt áp dụng SOP đối với các hành động đặc biệt, như gửi requests từ Javascript (AJAX), hoặc truy cập vào các phương thức và thuộc tính của đối tượng DOM từ một trang web khác domain.
Ví dụ cơ bản
Giả sử bạn có hai tài nguyên từ cùng một domain. JavaScript có thể truy cập và tương tác với cả hai mà không gặp vấn đề về SOP.
// vnengineer: truy cập một tài nguyên cùng origin
fetch('https://example.com/data.json')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log('Error:', error));
Ví dụ nâng cao và chuyên sâu
Khi bạn cố gắng truy cập một tài nguyên từ domain khác, trình duyệt sẽ chặn yêu cầu này.
// vnengineer: thử truy cập tài nguyên từ khác origin
fetch('https://another-domain.com/data.json')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log('Error:', error)); // Trình duyệt sẽ chặn yêu cầu này
Tránh gặp lỗi CORS (Cross-Origin Resource Sharing)
Để tránh lỗi CORS, bạn có thể cấu hình server để cho phép truy cập từ các domain khác. Đây là một ví dụ về cách thiết lập tiêu đề HTTP để cho phép origin khác quyền truy cập:
// Header để phép truy cập từ domain khác
Access-Control-Allow-Origin: https://allowed-domain.com
Điều này sẽ cho phép các yêu cầu từ `https://allowed-domain.com` truy cập vào tài nguyên của bạn.
Kết luận về chính sách Same-Origin
Chính sách Same-Origin trong JavaScript đóng vai trò quan trọng trong bảo mật web bằng cách ngăn chặn truy cập trái phép giữa các tài nguyên từ các domain khác nhau. Hiểu rõ và áp dụng chính sách này đúng cách sẽ giúp bạn bảo vệ tốt hơn dữ liệu và người dùng của mình trong các ứng dụng web.