मेटा जानकारी से संबंधित टैग्स
यह लेख मेटा-जानकारी से संबंधित टैग्स के बारे में समझाता है।
यह <meta> टैग की व्याख्या करता है, जिसमें SEO, रेस्पॉन्सिव डिज़ाइन, और Content-Security-Policy से संबंधित बिंदु शामिल हैं।
YouTube Video
मेटा जानकारी से संबंधित टैग्स
<meta> टैग
1<meta charset="UTF-8">
2<meta name="viewport" content="width=device-width, initial-scale=1.0"><meta>टैग HTML दस्तावेज़ के लिए मेटाडेटा प्रदान करता है। मेटाडेटा पृष्ठ पर प्रदर्शित नहीं होता है लेकिन खोज इंजनों और ब्राउज़रों द्वारा उपयोग किया जाता है।<meta>टैग पृष्ठ वर्णन, कीवर्ड, लेखक जानकारी, और अनुक्रियाशील डिज़ाइन सेटिंग्स के लिए उपयोग किया जाता है।
<meta name="viewport"> टैग
1<meta name="viewport" content="width=device-width, initial-scale=1"><meta name="viewport">टैग विभिन्न उपकरणों पर वेब पृष्ठों के लेआउट और स्केलिंग को नियंत्रित करता है। यह सामान्यतः अनुक्रियाशील डिज़ाइन में मोबाइल उपकरणों पर सही प्रदर्शन सुनिश्चित करने के लिए उपयोग किया जाता है।
<meta name="description"> टैग
1<meta name="description" content="An example webpage"><meta name="description">टैग वेब पृष्ठ की सामग्री का संक्षेप में वर्णन करने के लिए उपयोग किया जाता है। खोज इंजन इस विवरण का उपयोग खोज परिणामों में पृष्ठ का सारांश प्रदर्शित करने के लिए करते हैं।
<meta name="keywords"> टैग
1<meta name="keywords" content="HTML, CSS, JavaScript"><meta name="keywords">टैग पृष्ठ की सामग्री से संबंधित कीवर्ड की एक सूची प्रदान करता है। खोज इंजन इन कीवर्ड का उपयोग पृष्ठ सामग्री को बेहतर ढंग से समझने के लिए करते हैं।
<meta name="author"> टैग
1<meta name="author" content="John Doe"><meta name="author">टैग वेब पृष्ठ के लेखक को निर्दिष्ट करता है। इस जानकारी का मुख्य रूप से खोज इंजन और उपकरणों द्वारा सही ढंग से पृष्ठ के लेखक की पहचान करने के लिए उपयोग किया जाता है।
<meta http-equiv="refresh"> टैग
1<meta http-equiv="refresh" content="5; url=https://example.com"><meta http-equiv="refresh">टैग का उपयोग एक निष्चित समय के बाद पृष्ठ को स्वचालित रूप से रिफ्रेश करने या किसी अन्य URL पर पुनः निर्देशित करने के लिए किया जाता है। यह पृष्ठ को पुनः लोड करने या उपयोगकर्ता को पुनः निर्देशित करने के लिए उपयोगी है।
<meta http-equiv="cache-control"> टैग
1<meta http-equiv="cache-control" content="no-cache"><meta http-equiv="cache-control">टैग वेब पृष्ठ के कैशिंग व्यवहार को नियंत्रित करने के लिए उपयोग किया जाता है। यह निर्दिष्ट कर सकता है कि पृष्ठ को कैश करना है या पुनः मान्य करना है जब इसे फिर से एक्सेस किया जाए।
<meta http-equiv="expires"> टैग
1<meta http-equiv="expires" content="Tue, 01 Jan 2025 00:00:00 GMT"><meta http-equiv="expires">टैग पेज सामग्री के लिए समाप्ति तिथि निर्धारित करता है। एक बार निर्दिष्ट तिथि के पार हो जाने के बाद, सामग्री पुरानी हो जाती है, और ब्राउज़र को एक नया संस्करण पुनः प्राप्त करने के लिए प्रेरित किया जाता है।
<meta http-equiv="X-UA-Compatible"> टैग
1<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta http-equiv="X-UA-Compatible">टैग का उपयोग इंटरनेट एक्सप्लोरर के लिए अनुकूलता मोड निर्दिष्ट करने के लिए किया जाता है। यह टैग सुनिश्चित करता है कि ब्राउज़र पृष्ठ प्रदर्शित करने के लिए रेंडरिंग इंजन का उचित संस्करण उपयोग करता है।
<meta http-equiv="content-security-policy"> टैग
HTML meta टैग में http-equiv="content-security-policy" एट्रिब्यूट ब्राउज़र में कुछ विशिष्ट सुरक्षा नियम लागू करने के लिए एक फ़ंक्शन है, जो वेब पेज की सुरक्षा को बढ़ाने के लिए उपयोग किया जाता है। इस एट्रिब्यूट का उपयोग करके, वेबसाइट डेवलपर्स संसाधन लोडिंग और स्क्रिप्ट निष्पादन के संबंध में नीतियां सेट कर सकते हैं ताकि XSS (क्रॉस-साइट स्क्रिप्टिंग) और डेटा इंजेक्शन जैसे हमलों को रोका जा सके।
Content-Security-Policy क्या है?
Content-Security-Policy (CSP) एक प्रकार का HTTP हेडर है जिसका उपयोग यह नियंत्रित करने के लिए किया जाता है कि एक वेब पेज किन बाहरी संसाधनों (चित्र, स्क्रिप्ट, स्टाइलशीट आदि) को लोड कर सकता है और किस प्रकार के कोड निष्पादित हो सकते हैं। यह आमतौर पर HTTP हेडर के रूप में भेजा जाता है, लेकिन इसे HTML के अंदर meta टैग का उपयोग करके भी परिभाषित किया जा सकता है। यह विधि सर्वर साइड पर हेडर सेट करने के बजाय क्लाइंट साइड पर CSP को निर्दिष्ट करने की अनुमति देती है।
उदाहरण के लिए, आप HTML meta टैग में CSP को निम्नलिखित रूप से सेट कर सकते हैं:।
1<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://example.com; script-src 'self' https://apis.google.com">इस उदाहरण में, निम्नलिखित नीतियाँ सेट की गई हैं:
default-src 'self': मूल रूप से, सभी संसाधन केवल उसी मूल (स्वयं) से लोड किए जाते हैं।img-src https://example.com: छवियां केवलhttps://example.comसे लोड की जाएंगी।script-src 'self' https://apis.google.com: स्क्रिप्ट्स केवल उसी मूल से याhttps://apis.google.comसे निष्पादित की जा सकती हैं।
http-equiv और HTTP हेडर के बीच अंतर
आमतौर पर, Content-Security-Policy को सर्वर से क्लाइंट तक HTTP हेडर के रूप में भेजा जाता है। हालांकि, यदि आप इसे meta टैग का उपयोग करके क्लाइंट साइड पर सेट करते हैं, तो इसे सीधे HTML में लिखा जा सकता है।
हालांकि, इसे HTTP हेडर के रूप में सेट करने और meta टैग के साथ निर्दिष्ट करने में कुछ महत्वपूर्ण अंतर हैं:
-
प्राथमिकता: HTTP हेडर के माध्यम से भेजे गए CSP को
metaटैग में निर्दिष्ट CSP पर प्राथमिकता दी जाती है। इसका मतलब यह है कि अगर CSP को सर्वर साइड पर सेट किया गया है, तो क्लाइंट साइड पर उपयोग किए गएmetaटैग द्वारा इसे ओवरराइड नहीं किया जा सकता। -
आवेदन समय: HTTP हेडर के माध्यम से निर्दिष्ट किया गया CSP पेज लोड होने से पहले लागू किया जाता है। दूसरी ओर,
metaटैग के माध्यम से निर्दिष्ट किया गया CSP तब लागू होता है जब HTML पार्स किया जा रहा है, इसलिए संसाधन पहले ही लोड हो सकते हैं।
CSP में उपलब्ध निर्देश
CSP में, विभिन्न निर्देशों का उपयोग उन नीतियों को निर्दिष्ट करने के लिए किया जाता है जो कुछ प्रकार के संसाधनों की लोडिंग और निष्पादन की अनुमति देती हैं या मना करती हैं। सामान्य निर्देश निम्नलिखित शामिल हैं:।
- default-src: सभी संसाधनों के लिए डिफ़ॉल्ट स्रोत नीति निर्दिष्ट करता है। यह उन संसाधनों पर लागू होता है जिन्हें अन्य निर्देशों द्वारा निर्दिष्ट नहीं किया गया है।
- script-src: जावास्क्रिप्ट के लिए स्रोत निर्दिष्ट करता है। XSS हमलों को रोकने के लिए, आप बाहरी साइटों से स्क्रिप्ट्स लोड करने को प्रतिबंधित कर सकते हैं।
- style-src: CSS के लिए स्रोत निर्दिष्ट करता है। बाहरी स्रोतों से स्टाइलशीट्स को लोड करने को प्रतिबंधित करके, आप अपनी साइट की शैली पर हमलों को रोक सकते हैं।
- img-src: छवियों के लिए स्रोत निर्दिष्ट करता है। आप बाहरी स्रोतों से छवियों को लोड करने को प्रतिबंधित कर सकते हैं।
- connect-src: XMLHttpRequests और WebSocket कनेक्शन के लिए अनुमत URLs निर्दिष्ट करता है। यह बाहरी API और WebSocket संचार की सुरक्षा सुनिश्चित करता है।
इन निदेशों को मिलाकर, आप अपनी वेब पेज पर संसाधनों के लिए विस्तृत नीतियां बना सकते हैं।
सुरक्षा बढ़ाने के लिए व्यावहारिक CSP सेटिंग्स
नीचे आपकी वेबसाइट की सुरक्षा को बढ़ाने के लिए CSP सेटिंग्स का एक उदाहरण दिया गया है। यह XSS हमलों और डेटा लीक के जोखिम को कम कर सकता है।
1<meta http-equiv="Content-Security-Policy"
2 content="default-src 'self'; script-src 'self' https://trusted-cdn.com; object-src 'none'; style-src 'self'; base-uri 'self'; form-action 'self';">इस विन्यास के साथ निम्नलिखित नीतियाँ लागू की गई हैं:
default-src 'self': सभी संसाधन केवल उसी स्रोत से लोड किए जाते हैं।script-src 'self' https://trusted-cdn.com: स्क्रिप्ट केवल उसी स्रोत या एक विश्वसनीय CDN से लोड की जाती हैं।object-src 'none':objectटैग का उपयोग नहीं किया गया है। यह Flash या प्लगइन-आधारित हमलों को रोकने के लिए है।स्टाइल-स्रोत 'स्वयं': स्टाइलशीट्स केवल मूल से ही लोड होती हैं।बेस-यूआरआई 'स्वयं':<base>टैग द्वारा सेट की गई URL बेस केवल मूल तक सीमित है।फॉर्म-क्रिया 'स्वयं': फ़ॉर्म प्रस्तुतिकरण गंतव्य केवल मूल तक सीमित है। यह फ़ॉर्म डाटा को बाहरी साइट्स पर भेजे जाने के जोखिम को कम करता है।
निष्कर्ष
http-equiv="content-security-policy" का उपयोग करके HTML के भीतर CSP को परिभाषित करके, वेबपृष्ठ की सुरक्षा को बढ़ाना संभव है। एक सही ढंग से कॉन्फ़िगर किया गया CSP एक शक्तिशाली उपकरण है जो XSS हमलों और डाटा लीक्स के जोखिम को कम करता है और आपकी वेबसाइट की सुरक्षा करता है।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।