Tài liệu này đưa ra các đề xuất về cách định cấu hình Chính sách bảo mật nội dung (CSP) của trang web cho API JavaScript của Maps. Vì người dùng cuối sử dụng nhiều loại và phiên bản trình duyệt, nên nhà phát triển nên sử dụng ví dụ này làm tài liệu tham khảo, tinh chỉnh cho đến khi không còn xảy ra lỗi vi phạm CSP nào nữa.
Tìm hiểu thêm về Chính sách bảo mật nội dung.
CSP nghiêm ngặt
Để bảo vệ trang web của bạn khỏi các cuộc tấn công bằng tập lệnh trên nhiều trang web (XSS), bạn nên sử dụng CSP nghiêm ngặt thay vì CSP danh sách cho phép. Maps JavaScript API hỗ trợ việc sử dụng CSP nghiêm ngặt dựa trên số chỉ dùng một lần. Trang web phải điền giá trị số chỉ dùng một lần vào cả hai phần tử script và style. Trong nội bộ, API JavaScript của Maps sẽ tìm phần tử đầu tiên như vậy và áp dụng giá trị số chỉ dùng một lần cho các phần tử kiểu hoặc tập lệnh được chèn bằng tập lệnh API tương ứng.
Từ khoá 'strict-dynamic' trong ví dụ sau đây cho phép một tập lệnh có số chỉ dùng một lần hợp lệ tải các tập lệnh khác. Vì trang của bạn tải Maps JavaScript API bằng một số chỉ dùng một lần, nên API có thể tải các tập lệnh bổ sung mà API cần, do đó, bạn không cần liệt kê bất kỳ miền nào của Google trong script-src. Trình duyệt hỗ trợ 'strict-dynamic' sẽ bỏ qua nguồn https: trong ví dụ; đây chỉ là phương án dự phòng cho các trình duyệt cũ.
Ví dụ
Ví dụ sau đây cho thấy một CSP mẫu, cùng với một trang HTML nơi CSP đó được nhúng:
Chính sách bảo mật nội dung mẫu
script-src 'nonce-{script value}' 'strict-dynamic' https: 'unsafe-eval' blob:;
img-src 'self' https://*.googleapis.com https://*.gstatic.com *.google.com *.googleusercontent.com data:;
frame-src *.google.com;
connect-src 'self' https://*.googleapis.com *.google.com https://*.gstatic.com data: blob:;
font-src https://fonts.gstatic.com;
style-src 'nonce-{style value}' https://fonts.googleapis.com;
worker-src blob:;
Trang HTML mẫu
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" nonce="{style value}">
<style nonce="{style value}">...</style>
...
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap" async nonce="{script value}"></script>
<script nonce="{script value}"> function initMap() { ... } </script>
</body>
</html>
Thêm CSP vào danh sách cho phép
Nếu bạn đã thiết lập CSP danh sách cho phép, vui lòng tham khảo danh sách các miền của Google Maps. Bạn nên tham khảo tài liệu này và ghi chú phát hành Maps JavaScript API để luôn nắm bắt thông tin mới nhất, đồng thời thêm mọi miền dịch vụ mới vào danh sách cho phép (nếu cần).
Những trang web tải Maps JavaScript API từ một miền API cũ của Google (ví dụ: maps.google.com) hoặc một miền dành riêng cho khu vực (ví dụ: maps.google.fr) cũng phải thêm những tên miền này vào chế độ cài đặt CSP script-src, như minh hoạ trong ví dụ sau:
script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.googleapis.com https://*.gstatic.com *.google.com https://*.ggpht.com *.googleusercontent.com blob:;
img-src 'self' https://*.googleapis.com https://*.gstatic.com *.google.com *.googleusercontent.com data:;
frame-src *.google.com;
connect-src 'self' https://*.googleapis.com *.google.com https://*.gstatic.com data: blob:;
font-src https://fonts.gstatic.com;
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
worker-src blob:;