Bu belgede, Maps JavaScript API için web sitesi İçerik Güvenliği Politikası'nın (CSP) nasıl yapılandırılacağıyla ilgili öneriler sunulmaktadır. Son kullanıcılar çok çeşitli tarayıcı türleri ve sürümleri kullandığından geliştiricilerin bu örneği referans olarak kullanmaları ve başka İGP ihlali gerçekleşmeyene kadar ince ayar yapmaları önerilir.
İçerik Güvenliği Politikası hakkında daha fazla bilgi edinin.
Katı CSP
Web sitenizi siteler arası komut dosyası çalıştırma (XSS) saldırılarına karşı korumaya yardımcı olmak için izin verilenler listesi İGP yerine katı İGP kullanmanızı öneririz. Maps JavaScript API, tek seferlik rastgele sayı tabanlı katı İGP kullanımını destekler. Web siteleri, hem script hem de style öğelerini tek seferlik rastgele sayı değeriyle doldurmalıdır. Maps JavaScript API, dahili olarak bu tür ilk öğeyi bulur ve tek seferlik rastgele sayı değerini, API komut dosyası tarafından eklenen stil veya komut dosyası öğelerine uygular.
Aşağıdaki örnekte yer alan 'strict-dynamic' anahtar kelimesi, geçerli bir tek seferlik rastgele sayıya sahip bir komut dosyasının diğer komut dosyalarını yüklemesine olanak tanır. Sayfanız, Maps JavaScript API'yi tek seferlik rastgele sayı ile yüklediğinden API, ihtiyaç duyduğu ek komut dosyalarını yükleyebilir. Bu nedenle, script-src içinde herhangi bir Google alanını listelemeniz gerekmez. 'strict-dynamic' özelliğini destekleyen tarayıcılar, örnekteki https: kaynağını yoksayar. Bu kaynak, yalnızca eski tarayıcılar için bir yedektir.
Örnek
Aşağıdaki örnekte, yerleştirildiği HTML sayfasıyla birlikte örnek bir CSP gösterilmektedir:
Örnek İçerik Güvenliği Politikası
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:;
Örnek HTML sayfası
<!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>
CSP'yi izin verilenler listesine ekleme
İzin verilenler listesi CSP'si oluşturduysanız lütfen Google Haritalar alan adları listesine bakın. Güncel kalmak için bu dokümana ve Maps JavaScript API sürüm notlarına göz atmanızı ve gerekirse yeni hizmet alanlarını izin verilenler listesine eklemenizi öneririz.
Maps JavaScript API'yi eski bir Google API'leri alanından (ör. maps.google.com) veya bölgeye özgü bir alandan (ör. maps.google.fr) yükleyen web siteleri, aşağıdaki örnekte gösterildiği gibi bu alan adlarını CSP script-src ayarına da eklemelidir:
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:;