Chính sách cùng nguồn gốc là một tính năng bảo mật của trình duyệt, hạn chế cách tài liệu và tập lệnh trên một nguồn gốc có thể tương tác với tài nguyên trên một nguồn gốc khác.
Một trình duyệt có thể tải và hiển thị tài nguyên từ nhiều trang web cùng một lúc. Bạn có thể mở nhiều thẻ cùng một lúc hoặc một trang web có thể nhúng nhiều iframe từ nhiều trang web khác nhau. Nếu không có quy định hạn chế về hoạt động tương tác giữa các tài nguyên này và một tập lệnh bị kẻ tấn công xâm nhập, thì tập lệnh đó có thể hiển thị mọi thứ trong trình duyệt của người dùng.
Chính sách cùng nguồn gốc ngăn chặn điều này xảy ra bằng cách chặn quyền đọc đối với các tài nguyên được tải từ một nguồn gốc khác. Bạn có thể nói: "Nhưng chờ đã, tôi luôn luôn tải hình ảnh và tập lệnh từ các nguồn gốc khác". Trình duyệt cho phép một số thẻ nhúng tài nguyên từ một nguồn gốc khác. Chính sách này chủ yếu là một cấu phần phần mềm cũ và có thể khiến trang web của bạn gặp phải các lỗ hổng như lừa đảo bằng cách sử dụng khung ẩn. Bạn có thể hạn chế việc đọc các thẻ này trên nhiều nguồn gốc bằng cách sử dụng Chính sách bảo mật nội dung.
Thế nào là cùng nguồn gốc?
Nguồn gốc được xác định bằng lược đồ (còn gọi là giao thức, ví dụ: HTTP hoặc HTTPS), cổng (nếu được chỉ định) và máy chủ lưu trữ. Khi cả ba đều giống nhau đối với hai URL, thì chúng được coi là cùng nguồn gốc. Ví dụ: http://www.example.com/foo có cùng nguồn gốc với http://www.example.com/bar nhưng không phải https://www.example.com/bar vì lược đồ khác nhau.
Nội dung nào được phép và nội dung nào bị chặn?
Nhìn chung, việc nhúng tài nguyên trên nhiều nguồn gốc được cho phép, trong khi việc đọc tài nguyên trên nhiều nguồn gốc bị chặn.
| iframe |
Việc nhúng nhiều nguồn thường được cho phép (tuỳ thuộc vào lệnh X-Frame-Options), nhưng việc đọc nhiều nguồn (chẳng hạn như sử dụng JavaScript để truy cập vào một tài liệu trong iframe) thì không.
|
| CSS |
Bạn có thể nhúng CSS nhiều nguồn gốc bằng cách sử dụng phần tử <link> hoặc @import trong tệp CSS. Bạn có thể phải có tiêu đề Content-Type chính xác.
|
| biểu mẫu |
Bạn có thể sử dụng URL nhiều nguồn gốc làm giá trị thuộc tính action của các phần tử biểu mẫu. Ứng dụng web có thể ghi dữ liệu biểu mẫu vào một đích đến trên nhiều nguồn gốc.
|
| hình ảnh | Được phép nhúng hình ảnh có nguồn gốc khác. Tuy nhiên, việc đọc dữ liệu hình ảnh trên nhiều nguồn gốc (chẳng hạn như truy xuất dữ liệu nhị phân từ hình ảnh trên nhiều nguồn gốc bằng JavaScript) sẽ bị chặn. |
| truyền thông đa phương tiện |
Bạn có thể nhúng video và âm thanh trên nhiều nguồn bằng các phần tử <video> và <audio>.
|
| tập lệnh | Bạn có thể nhúng các tập lệnh trên nhiều nguồn gốc; tuy nhiên, quyền truy cập vào một số API (chẳng hạn như các yêu cầu tìm nạp trên nhiều nguồn gốc) có thể bị chặn. |
VIỆC CẦN LÀM: DevSite – Bài đánh giá về việc suy nghĩ và kiểm tra
Cách ngăn chặn hành vi nhấp giả
Một cuộc tấn công có tên là "clickjacking" (nhấp tặc) sẽ nhúng một trang web vào iframe và phủ lên các nút trong suốt liên kết đến một đích đến khác. Người dùng bị lừa khi nghĩ rằng họ đang truy cập vào ứng dụng của bạn trong khi thực tế là đang gửi dữ liệu đến kẻ tấn công.
Để chặn các trang web khác nhúng trang web của bạn vào một iframe, hãy thêm chính sách bảo mật nội dung bằng lệnh frame-ancestors vào tiêu đề HTTP.
Ngoài ra, bạn có thể thêm X-Frame-Options vào tiêu đề HTTP, hãy xem
MDN
để biết danh sách các tuỳ chọn.
Tóm tắt
Hy vọng bạn cảm thấy yên tâm hơn một chút khi biết rằng các trình duyệt đang nỗ lực để trở thành người gác cổng bảo mật trên web. Mặc dù trình duyệt cố gắng đảm bảo an toàn bằng cách chặn quyền truy cập vào tài nguyên, nhưng đôi khi bạn muốn truy cập vào tài nguyên trên nhiều nguồn gốc trong ứng dụng. Trong hướng dẫn tiếp theo, hãy tìm hiểu về tính năng Chia sẻ tài nguyên trên nhiều nguồn gốc (CORS) và cách cho trình duyệt biết rằng bạn cho phép tải tài nguyên trên nhiều nguồn gốc từ các nguồn đáng tin cậy.