CSP का पूरा नाम Content Security Policy है। यह एक वेब सुरक्षा (Web Security) तकनीक है जिसका उपयोग वेबसाइटों और वेब एप्लिकेशन को Cross-Site Scripting (XSS), Clickjacking, और अन्य कोड-इंजेक्शन हमलों से बचाने के लिए किया जाता है।
नीचे विस्तार से बताया गया है कि CSP क्या है, यह कैसे काम करता है, और इसके मुख्य घटक क्या हैं:
🔐 CSP (Content Security Policy) क्या है?
Content Security Policy (CSP) एक सिक्योरिटी फीचर है जिसे वेब ब्राउज़र द्वारा सपोर्ट किया जाता है। इसका उद्देश्य वेब पेज पर लोड होने वाले कंटेंट (जैसे स्क्रिप्ट्स, स्टाइल्स, इमेजेस आदि) को नियंत्रित करना है, ताकि मालिशस (खतरनाक) कोड वेबसाइट में न घुस सके।
⚙️ CSP कैसे काम करता है?
CSP एक HTTP Header होता है (Content-Security-Policy) जिसे सर्वर द्वारा ब्राउज़र को भेजा जाता है। इस हेडर में यह बताया जाता है कि कौन-कौन से स्रोत (sources) से कंटेंट लोड किया जा सकता है।
उदाहरण के लिए:
Content-Security-Policy: default-src 'self'; script-src 'self' https://apis.google.com
इस पॉलिसी का मतलब:
- सभी डिफॉल्ट संसाधन (
default-src) सिर्फ वेबसाइट के अपने डोमेन से लोड होंगे ('self'), - लेकिन जावास्क्रिप्ट (
script-src) गूगल एपीआईज़ से भी लोड की जा सकती है।
🧱 CSP के मुख्य निर्देश (Directives)
CSP में कई तरह के निर्देश (directives) होते हैं, जिनका उपयोग विभिन्न प्रकार के कंटेंट को नियंत्रित करने के लिए किया जाता है:
| Directive | मतलब |
|---|---|
default-src | सभी प्रकार के कंटेंट के लिए डिफ़ॉल्ट स्रोत |
script-src | स्क्रिप्ट्स (JavaScript) कहां से लोड हों |
style-src | CSS स्टाइल्स कहां से लोड हों |
img-src | इमेजेस कहां से लोड हों |
connect-src | Ajax, WebSocket जैसी कनेक्शनों के लिए स्रोत |
font-src | फॉन्ट्स कहां से लोड हों |
frame-src | <iframe> में कौन-कौन से स्रोत लोड हों |
object-src | Flash, Java applets आदि के लिए स्रोत |
media-src | ऑडियो और वीडियो स्रोत |
report-uri | CSP उल्लंघन रिपोर्ट भेजने के लिए URL (अब पुराना) |
report-to | नई रिपोर्टिंग पद्धति |
🚫 CSP क्यों ज़रूरी है?
✨ सुरक्षा लाभ:
- ✅ XSS से सुरक्षा – इनजेक्ट की गई स्क्रिप्ट्स को रोकता है।
- ✅ डाटा चोरी से सुरक्षा – खतरनाक डोमेन्स पर डाटा जाने से रोकता है।
- ✅ क्लिकजैकिंग रोकता है – iframe को कंट्रोल करने में मदद करता है।
- ✅ थर्ड-पार्टी कोड पर नियंत्रण – आप तय करते हैं कि कौन सा कंटेंट कहां से लोड होगा।
🧪 CSP लागू करने के तरीके
- HTTP Header के ज़रिए:
सर्वर पर हेडर जोड़ें:Content-Security-Policy: script-src 'self'; - HTML
<meta>टैग के माध्यम से:<meta http-equiv="Content-Security-Policy" content="script-src 'self'">
नोट: HTTP Header तरीका अधिक प्रभावी और सुरक्षित माना जाता है।
⚠️ CSP लागू करते समय सावधानियाँ
- यदि आपकी साइट में inline scripts या styles हैं, तो वे CSP के कारण ब्लॉक हो सकते हैं।
- आपको
nonceयाhashका उपयोग करना पड़ सकता है अगर inline स्क्रिप्ट्स ज़रूरी हैं। - ग़लत पॉलिसी लागू करने से आपकी वेबसाइट का कुछ हिस्सा टूट सकता है।
✅ उदाहरण: एक मजबूत CSP पॉलिसी
Content-Security-Policy:
default-src 'self';
script-src 'self' https://trusted.cdn.com;
style-src 'self' https://fonts.googleapis.com;
img-src 'self' data:;
font-src https://fonts.gstatic.com;
object-src 'none';
frame-ancestors 'none';
upgrade-insecure-requests;
🔍 CSP रिपोर्टिंग
CSP का एक फीचर है कि अगर कोई पॉलिसी का उल्लंघन होता है, तो आप उसे रिपोर्ट कर सकते हैं। इसके लिए:
Content-Security-Policy-Report-Only: <पॉलिसी>; report-to <endpoint>
इससे आप लाइव साइट पर CSP को तोड़े बिना टेस्ट कर सकते हैं।
।
