Maps JavaScript API-এর জন্য কীভাবে ওয়েবসাইট কন্টেন্ট সিকিউরিটি পলিসি (CSP) কনফিগার করতে হয়, এই ডকুমেন্টে সেই বিষয়ে সাজেশন দেওয়া হয়েছে। যেহেতু শেষ ব্যবহারকারীরা বিভিন্ন ধরনের ব্রাউজার ও ভার্সন ব্যবহার করেন, তাই ডেভেলপারদের এই উদাহরণটি রেফারেন্স হিসেবে ব্যবহার করতে উৎসাহিত করা হয়। এর ফলে, আর কোনও CSP লঙ্ঘন না হওয়া পর্যন্ত ফাইন-টিউনিং করা যায়।
কন্টেন্ট নিরাপত্তা নীতি সম্পর্কে আরও জানুন।
কঠোর CSP
আপনার ওয়েবসাইটকে ক্রস-সাইট স্ক্রিপ্টিং (XSS) অ্যাটাক থেকে সুরক্ষিত রাখতে, আমরা
সাজেস্ট করি যে হোয়াইটলিস্ট CSP-র পরিবর্তে
স্ট্রিক্ট CSP ব্যবহার করুন। Maps JavaScript API-তে
ননস-ভিত্তিক স্ট্রিক্ট CSP ব্যবহার করা যায়। ওয়েবসাইটকে অবশ্যই script এবং style
এলিমেন্ট দুটিকে ননস ভ্যালু দিয়ে পপুলেট করতে হবে। Maps JavaScript API ইন্টার্নালি
এই ধরনের প্রথম এলিমেন্ট খুঁজে বের করবে এবং API স্ক্রিপ্ট দ্বারা ইনসার্ট করা স্টাইল বা স্ক্রিপ্ট
এলিমেন্টে সেটির ননস ভ্যালু প্রয়োগ করবে।
নিচের উদাহরণে 'strict-dynamic' কীওয়ার্ডটি এমন একটি স্ক্রিপ্টকে অনুমতি দেয় যাতে
অন্য স্ক্রিপ্ট লোড করার জন্য একটি বৈধ ননস আছে। আপনার পৃষ্ঠা ননস সহ Maps JavaScript API লোড করে বলে, API প্রয়োজনীয় অতিরিক্ত স্ক্রিপ্ট লোড করতে পারে, তাই আপনাকে script-src-এ কোনও Google ডোমেন তালিকাভুক্ত করতে হবে না। যেসব ব্রাউজারে 'strict-dynamic' কাজ করে, সেগুলি উদাহরণের https:
সোর্সকে উপেক্ষা করে; এটি শুধু পুরনো ব্রাউজারের জন্য ফলব্যাক।
উদাহরণ
নিচের উদাহরণে একটি স্যাম্পেল CSP দেখানো হয়েছে, সাথে একটি 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>
CSP-কে সাদাতালিকায় যোগ করুন
আপনি সাদাতালিকা CSP সেট-আপ করে থাকলে, Google Maps ডোমেনের তালিকা দেখুন। আপ-টু-ডেট থাকতে, এই ডকুমেন্ট ও Maps JavaScript API রিলিজ নোট পড়ে দেখার জন্য আমরা সাজেস্ট করি এবং প্রয়োজন হলে, অনুমোদিত তালিকায় নতুন কোনও পরিষেবা ডোমেন যোগ করুন।
যেসব ওয়েবসাইট Maps JavaScript API, পুরনো
Google API ডোমেন (যেমন maps.google.com) বা অঞ্চল-নির্দিষ্ট ডোমেন
(যেমন maps.google.fr) থেকে লোড করে, সেগুলিকে অবশ্যই তাদের
CSP 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:;