हमारे तेजी से ग्राहकों को HTTP हेडर में हेरफेर करना पसंद है। हेडर का सही संयोजन चुनना सबसे अच्छी चीजों में से एक है जो आप अपनी साइट को सुरक्षित रखने और इसके प्रदर्शन में महत्वपूर्ण योगदान देने के लिए कर सकते हैं।

अधिकांश डेवलपर्स महत्वपूर्ण और उपयोगी HTTP हेडर के बारे में जानते हैं। सबसे प्रसिद्ध Content-Type और Content-Length , ये लगभग सार्वभौमिक हेडर हैं। लेकिन हाल ही में, Content-Security-Policy बढ़ाने के लिए Content-Security-Policy और Strict-Transport-Security जैसे हेडर का उपयोग किया गया है, और प्रदर्शन में सुधार के लिए Link rel=preload को Link rel=preload किया गया है। ब्राउज़रों में व्यापक समर्थन के बावजूद, केवल कुछ ही उनका उपयोग करते हैं।

पिछले लेख में, हमने अनावश्यक हेडर को देखा। अब यह पता करें कि आपकी साइट के लिए वास्तव में कौन से हेडर कॉन्फ़िगर किए जाने चाहिए।

घर का पाठ

इंटरनेट पर कई सेवाएं हैं जो आपकी साइट का विश्लेषण करेंगी और सलाह देंगी कि किस हेडर को जोड़ना है। मैंने मोज़िला के सिक्योरिटीहेडर्स.आईओ और ऑब्जर्वेटरी को फास्टली नेटवर्क से अपने ज्ञान और डेटा को पूरक करने के लिए देखा।

आपकी साइट पर क्या शीर्षक होने चाहिए

तो आपके सर्वर प्रतिक्रियाओं में मुख्य हेडर क्या हैं? सुरक्षा में सुधार के लिए सबसे अधिक जिम्मेदार हैं:

सामग्री-सुरक्षा-नीति । ब्राउज़र में फ़ायरवॉल के रूप में कार्य करता है। यदि आपकी साइट से छेड़छाड़ की जाती है, तो यह अनपेक्षित मेजबानों से कनेक्शन को रोककर नुकसान को सीमित करने में मदद करता है। बहुत महत्वपूर्ण शीर्षक। यदि आपके पास यह नहीं है, तो आपको इसे सक्षम करने की आवश्यकता है।

संदर्भ-नीति । पृष्ठ छोड़ते समय Referer शीर्षलेख में शामिल करने के लिए विवरण के स्तर को समायोजित करता है। उन साइटों पर डेटा रिसाव को रोकने में मदद करता है जहां लिंक जाते हैं। अत्यधिक की सिफारिश की।

सख्त-परिवहन-सुरक्षा । नियमित HTTP का उपयोग करके साइट से जुड़ने के किसी भी प्रयास को रोकता है। MiTM हमलों को रोकने में मदद करता है और साइट सुरक्षा में सुधार करता है। भी अत्यधिक की सिफारिश की।

एक्स-एक्सएसएस-सुरक्षा । क्रॉस-साइट स्क्रिप्टिंग हमलों के कुछ रूपों को रोकता है, स्क्रिप्ट निष्पादन को रोकना यदि किसी दस्तावेज़ से उसी रूप में कुछ मार्कअप अनुरोध में मौजूद है। उदाहरण के लिए, यदि आप एड्रेस /index.html?foo=<script>alert('foo');</script> <script>alert('foo');</script> साथ एक पेज लोड करते हैं, और पेज के सोर्स कोड में <script>alert('foo');</script> उसके बाद स्क्रिप्ट ब्लॉक कर दी जाती है। इन दिनों, शीर्षक काफी हद तक सीएसपी द्वारा प्रतिस्थापित किया गया है।

एक्स-कंटेंट-टाइप-ऑप्शंस । ब्राउज़रों को जावास्क्रिप्ट-जैसी सामग्री को निष्पादित करने से रोकने के लिए मान को सेट करें, जिसके लिए सही सामग्री प्रकार मान सेट नहीं है। माइम मिक्सिंग जैसे हमलों को रोकता है, और हाल ही में क्रोम का उपयोग साइट अलगाव को सक्रिय करने के लिए किया गया है। समय के साथ, यह डिफ़ॉल्ट रूप से ब्राउज़रों के बेहतर व्यवहार के कारण कम महत्वपूर्ण हो जाता है, लेकिन वर्तमान में अभी भी सर्वोत्तम प्रथाओं में से एक है।

कोर । क्रॉस-ऑरिजनल रिसोर्स शेयरिंग हेडर आपको किसी अन्य स्रोत से स्क्रिप्ट के साथ URL लोड करने की अनुमति देता है। यह एक वैकल्पिक शीर्षक है। इस प्रकार के शीर्षक अनुमेय हैं, निषेधात्मक नहीं हैं, इसलिए उनकी अनुपस्थिति अधिकतम स्तर की सुरक्षा प्रदान करती है।

अन्य प्रदर्शन के लिए हैं:

समय-अनुमति-उत्पत्ति । समय डेटा का अनुरोध करने के लिए उपकरण की निगरानी की निगरानी देता है। यह कई मामलों में मूल्यवान जानकारी है, यह Google Analytics या Speedcurve जैसे विश्लेषिकी की गुणवत्ता में बहुत सुधार कर सकता है।

लिंक rel = प्रीलोड । ब्राउज़र को महत्वपूर्ण संसाधनों के बारे में बताता है, जिन्हें डाउनलोड किया जाना चाहिए, भले ही उनके लिए तत्काल आवश्यकता न हो। फोंट और महत्वपूर्ण सीएसएस के लिए हेडर का उपयोग करें।

सर्वर समय उस सर्वर से समय की जानकारी प्रदान करता है जो नेविगेशन टाइमिंग एपीआई और रिसोर्स टाइमिंग एपीआई को सर्वर पर कार्यों को पूरा करने में लगने वाले समय के बारे में अधिक विस्तृत जानकारी के साथ प्रदान करता है (उदाहरण के लिए, "हमने MySQL में कितना समय बिताया")। प्रदर्शन डेटा की निगरानी के लिए महान, RUM बीकन उपकरणों के साथ संयुक्त।

आइए उनमें से कुछ पर एक नज़र डालें।

सामग्री सुरक्षा नीति: इसे अपने भीतर रखें

यद्यपि Content-Security-Policy सबसे महत्वपूर्ण शीर्षकों में से एक है, यह सबसे क्रिया में से एक भी है। HTTPArchive में मुझे मिला सबसे बड़ा CSP हैडर 10K था। दस किलोबाइट । एकल शीर्ष लेख मान के लिए। इससे भी बदतर: जबकि प्रतिक्रिया निकायों को प्रवाहित किया जा सकता है, हेडर अधिकांश सर्वर और प्रॉक्सी द्वारा बफर किए जाते हैं और केवल पूर्ण होने के बाद प्रेषित होते हैं। HTTP / 2 संपीड़न उन्हें अनुरोधों के बीच याद रखने में थोड़ी मदद करता है, लेकिन इसका मतलब यह नहीं है कि 10KB हेडर ठीक है।

इसके अलावा, अपने उत्तर के पूरे पहले पैकेट को भरकर, आप ब्राउज़र को केवल सामग्री प्राप्त करने के लिए सर्वर पर दो कॉल करने के लिए बाध्य कर सकते हैं। इसलिए न केवल अनावश्यक हेडर को हटाने के बारे में सोचें, बल्कि मौजूदा लोगों को अधिकतम करने के बारे में भी सोचें।

संदर्भ-नीति

चूंकि अनादिकाल (जो कि 90 के दशक के अंत से वेब दुनिया में है), ब्राउज़र Referer हेडर भेजते हैं (और गलत लिखते हैं )। अपने अधिकांश इतिहास के लिए, यह एनालिटिक्स टूल में पृष्ठों के बीच उपयोगकर्ता आंदोलनों को ट्रैक करने के सबसे महत्वपूर्ण तरीकों में से एक रहा है, साथ ही साथ आने वाले ट्रैफ़िक की उत्पत्ति को भी समझता है। हालांकि, बाद वाला महत्वपूर्ण गोपनीयता मुद्दों से जुड़ा हुआ है। यदि मैं ईमेल क्लाइंट से ईमेल में लिंक पर क्लिक करता हूं, तो साइट मेरे ईमेल डोमेन को निर्धारित कर सकती है। इससे भी बदतर, पूर्ण URL जानना जिसमें से आप आए थे, जिसमें अनुरोध तर्क शामिल हैं, आपकी अंतिम खोज क्वेरी या व्यक्तिगत डेटा जैसे ईमेल पते की शर्तों को प्रकट कर सकते हैं।

आप उपलब्ध रेफ़र-पॉलिसी विकल्पों में से कई रणनीतियों का चयन कर सकते हैं, लेकिन मेरी सामान्य सलाह "मूल-जब-क्रॉस-मूल है", जो रेफ़र को सभी सामान्य अनुरोधों के लिए सक्षम बनाता है, लेकिन लिंक केवल एक डोमेन से दूसरे डोमेन पर जाने पर मान को काटता है । आपकी अपनी साइट के भीतर लिंक में एक संपूर्ण रेफ़रर शामिल होता है।

सीडीएन एज सर्वर पर सर्वर-टाइमिंग माप

Server-Timing में कई अच्छी विशेषताएं हैं, और उनमें से एक यह है कि आप प्रतिक्रिया में कई उदाहरण जोड़ सकते हैं - और उन सभी को एक ब्राउज़र या आरयूएम टूल में जोड़ा जाएगा। अर्थात्, यदि अनुरोध सर्वर प्रोसेसिंग के कई चरणों से गुजरता है - जैसा कि सीडीएन में होता है - प्रत्येक चरण अपने समय मैट्रिक्स को जोड़ता है, और वे एक-दूसरे के साथ संघर्ष नहीं करते हैं। यहां बताया गया है कि फास्टली सर्विस कॉन्फ़िगरेशन में VCL का उपयोग करके हेडर पर फास्टली मेट्रिक्स कैसे जोड़ें:

 add resp.http.Server-Timing = fastly_info.state {", fastly;desc="Edge time";dur="} time.elapsed.msec; 

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

सर्वर टाइम मेट्रिक्स जावास्क्रिप्ट में प्रदर्शन ऑब्जेक्ट के माध्यम से उपलब्ध हैं और क्रोम Devtools नेटवर्क फलक में प्रदर्शित होते हैं:



वर्तमान में, अल्पविकसित स्तर पर संकेतकों का दृश्य। लेकिन वे इस पर कड़ी मेहनत कर रहे हैं, इसलिए भविष्य में उपयोगकर्ता इंटरफ़ेस में काफी सुधार होने की संभावना है।

सभी सही शीर्ष लेख जोड़ें।

तेजी से सभी सुरक्षा और प्रदर्शन हेडर जोड़ने के लिए एक अच्छी जगह है। निम्नलिखित दर्शाता है कि वे सभी एक साथ कैसे दिखते हैं। इस कोड को अनुरोध प्रवाह के वितरण चरण में जोड़ें, उन मानों को बदलना जो आपकी साइट के लिए उपयुक्त हैं ( यह जांचने के लिए कॉपी और पेस्ट न करने की कोशिश करें कि मान आपकी साइट के लिए उपयुक्त हैं):

 set resp.http.Content-Security-Policy = "default-src 'self'; frame-ancestors 'self'"; set resp.http.Referer-Policy = "origin-when-cross-origin"; set resp.http.Strict-Transport-Security = "max-age=86400"; # Increase when working well in prod (a year is a common final value) set resp.http.X-XSS-Protection = "1; mode=block"; set resp.http.X-Content-Type-Options = "nosniff"; if (req.http.Origin) { # Consider checking this against an allowlist set resp.http.Access-Control-Allow-Origin = req.http.Origin; set resp.http.Access-Control-Allow-Methods = "GET,HEAD,POST,OPTIONS"; } add resp.http.Server-Timing = fastly_info.state {", fastly;desc="Edge time";dur="} time.elapsed.msec; set resp.http.Timing-Allow-Origin = "*"; set resp.http.Link = "</fonts/myfont.otf>; rel=preload; as=font"; 

अगले लेख में, हम कुछ सबसे विदेशी हेडर देखेंगे जो ब्राउज़रों में मानकीकृत और कार्यान्वित करना शुरू कर रहे हैं।