← Back to HTML Course | Chapter 7: Advanced APIs & Features | Lesson 11 of 11

HTML Security

सोचिए आप एक खूबसूरत घर में रहते हैं, लेकिन आप अपना सामने वाला दरवाज़ा पूरा खुला छोड़ देते हैं, चाबी ताले में लगी रहने देते हैं, और अपनी पर्सनल डायरी मेलबॉक्स पर रख देते हैं। किसी के लिए अंदर आकर आपका सामान ले जाना बेहद आसान होगा। HTML security आपके सामने वाले दरवाज़े को लॉक करने जैसा है। चूंकि HTML कोड सीधे यूज़र के ब्राउज़र के अंदर चलता है, यह malicious हमलों के लिए संवेदनशील होता है। अपने कोड को सुरक्षित बनाना सीखना ज़रूरी है ताकि आपके यूज़र अकाउंट्स सुरक्षित रहें, आपकी फाइलें सुरक्षित रहें, और हैकर्स संवेदनशील डेटा चुरा न पाएं।

HTML Client-Side कमज़ोरियाँ

चूंकि HTML सीधे यूज़र के ब्राउज़र के अंदर प्रोसेस होता है, इसलिए यह client-side अटैक्स का निशाना बन सकता है। अपने फॉर्म्स, लिंक्स, और एम्बेडेड फ्रेम्स को सुरक्षित रखना अपनी साइट और अपने यूज़र्स की सुरक्षा के लिए ज़रूरी है।

Note: सभी यूज़र इनपुट्स को हमेशा client-side और server-side दोनों पर validate और sanitize करें।
Warning: कभी भी सिर्फ client-side डेटा पर भरोसा न करें, क्योंकि यूज़र आसानी से ब्राउज़र चेक्स को बायपास करके malicious स्क्रिप्ट्स सबमिट कर सकते हैं।

उदाहरण: HTML Client-Side Vulnerabilities

markup
<form action="/submit" method="post">
  <input type="text" name="comment">
</form>

Cross-Site Scripting (XSS) रोकथाम

Cross-Site Scripting (XSS) तब होता है जब हैकर्स आपकी टेक्स्ट फील्ड्स में मैलिशियस स्क्रिप्ट्स इंजेक्ट करते हैं, जो फिर दूसरे यूज़र्स के ब्राउज़र्स के अंदर चलती हैं। सभी यूज़र इनपुट्स को escape और sanitize करना XSS अटैक्स को रोकने के लिए ज़रूरी है।

Note: यूज़र इनपुट्स को HTML टैग्स के रूप में चलाए बिना सुरक्षित रूप से दिखाने के लिए कैरेक्टर एंटिटी कोड्स (जैसे < और >) का उपयोग करें।
Warning: यूज़र इनपुट्स को escape न करने पर हैकर्स आपके यूज़र्स की कुकीज़, session tokens, और संवेदनशील डेटा चुरा सकते हैं।

उदाहरण: Cross-Site Scripting (XSS) Prevention

markup
<p>User comment: &lt;script&gt;alert('hacked')&lt;/script&gt;</p>

Content Security Policies (CSP)

एक Content Security Policy (CSP) एक सुरक्षित HTTP हेडर या meta टैग है जो यह परिभाषित करता है कि ब्राउज़र किन डोमेन्स से स्क्रिप्ट्स, स्टाइल्स, और एसेट्स लोड कर सकता है, जिससे अनऑथराइज़्ड स्क्रिप्ट्स को चलने से असरदार तरीके से रोका जा सकता है।

Note: अपनी साइट को cross-site scripting (XSS) अटैक्स से बचाने के लिए एक सख्त Content Security Policy सेट करें।
Warning: CSP कॉन्फ़िगर न करने पर अनधिकृत स्क्रिप्ट्स लोड हो सकती हैं और आपके विज़िटर्स का डेटा चुरा सकती हैं।

उदाहरण: Content Security Policies (CSP)

markup
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

noopener से Hyperlinks को सुरक्षित करना

जब आप target="_blank" का उपयोग करके किसी बाहरी वेबसाइट को लिंक करते हैं, तो नया खुला टैब window.opener प्रॉपर्टी का उपयोग करके आपके मूल वेबपेज को एक्सेस और मैनिपुलेट कर सकता है, जिससे आपके यूज़र्स को किसी मैलिशियस साइट पर रीडायरेक्ट किया जा सकता है।

इस कमज़ोरी को tab-nabbing कहा जाता है।

Note: नए टैब में खुलने वाले सभी लिंक्स पर हमेशा rel="noopener noreferrer" एट्रिब्यूट शामिल करें।
Warning: target="_blank" वाले लिंक्स पर rel="noopener noreferrer" न जोड़ने से आपके पेज पर सिक्योरिटी की खामी बन जाती है।

उदाहरण: Securing Hyperlinks with noopener

markup
<a href="https://example.com" target="_blank" rel="noopener noreferrer">External link</a>

HTTPS और सुरक्षित कनेक्शन लागू करना

असुरक्षित HTTP कनेक्शन्स का उपयोग करने से हैकर्स को इंटरनेट पर ट्रांसमिट होते समय यूज़र डेटा को इंटरसेप्ट और चुराने का मौका मिलता है। HTTPS (जो कनेक्शन को एन्क्रिप्ट करता है) लागू करना अपनी साइट और अपने यूज़र्स की सुरक्षा के लिए ज़रूरी है।

Note: सभी असुरक्षित HTTP रिक्वेस्ट्स को अपने-आप HTTPS पर रीडायरेक्ट करने के लिए अपने वेब सर्वर पर redirect नियम सेट करें।
Warning: असुरक्षित HTTP कनेक्शन हैकर्स को man-in-the-middle हमले चलाने और आपके पेज पर malicious कोड इंजेक्ट करने की अनुमति देते हैं।

उदाहरण: Enforcing HTTPS and Secure Connections

markup
<link rel="stylesheet" href="https://example.com/styles.css">

CSRF की बुनियादी बातें

Cross-Site Request Forgery, यानी CSRF, किसी लॉग्ड-इन यूज़र के ब्राउज़र को धोखा देकर, बिना यूज़र की जानकारी के, उस साइट पर एक अनचाही रिक्वेस्ट सबमिट करवाता है जिस पर वह ऑथेंटिकेटेड है, जैसे पैसे ट्रांसफर करना।

यह इसलिए काम करता है क्योंकि ब्राउज़र अपने-आप रिक्वेस्ट्स के साथ कुकीज़ जोड़ देते हैं, यहाँ तक कि किसी मैलिशियस थर्ड-पार्टी पेज से ट्रिगर हुई रिक्वेस्ट्स के साथ भी।

Note: Django जैसे मॉडर्न फ्रेमवर्क्स एक hidden token फील्ड का उपयोग करके डिफ़ॉल्ट रूप से CSRF प्रोटेक्शन शामिल करते हैं — इसे डिसेबल करने के बजाय हमेशा इस प्रोटेक्शन को इनेबल रखें।
Warning: किसी फॉर्म को टेस्ट करना आसान बनाने के लिए CSRF प्रोटेक्शन बंद करना एक खतरनाक आदत है, जो कभी-कभी गलती से प्रोडक्शन कोड में भी पहुंच जाती है।

उदाहरण: CSRF Basics

markup
<form action="/transfer" method="post">
  <input type="hidden" name="csrf_token" value="abc123">
</form>
Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.