يقدّم هذا المستند اقتراحات حول كيفية ضبط سياسة أمان المحتوى (CSP) للموقع الإلكتروني في ما يتعلق بواجهة برمجة تطبيقات JavaScript لـ "خرائط Google". بما أنّ المستخدِمين النهائيين يستخدمون مجموعة كبيرة ومتنوّعة من أنواع المتصفحات وإصداراتها، ننصح المطوّرين باستخدام هذا المثال كمرجع، مع إجراء تعديلات دقيقة إلى أن لا تحدث أي انتهاكات أخرى لسياسة أمان المحتوى.
مزيد من المعلومات حول سياسة أمان المحتوى.
سياسة أمان المحتوى المتشدّدة
ننصح باستخدام سياسة أمان المحتوى المتشدّدة
بدلاً من سياسة أمان المحتوى للقائمة المسموح بها من أجل الحدّ من احتمالية حدوث هجمات أمنية.
تتيح واجهة برمجة تطبيقات JavaScript لـ "خرائط Google" استخدام سياسة أمان المحتوى المتشدّدة المستندة إلى قيمة nonce.
يجب أن تملأ المواقع الإلكترونية كلاً من العنصرَين script وstyle بقيمة nonce.
داخليًا، ستعثر واجهة برمجة تطبيقات JavaScript لـ "خرائط Google" على أول عنصر من هذا النوع، وستطبّق قيمة nonce الخاصة به على عناصر النمط أو النصوص البرمجية التي يتم إدراجها بواسطة النص البرمجي لواجهة برمجة التطبيقات على التوالي.
مثال
يوضّح المثال التالي نموذجًا لسياسة أمان المحتوى، بالإضافة إلى صفحة HTML التي تم تضمينها فيها:
نموذج لسياسة أمان المحتوى
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:;
نموذج لصفحة HTML
<!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>
سياسة أمان المحتوى للقائمة المسموح بها
إذا كنت قد أعددت سياسة أمان المحتوى للقائمة المسموح بها، يُرجى الاطّلاع على قائمة نطاقات "خرائط Google". ننصحك بالاطّلاع على هذا المستند وعلى ملاحظات إصدار واجهة برمجة تطبيقات JavaScript لـ "خرائط Google" للبقاء على اطّلاع على آخر المستجدّات، وإضافة أي نطاق خدمة جديد إلى القائمة المسموح بها إذا لزم الأمر.
يجب أن تتضمّن المواقع الإلكترونية التي تحمّل واجهة برمجة تطبيقات JavaScript لـ "خرائط Google" من نطاق قديم من Google APIs (مثل maps.google.com) أو نطاق خاص بمنطقة معيّنة (مثل maps.google.fr) أيضًا أسماء النطاقات هذه في إعداد script-src لسياسة أمان المحتوى، كما هو موضّح في المثال التالي:
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:;