Chính sách cùng nguồn gốc

Mariko Kosaka

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 thứ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ị tài nguyên từ nhiều trang web cùng một lúc. Bạn có thể có nhiều thẻ mở cùng một 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ề lượt tương tác giữa 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 thứ 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 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 khác luôn." Trình duyệt cho phép một vài thẻ nhúng tài nguyên từ một nguồn khác. Chính sách này hầu như chỉ là một cấu phần phần mềm 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 cách sử dụng iframe. Bạn có thể hạn chế việc đọc trên nhiều nguồn gốc trong số các thẻ này sử dụng công nghệ Bảo mật nội dung Chính sách.

Thế nào là cùng nguồn gốc?

Nguồn gốc được xác định theo 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 cho hai URL thì cả hai đều đượ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ì lược đồ khác nhau.

Những 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 phép trong khi đọc tài nguyên trên nhiều nguồn gốc bị chặn.

iframe Thường thì bạn được phép nhúng nhiều nguồn gốc (tuỳ thuộc vào lệnh X-Frame-Options). Tuy nhiên, cách đọc trên nhiều nguồn gốc (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 trên nhiều nguồn gốc bằng phần tử <link> hoặc @import trong tệp CSS. Bạn có thể phải nhập đúng tiêu đề Content-Type.
biểu mẫu Bạn có thể 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. Một ứng dụng web có thể ghi dữ liệu biểu mẫu vào một đích đến nhiều nguồn gốc.
hình ảnh Bạn có thể nhúng hình ảnh từ nhiều nguồn gố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ừ 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ác phần tử <video><audio>.
tập lệnh Có thể nhúng tập lệnh 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 trên nhiều nguồn gốc) có thể bị chặn.

VIỆC CẦN LÀM: DevSite – Bài đánh giá Suy nghĩ và kiểm tra

Cách ngăn chặn Tấn công lượt nhấp

sửa đổi giao diện người dùng
Hình: Cơ chế sửa đổi giao diện người dùng được minh hoạ trong 3 lớp riêng biệt (trang web cơ sở, trang web có iframe, nút trong suốt).

Cuộc tấn công có tên "clickjacking" nhúng một trang web vào iframe và lớp phủ các nút trong suốt liên kết tới 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 đến của những 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 nội dung chính sách bảo mật với frame-ancestors lệnh vào tiêu đề HTTP.

Ngoài ra, bạn có thể thêm X-Frame-Options vào tiêu đề HTTP để xem MDN để xem danh sách các lựa chọn.

Tóm tắt

Hy vọng rằng bạn sẽ thấy nhẹ nhõm vì các trình duyệt nỗ lực hết mình để trở thành "người gác cổng" bảo mật trên web. Mặc dù các trình duyệt luôn cố gắng đảm bảo an toàn bằng cách chặn quyền truy cập vào các tài nguyên, đôi khi bạn muốn truy cập vào các tài nguyên trên nhiều nguồn gốc trong . 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 trên nhiều nguồn gốc đang được phép từ những nguồn đáng tin cậy.