मुझे "प्रीकनेक्ट" <लिंक> पर "क्रॉसोरिगिन" विशेषता का उपयोग कब करना चाहिए?

Question

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

प्री-कनेक्ट शुरू करने के लिए, उपयोगकर्ता एजेंट को ये चरण चलाने होंगे:

[...]

3. चलो corsAttributeState तत्व की crossoriginसामग्री विशेषता की वर्तमान स्थिति है ।
4. चलो क्रेडेंशियल्स एक बूलियन मान सेट करने के लिए है true।
5. यदि corsAttributeState है Anonymousऔर मूल वर्तमान दस्तावेज़ की उत्पत्ति के बराबर नहीं है, तो क्रेडेंशियल सेट करें false।
6. उत्पत्ति और प्रमाण के साथ संबंध प्राप्त करने का प्रयास ।

मैं इस एल्गोरिथ्म की व्याख्या करना नहीं जानता। अगर मैं किसी CDN के लिए प्रीकनेक्ट कर रहा हूं, जो किसी को भी किसी भी प्रकार के क्रेडेंशियल्स के बिना अपनी सामग्री डाउनलोड करने देगा, तो मुझे "क्रॉसोरिगिन" विशेषता के लिए किस मूल्य का उपयोग करना चाहिए?

Comments

संबंधित: stackoverflow.com/questions/55520102/…

— jakub.g

Answer 1

मैं उसी चीज को खोज रहा था और मुझे यह मिल गया

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

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

यदि आप उस विशेष क्रॉस डोमेन में कुछ क्रेडेंशियल्स भेजना चाहते हैं, तो आप क्रॉसोरिगिन को मान सेट कर सकते हैं crossorigin = use-credentialsअन्यथा मुझे लगता है कि डिफ़ॉल्ट मान अनाम है।

Comments

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

— माइकल क्रैंशव

Answer 2

अब तक मैं इसके उपयोग को समझता हूं crossorigin, विशेष रूप से इसके मूल्यों के संदर्भ में anonymousऔर use-credentials, आपको crossorigin="use-credentials"मामले में उपयोग करना चाहिए :

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

इसके अतिरिक्त आपके द्वारा उद्धृत दस्तावेज़ में मुझे यह और वह मिला । लेकिन वास्तव में प्रलेखन भ्रामक है और इसमें गलत वर्तनी है: पहला इसे कहता है use-credentials, दूसरा - user-credentials।

वैसे भी, मेरी समझ में:

• नहीं के crossoriginबराबर हैcrossorigin="anonymous"
• crossorigin बराबरी crossorigin="use-credentials"

शायद कोई मुझे सही करेगा।

पुनश्च : विषय के लिए मोज़िला पृष्ठ का वर्तमान संस्करण का अर्थ है:

अनाम कीवर्ड के रूप में एक अमान्य कीवर्ड और एक रिक्त स्ट्रिंग को संभाला जाएगा।

इसका मतलब है: crossoriginबिल्कुल नहीं, crossoriginया crossorigin="use_credentials"सभी के रूप में नियंत्रित किया जाता है crossorigin="anonymous"।

Comments

मुझे विश्वास है, जैसा कि एमडीएन में उल्लेख किया गया है , डिफ़ॉल्ट रूप से (अर्थात, जब विशेषता निर्दिष्ट नहीं होती है), तो कॉर्स का उपयोग नहीं किया जाता है। इसके अलावा, केवल सेटिंग के crossoriginबराबर है crossorigin="anonymous"।

— शेक्सपियर

Answer 3

यह दो बातों पर निर्भर करता है:

1. डाउनलोड की जाने वाली संपत्ति का प्रकार (जो यह निर्धारित करता है कि कोर का उपयोग किया जाएगा)
2. क्या लक्ष्य सर्वर कॉर्स कनेक्शन के लिए क्रेडेंशियल का उपयोग करता है

JQuery के लिए, आप उपयोग नहीं करेंगेcrossorigin । लिपियों को डाउनलोड करने के लिए कॉर्स का उपयोग करने वाले संसाधनों के प्रकारों में से नहीं हैं ।

दूसरी ओर फोंट, कॉर्स का उपयोग करते हैं।

• यदि पृष्ठ केवल CORS का उपयोग करने वाले संसाधन लाएगा, तो crossoriginविशेषता शामिल करें ।
• यदि पृष्ठ केवल ऐसे संसाधन लाएगा, जो CORS का उपयोग नहीं करते हैं, तो छोड़ें crossorigin। अगर
• यदि पृष्ठ दोनों प्रकार के संसाधन लाएगा, तो आपको दो संसाधन संकेत की आवश्यकता हो सकती है । (पूर्ण प्रकटीकरण, लिंक मेरी निजी साइट पर है। :-)) किसी ने बताया कि आपको HTTP / 2 के लिए दो संकेत की आवश्यकता नहीं हो सकती है। मेरे पास परीक्षण करने का समय नहीं है।

यहां स्टैक ओवरफ्लो पोस्ट है जहां मुझे उसी मुद्दे का सामना करना पड़ा।

जब कोर्स क्रेडेंशियल आवश्यक होते हैं तो मैंने इसमें प्रवेश नहीं किया है। मैंने एक उदाहरण नहीं देखा है जहाँ उनकी आवश्यकता है, इसलिए संभावना है कि आप सुरक्षित crossoriginरहें (यानी `क्रॉसोरिगिन =" अनाम ")।

Answer 4

अब तक के सभी उत्तर या तो सरलीकृत, अपूर्ण या आंशिक रूप से गलत प्रतीत होते हैं (विषय जटिल है, चीजों को भ्रमित नाम दिया गया है और अच्छी तरह से प्रलेखित नहीं है!), इसलिए यहां मेरी समझ है:

द्वारा बनाए गए कनेक्शन का पुन: उपयोग करने में सक्षम होने के लिए <link rel=preconnect>, चीजें इस बात पर निर्भर करती हैं कि आप किस तरह की सामग्री लाना चाहते हैं, कहां से, क्या अनुरोध ब्राउज़र क्रेडेंशियल्स भेज देगा (जो कि स्पष्ट रूप से या अंतर्निहित रूप से ब्राउज़र द्वारा स्थापित किया जा सकता है):

अनुरोध समान-मूल है ( example.comअनुरोध सब - सोर्स से example.com)

preconnectपहली जगह में सभी के लिए कोई ज़रूरत नहीं है; ब्राउज़र काफी समय तक पेज लोड करने के बाद कनेक्शन को खुला रखता है। यदि कई कनेक्शन खोले जाने हैं, तो ब्राउज़र स्वयं ही यह तय कर लेता है कि क्या और कितने को खोलना है (यदि सर्वर TLS हैंडशेक, ब्राउज़र सेटिंग्स आदि में HTTP / 2 समर्थन की घोषणा करता है)

जाँच की जा सकती है : क्या होगा यदि समान-मूल अनुरोध में crossoriginविशेषता है: क्या इसका उपयोग या अनदेखा किया गया है?

अनुरोध क्रॉस-example.com ऑरिजिनल है ( अनुरोध सब - सोर्स से another.com)

• यदि वास्तविक अनुरोध किया है crossoriginविशेषता स्पष्ट रूप से सेट HTML में ( crossOriginजे एस में - मामला महत्वपूर्ण है), प्रीकनेक्ट भी यह होना आवश्यक है, एक ही मूल्य के साथ (शायद मामलों को छोड़कर जहां यह मतलब नहीं है और crossoriginनजरअंदाज कर दिया है - पूरी तरह से के लिए स्पष्ट नहीं मुझे अभी तक)
• और, यदि अनुरोध हो तो <script type=module>: जाँच की जाए
• बाकी, यदि अनुरोध है और के लिए "पुराने स्कूल" अनुरोध <img>, <style type=stylesheet>, <iframe>, क्लासिक <script>आदि (HTML या जे एस के माध्यम से शुरू) के बिना crossoriginस्पष्ट रूप से निर्दिष्ट है, तो प्रीकनेक्ट चाहिए नहीं crossoriginविशेषता सेट।
• और, यदि अनुरोध एक क्रॉस- ऑरिजनल फॉन्ट रिक्वेस्ट है, तो प्री - कनेक्ट होना चाहिएcrossorigin=anonymous
• और, यदि अनुरोध एक क्रॉस-मूल है fetch या XHR:
  • अगर यह क्रेडेंशियल मोड में किया जाता है (यानी कुकीज़ संलग्न हैं या HTTP बेसिक कोर का उपयोग किया जाता है, तो भ्रूण के credentials !== omitमामले में , इसका मतलब है ; XHR के मामले में withCredentials === true:): प्री-कनेक्ट होना चाहिएcrossorigin=use-credentials
  • अगर यह क्रेडेंशियल मोड में नहीं है: प्री-कनेक्ट होना चाहिए crossorigin=anonymous

अंतिम स्थिति (लाने / एक्सएचआर) के लिए, Chrome / Firefox devtools में नेटवर्क पैनल पर जाएं, एक अनुरोध पर राइट क्लिक करें, और copy as fetchएक ड्रॉपडाउन से चुनें । यह जेएस का एक स्निपेट बनाएगा, जो आपको बताएगा कि क्या अनुरोध कोर-सक्षम ( "mode"=="cors") और क्रेडेंशियल ( "credentials"=="include"|"same-origin") है।

ध्यान दें, हालांकि ऊपर दी गई ट्रिक नॉन-एक्सएचआर / भ्रूण अनुरोधों के लिए सही ढंग से काम नहीं करती है, क्योंकि उदाहरण के लिए fetchऔर <img>कनेक्शन स्थापित करने के लिए विभिन्न एल्गोरिदम का उपयोग करें, जैसा कि पहले बताया गया है।

अंत में, HTML में, <link ...crossorigin>=== <link ...crossorigin=anonymous>।

अतिरिक्त नोट्स और लिंक:

• फ़ायरफ़ॉक्स में, पूर्व-कनेक्ट काम नहीं करता है भले ही यह माना जाता है
• प्रीकनेक्ट काम कर रहा है या नहीं, यह जांचने के तीन तरीके
• ब्राउज़र में कुछ सीमाएँ हैं कि कितने समानांतर DNS अनुरोध हो सकते हैं
• WebPageTest पर कस्टम स्क्रिप्ट इंजेक्शन के साथ प्री-कनेक्ट के साथ प्रयोग करना