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, giúp 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.
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 lúc hoặc một trang web có thể nhúng nhiều iframe từ các trang web khác nhau. Nếu không có quy định hạn chế nào về hoạt động tương tác giữa các tài nguyên này và tập lệnh bị kẻ tấn công xâm phạm, thì tập lệnh có thể làm lộ mọi thông tin 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. "Nhưng chờ đã", bạn nói, "Tôi tải hình ảnh và tập lệnh từ các nguồn gốc khác mọi lúc". Trình duyệt cho phép một vài 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 trước đây và có thể khiến trang web của bạn gặp phải các lỗ hổng bảo mật như lừa đảo bằng cách nhấp chuột bằng iframe. 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 được coi 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 thành phần này đều giống nhau đối với hai URL, thì hai URL đó đượ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 cùng nguồn gốc với https://www.example.com/bar
vì giao thứ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 khác nguồn gốc được cho phép, trong khi việc đọc tài nguyên khác nguồn gốc bị chặn.
| iframe |
Việc nhúng khác nguồn gốc thường được cho phép (tuỳ thuộc vào lệnh X-Frame-Options), nhưng việc đọc khác nguồn gốc (chẳng hạn như sử dụng JavaScript để truy cập vào tài liệu trong iframe) thì không.
|
| CSS |
Bạn có thể nhúng CSS khác nguồn gốc bằng phần tử <link> hoặc @import trong tệp CSS. Bạn có thể cần phải có tiêu đề Content-Type chính xác.
|
| biểu mẫu |
Bạn có thể dùng URL khác nguồn gốc làm giá trị thuộc tính action của các phần tử biểu mẫu. Một ứng dụng web có thể ghi dữ liệu biểu mẫu vào một đích đến khác nguồn gốc.
|
| hình ảnh | Bạn được phép nhúng hình ảnh khác nguồn gốc. Tuy nhiên, việc đọc dữ liệu hình ảnh khác nguồn gốc (chẳng hạn như truy xuất dữ liệu nhị phân từ một hình ảnh khác 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 gốc bằng các phần tử <video> và <audio>.
|
| tập lệnh | Bạn có thể nhúng tập lệnh khác nguồn gốc; tuy nhiên, quyền truy cập vào một số API nhất định (chẳng hạn như yêu cầu tìm nạp khác nguồn gốc) có thể bị chặn. |
TODO: DevSite - Think and Check assessment
Cách ngăn chặn hành vi lừa đảo nhấp chuột
Một cuộc tấn công có tên là "lừa đảo nhấp chuột" 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 rằng họ đang truy cập vào ứng dụng của bạn trong khi gửi dữ liệu cho 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 có chỉ thị 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 an tâm hơn khi biết rằng các trình duyệt luôn nỗ lực để bảo vệ an ninh trên mạng. Mặc dù các 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 khác nguồn gốc trong ứng dụng của mình. 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 thông báo cho trình duyệt rằng việc tải tài nguyên khác nguồn gốc được cho phép từ các nguồn đáng tin cậy.