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 các 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 các 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ị các 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ó hạn chế nào 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 phạm, thì tập lệnh đó có thể hiển thị mọi nội dung trong trình duyệt của người dùng.
Chính sách cùng nguồn gốc ngăn điều này xảy ra bằng cách chặn quyền đọc các tài nguyên được tải từ một nguồn gốc khác. Bạn nói "Nhưng chờ chút nhé", 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." Cá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à cấu phần phần mềm lịch sử 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ư clickjacking 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 là cùng nguồn gốc?
Nguồn gốc được xác định bằng giao thức (còn gọi là giao thức, chẳng hạn như 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, chúng được coi là có 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ì giao thức này khác nhau.
Điều gì được phép và những gì bị chặn?
Nhìn chung, bạn được phép nhúng tài nguyên nhiều nguồn gốc, trong khi việc đọc tài nguyên nhiều nguồn gốc sẽ bị chặn.
| iframe |
Chúng tôi thường cho phép nhúng nhiều nguồn gốc (tuỳ thuộc vào lệnh X-Frame-Options), nhưng không được phép đọc nhiều nguồn gốc (chẳng hạn như sử dụng JavaScript để truy cập vào tài liệu trong iframe).
|
| CSS |
Bạn có thể nhúng CSS nhiều nguồn gốc bằng phần tử <link> hoặc @import trong tệp CSS. Có thể bạn phải nhập đúng tiêu đề Content-Type.
|
| biểu mẫu |
Bạn có thể sử dụng URL trên 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 | Cho phép nhúng hình ảnh có nguồn gốc từ nhiều nguồn. 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ừ một hình ảnh 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 gốc bằng cách sử dụ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 nhất định (chẳng hạn như các yêu cầu tìm nạp nhiều nguồn gốc) có thể bị chặn. |
VIỆC CẦN LÀM: DevSite – Bài đánh giá Think and Check
Cách ngăn chặn hành vi sửa đổi giao diện người dùng
Cuộc tấn công có tên là "clickjacking" sẽ nhúng một trang web vào một iframe và phủ 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 nghĩ 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 iframe, hãy thêm chính sách bảo mật nội dung có lệnh frame-ancestors vào các tiêu đề HTTP.
Ngoài ra, bạn có thể thêm X-Frame-Options vào các tiêu đề HTTP, xem MDN để biết danh sách các tuỳ chọn.
Tóm tắt
Hy vọng rằng bạn cảm thấy yên tâm khi các trình duyệt nỗ lực trở thành biện pháp bảo vệ 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 nhiều 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 cho trình duyệt biết rằng việc tải tài nguyên nhiều nguồn gốc được cho phép từ các nguồn đáng tin cậy.