tl; dr - प्रासंगिक भागों को खोजने के लिए आसान बनाने के लिए अंत में शीर्ष और सारांश में उत्तर है। सब कुछ पढ़ना हालांकि के रूप में यह समझने के लिए उपयोगी पृष्ठभूमि प्रदान करता है की सिफारिश की है क्यों कि देखकर कैसे बनाता है कैसे विभिन्न परिस्थितियों आसान में लागू होता है।
एक ही मूल नीति के बारे में
यह वही मूल नीति है । यह ब्राउज़रों द्वारा कार्यान्वित सुरक्षा सुविधा है।
आपका विशेष मामला यह दिखा रहा है कि इसे XMLHttpRequest के लिए कैसे लागू किया गया है (और यदि आपको भ्रूण का उपयोग करना है तो आपको समान परिणाम प्राप्त होंगे), लेकिन यह अन्य चीजों पर भी लागू होता है (जैसे कि चित्र <canvas>या दस्तावेज़ में लोड किए गए चित्र <iframe>), बस साथ थोड़ा अलग कार्यान्वयन।
(अजीब तरह से, यह सीएसएस फोंट पर भी लागू होता है, लेकिन ऐसा इसलिए है क्योंकि फाउंड्री डीआरएम पर जोर देते हैं और सुरक्षा मुद्दों के लिए नहीं जो समान उत्पत्ति नीति आमतौर पर शामिल होती हैं)।
एसओपी की आवश्यकता को प्रदर्शित करने वाले मानक परिदृश्य को तीन वर्णों के साथ प्रदर्शित किया जा सकता है :
- ऐलिस एक वेब ब्राउज़र वाला व्यक्ति है
- बॉब एक वेबसाइट चलाता है (
https://www.[website].com/आपके उदाहरण में)
- Mallory एक वेबसाइट चलाता है (
http://localhost:4300आपके उदाहरण में)
ऐलिस बॉब की साइट में लॉग इन है और वहां कुछ गोपनीय डेटा है। शायद यह एक कंपनी इंट्रानेट (लैन पर केवल ब्राउज़रों के लिए सुलभ) है, या उसका ऑनलाइन बैंकिंग (केवल एक उपयोगकर्ता नाम और पासवर्ड दर्ज करने के बाद आपको मिलने वाली कुकी के साथ सुलभ)।
ऐलिस मैलोरी की वेबसाइट पर जाता है, जिसमें कुछ जावास्क्रिप्ट हैं, जो ऐलिस के ब्राउज़र को बॉब की वेबसाइट (उसके कुकीज़, आदि के साथ उसके आईपी पते से) के लिए एक HTTP अनुरोध करने का कारण बनता है। यह उपयोग करने XMLHttpRequestऔर पढ़ने के रूप में सरल हो सकता है responseText।
ब्राउज़र की समान उत्पत्ति नीति यह बताती है कि जावास्क्रिप्ट बॉब की वेबसाइट द्वारा लौटाए गए डेटा को पढ़ने से रोकता है (जो बॉब और ऐलिस मैलोरी को एक्सेस नहीं करना चाहते हैं)। (ध्यान दें कि आप उदाहरण के लिए, <img>मूल के पार एक तत्व का उपयोग करके एक छवि प्रदर्शित कर सकते हैं क्योंकि छवि की सामग्री जावास्क्रिप्ट (या Mallory) के संपर्क में नहीं है ... जब तक कि आप उस मिश्रण में कैनवास नहीं फेंकते हैं जिस स्थिति में आप एक ही-उत्पत्ति उत्पन्न करेंगे उल्लंघन त्रुटि)।
जब आप यह नहीं सोचते हैं तो समान उत्पत्ति नीति क्यों लागू होती है
किसी भी दिए गए URL के लिए यह संभव है कि SOP की आवश्यकता न हो। सामान्य परिदृश्यों के एक जोड़े जहां यह मामला है:
- एलिस, बॉब और मैलोरी एक ही व्यक्ति हैं।
- बॉब पूरी तरह से सार्वजनिक जानकारी प्रदान कर रहा है
... लेकिन ब्राउज़र में यह जानने का कोई तरीका नहीं है कि क्या उपरोक्त में से कोई भी सत्य है, इसलिए विश्वास स्वचालित नहीं है और SOP लागू है। ब्राउज़र द्वारा डेटा अलग वेबसाइट पर दिए जाने से पहले अनुमति स्पष्ट रूप से दी जानी चाहिए।
क्यों समान उत्पत्ति नीति केवल एक वेब पेज में जावास्क्रिप्ट पर लागू होती है
ब्राउज़र एक्सटेंशन *, ब्राउज़र डेवलपर टूल में नेटवर्क टैब और पोस्टमैन जैसे एप्लिकेशन इंस्टॉल किए गए सॉफ़्टवेयर हैं। वे केवल एक वेबसाइट से जावास्क्रिप्ट पर डेटा अलग वेबसाइट पर नहीं भेज रहे हैं क्योंकि आप उस अलग वेबसाइट पर गए थे । सॉफ़्टवेयर स्थापित करना आमतौर पर अधिक सचेत विकल्प होता है।
कोई तीसरा पक्ष (मैलोरी) नहीं है जिसे जोखिम माना जाता है।
*क्रॉस-ऑरिजनल मुद्दों से बचने के लिए ब्राउज़र एक्सटेंशन को सावधानीपूर्वक लिखा जाना चाहिए। उदाहरण के लिए Chrome दस्तावेज़ देखें ।
आप जेएस के साथ पढ़ने के बिना पृष्ठ में डेटा क्यों प्रदर्शित कर सकते हैं
ऐसी कई परिस्थितियां हैं जहां मैलोरी की साइट किसी ब्राउज़र को किसी तीसरे पक्ष से डेटा प्राप्त करने और उसे प्रदर्शित करने का कारण बन सकती है (उदाहरण के <img>लिए एक छवि को प्रदर्शित करने के लिए एक तत्व जोड़कर )। मैलोरी के जावास्क्रिप्ट के लिए उस संसाधन में डेटा पढ़ना संभव नहीं है, हालांकि, केवल एलिस का ब्राउज़र और बॉब का सर्वर ऐसा कर सकते हैं, इसलिए यह अभी भी सुरक्षित है।
CORS
Access-Control-Allow-OriginHTTP प्रतिक्रिया हेडर में त्रुटि संदेश का हिस्सा है करने के लिए भेजा CORS मानक है जो बॉब स्पष्ट ऐलिस ब्राउज़र के माध्यम से डेटा का उपयोग करने के लिए मैलोरी की साइट के लिए अनुमति देनी अनुमति देता है।
एक बुनियादी कार्यान्वयन में सिर्फ शामिल होगा:
Access-Control-Allow-Origin: *
… प्रतिक्रिया हेडर में किसी भी वेबसाइट को डेटा पढ़ने की अनुमति देने के लिए।
Access-Control-Allow-Origin: http://example.com/
... केवल एक विशिष्ट साइट को इसे एक्सेस करने की अनुमति देगा, और बॉब गतिशील रूप से कई शीर्षकों को अनुमति देने के लिए Origin अनुरोध हेडर के आधार पर उत्पन्न कर सकता है , लेकिन सभी, साइटों को इसे एक्सेस करने के लिए नहीं।
बॉब की HTTP हेडर और / या सर्वर-साइड प्रोग्रामिंग लैंग्वेज पर प्रतिक्रिया हैडर किस प्रकार सेट करता है, इसकी बारीकियां। विभिन्न सामान्य कॉन्फ़िगरेशन के लिए गाइड का एक संग्रह है जो मदद कर सकता है।
एनबी: कुछ अनुरोध जटिल हैं और एक पूर्व- विकल्प विकल्प भेजते हैं जो सर्वर को जीईटी / पोस्ट / पीयूटी / जो भी अनुरोध जेएस बनाना चाहते हैं, भेजने से पहले जवाब देना होगा। कोर के कार्यान्वयन जो केवल Access-Control-Allow-Originविशिष्ट URL में जोड़ते हैं, अक्सर इससे जुड़ जाते हैं।
स्पष्ट रूप से कॉर्स के माध्यम से अनुमति देना कुछ ऐसा है जो बॉब केवल तभी करेंगे:
- डेटा निजी नहीं था या
- मालोरी पर भरोसा किया गया
लेकिन मैं बॉब नहीं हूँ!
इस शीर्षक को जोड़ने के लिए मैलोरी के लिए कोई मानक तंत्र नहीं है क्योंकि इसे बॉब की वेबसाइट से आना है, जिसे वह नियंत्रित नहीं करता है।
यदि बॉब एक सार्वजनिक एपीआई चला रहा है, तो कॉर्स को चालू करने के लिए एक तंत्र हो सकता है (शायद एक निश्चित तरीके से अनुरोध को प्रारूपित करके, या बॉब की साइट के लिए डेवलपर पोर्टल साइट में प्रवेश करने के बाद एक कॉन्फ़िगर विकल्प)। यह बॉब द्वारा लागू किया गया एक तंत्र होगा, हालांकि। मालोरी बॉब की साइट पर प्रलेखन को देख सकता है कि यह देखने के लिए कि क्या कुछ उपलब्ध है, या वह बॉब से बात कर सकता है और उसे कॉर्स को लागू करने के लिए कह सकता है।
त्रुटि संदेश जो "पूर्व-प्रतिक्रिया के लिए प्रतिक्रिया" का उल्लेख करते हैं
कुछ क्रॉस मूल अनुरोध पूर्वनिर्मित हैं ।
ऐसा तब होता है जब (मोटे तौर पर बोलते हुए) आप एक क्रॉस-मूल अनुरोध करने की कोशिश करते हैं:
- इसमें कुकीज़ जैसी साख शामिल है
- एक नियमित HTML फॉर्म के साथ उत्पन्न नहीं किया जा सकता है (जैसे कस्टम हेडर या सामग्री-प्रकार जिसे आप किसी फॉर्म में उपयोग नहीं कर सकते हैं
enctype)।
यदि आप सही ढंग से कुछ कर रहे हैं, जो पहले से प्रकाश की आवश्यकता है
इन मामलों में तब यह उत्तर बाकी भी लागू होता है, लेकिन आपको यह भी सुनिश्चित करने की आवश्यकता है कि सर्वर प्रीफ़लाइट अनुरोध के लिए सुन सकता है (जो होगा OPTIONS(और नहीं GET, POSTया जो भी आप भेजने की कोशिश कर रहे थे) और सही से जवाब दें Access-Control-Allow-Originहेडर लेकिन यह भी Access-Control-Allow-Methodsऔर Access-Control-Allow-Headersअपने विशिष्ट HTTP तरीकों या हेडर की अनुमति देने के लिए।
यदि आप गलती से प्रीफ़्लाइट को ट्रिगर कर रहे हैं
कभी-कभी लोग अजाक्स अनुरोधों का निर्माण करने की कोशिश करते समय गलतियां करते हैं, और कभी-कभी ये एक पूर्व-प्रकाश की आवश्यकता को ट्रिगर करते हैं। यदि एपीआई को क्रॉस-ऑरिजिन रिक्वेस्ट की अनुमति देने के लिए डिज़ाइन किया गया है, लेकिन इसके लिए ऐसी किसी भी चीज़ की आवश्यकता नहीं है, जिसे प्रीफ़्लाइट की आवश्यकता हो, तो यह एक्सेस को तोड़ सकता है।
आम गलतियाँ जो इसे ट्रिगर करती हैं:
Access-Control-Allow-Originअनुरोध पर अन्य CORS प्रतिक्रिया हेडर डाल करने की कोशिश कर रहा है । ये अनुरोध पर संबंधित नहीं हैं, कुछ भी मददगार नहीं हैं (एक अनुमति प्रणाली की बात क्या होगी जहां आप अपने आप को अनुमति दे सकते हैं?), और केवल प्रतिक्रिया पर प्रदर्शित होना चाहिए।Content-Type: application/jsonजीईटी अनुरोध पर एक हेडर लगाने की कोशिश कर रहा है जिसमें सामग्री का वर्णन करने के लिए कोई अनुरोध नहीं है (आमतौर पर जब लेखक भ्रमित करता है Content-Typeऔर Accept)।
इनमें से किसी भी मामले में, अतिरिक्त अनुरोध शीर्षलेख को हटाने से अक्सर प्रीफ़लाइट की आवश्यकता से बचने के लिए पर्याप्त होगा (जो एपीआई के साथ संचार करते समय समस्या को हल करेगा जो सरल अनुरोधों का समर्थन करता है लेकिन पूर्व-प्रकाशित अनुरोधों का नहीं)।
अपारदर्शी प्रतिक्रियाएं
कभी-कभी आपको HTTP अनुरोध करने की आवश्यकता होती है, लेकिन आपको प्रतिक्रिया पढ़ने की आवश्यकता नहीं है। जैसे अगर आप रिकॉर्डिंग के लिए सर्वर पर लॉग संदेश पोस्ट कर रहे हैं।
आप उपयोग कर रहे हैं एपीआई (बजाय ), तो आप इसे उपयोग CORS की कोशिश नहीं करने के लिए कॉन्फ़िगर कर सकते हैं।fetchXMLHttpRequest
ध्यान दें कि यह आपको ऐसा कुछ नहीं करने देगा जिसके लिए आपको CORS की आवश्यकता हो। आप प्रतिक्रिया नहीं पढ़ पाएंगे। आप एक अनुरोध करने में सक्षम नहीं होंगे जिसके लिए प्रीफ़्लाइट की आवश्यकता होती है।
यह आपको एक सरल अनुरोध करने देगा, प्रतिक्रिया नहीं देखेगा, और त्रुटि संदेशों के साथ डेवलपर कंसोल को नहीं भरेगा।
क्रोम त्रुटि संदेश द्वारा इसे कैसे समझाया जाता है, जब आप उपयोग fetchकरते हुए अनुरोध करते हैं और कोर के साथ प्रतिक्रिया देखने की अनुमति नहीं मिलती है:
CORS नीति द्वारा ' https://example.com/' https://example.net' मूल से' तक पहुँचने को अवरुद्ध कर दिया गया है: Access-Control-Allow-Originअनुरोधित संसाधन पर कोई ' ' हेडर मौजूद नहीं है। यदि एक अपारदर्शी प्रतिक्रिया आपकी आवश्यकताओं को पूरा करती है, तो संसाधन को अक्षम करने के लिए 'नो-कॉर्स' के लिए अनुरोध के मोड को सेट करें।
इस प्रकार:
fetch("http://example.com", { mode: "no-cors" });
कोर के विकल्प
JSONP
बॉब JSONP की तरह एक हैक का उपयोग करके डेटा भी प्रदान कर सकता है जो कि कैसे है कि कोर के साथ आने से पहले लोगों ने क्रॉस-मूल अजाक्स किया था।
यह एक जावास्क्रिप्ट प्रोग्राम के रूप में डेटा को प्रस्तुत करके काम करता है जो मैलोरी के पेज में डेटा को इंजेक्ट करता है।
यह आवश्यक है कि मैलरी ट्रस्ट बॉब को दुर्भावनापूर्ण कोड प्रदान न करें।
सामान्य विषय पर ध्यान दें: डेटा प्रदान करने वाली साइट को ब्राउज़र को यह बताना होगा कि किसी तीसरे पक्ष की साइट के लिए यह ठीक है कि वह ब्राउज़र को जो डेटा भेज रहा है, उसे एक्सेस कर सके।
चूंकि JSONP <script>एक जावास्क्रिप्ट प्रोग्राम के रूप में डेटा लोड करने के लिए एक तत्व को जोड़कर काम करता है , जो पृष्ठ में पहले से ही एक फ़ंक्शन को कॉल करता है, JSONP तकनीक का उपयोग एक URL पर करने का प्रयास करता है, जो JSON देता है वह विफल हो जाएगा - आमतौर पर एक CORB त्रुटि के साथ - क्योंकि JSON जावास्क्रिप्ट नहीं है
दो संसाधनों को एक ही मूल में ले जाएं
यदि HTML दस्तावेज़ JS में चलता है और अनुरोध किया जा रहा URL एक ही मूल पर है (समान योजना, होस्टनाम और पोर्ट साझा करते हुए) तो वे समान रूप से मूल नीति को डिफ़ॉल्ट रूप से अनुमति देते हैं। कोर की जरूरत नहीं है।
प्रॉक्सी
मैलोरी डेटा प्राप्त करने के लिए सर्वर-साइड कोड का उपयोग कर सकती है (जो वह तब अपने सर्वर से एलिस के ब्राउज़र को HTTP के माध्यम से हमेशा की तरह पास कर सकती थी)।
यह या तो होगा:
- कॉर्स हेडर जोड़ें
- प्रतिक्रिया JSONP में परिवर्तित करें
- HTML दस्तावेज़ के समान मूल पर मौजूद है
उस सर्वर-साइड कोड को थर्ड पार्टी (जैसे कोर्स एनीवेयर) द्वारा लिखा और होस्ट किया जा सकता है। इस के गोपनीयता निहितार्थों पर ध्यान दें: तीसरा पक्ष यह देख सकता है कि उनके सर्वर पर कौन क्या करता है।
बॉब को ऐसा करने के लिए कोई अनुमति देने की आवश्यकता नहीं होगी।
यहां सुरक्षा संबंधी निहितार्थ नहीं हैं क्योंकि यह केवल मालोरी और बॉब के बीच है। बॉब के लिए यह सोचने का कोई तरीका नहीं है कि मैलोरी ऐलिस है और मैलोरी को डेटा प्रदान करना है जिसे ऐलिस और बॉब के बीच गोपनीय रखा जाना चाहिए।
नतीजतन, मॉलोरी केवल सार्वजनिक डेटा पढ़ने के लिए इस तकनीक का उपयोग कर सकते हैं ।
हालांकि, ध्यान दें कि किसी और की वेबसाइट से सामग्री लेना और इसे अपने आप प्रदर्शित करना कॉपीराइट का उल्लंघन हो सकता है और आपको कानूनी कार्रवाई तक खोल सकता है।
वेब ऐप के अलावा कुछ और लिखना
जैसा कि "व्हाईट ओरिजिन पॉलिसी केवल एक वेब पेज में जावास्क्रिप्ट पर लागू होता है" अनुभाग में उल्लेख किया गया है, आप वेब पेज में जावास्क्रिप्ट नहीं लिखकर एसओपी से बच सकते हैं।
इसका मतलब यह नहीं है कि आप जावास्क्रिप्ट और एचटीएमएल का उपयोग जारी नहीं रख सकते, लेकिन आप इसे कुछ अन्य तंत्र, जैसे कि नोड-वेबकिट या फोनगैप का उपयोग करके वितरित कर सकते हैं।
ब्राउज़र एक्सटेंशन
समान उत्पत्ति नीति लागू होने से पहले प्रतिक्रिया में कोर्स हेडर को इंजेक्ट करना ब्राउज़र एक्सटेंशन के लिए संभव है।
ये विकास के लिए उपयोगी हो सकते हैं, लेकिन एक उत्पादन साइट के लिए व्यावहारिक नहीं हैं (आपकी साइट के प्रत्येक उपयोगकर्ता को एक ब्राउज़र एक्सटेंशन स्थापित करने के लिए कहें जो उनके ब्राउज़र की सुरक्षा सुविधा को अक्षम करता है) अनुचित है।
वे केवल सरल अनुरोधों के साथ काम करते हैं (असफल होने पर पहले से तैयार विकल्प अनुरोधों को संभालना)।
स्थानीय विकास सर्वर के साथ उचित विकास का माहौल
होना आमतौर पर एक बेहतर दृष्टिकोण है।
अन्य सुरक्षा जोखिम
ध्यान दें कि SOP / CORS XSS , CSRF , या SQL इंजेक्शन के हमलों को कम नहीं करता है जिन्हें स्वतंत्र रूप से नियंत्रित करने की आवश्यकता होती है।
सारांश
- आपके क्लाइंट-साइड कोड में ऐसा कुछ भी नहीं है जो किसी अन्य के सर्वर तक कॉर्स की पहुंच को सक्षम कर सके ।
- यदि आप सर्वर को नियंत्रित करते हैं तो अनुरोध किया जा रहा है: इसमें CORS अनुमतियां जोड़ें।
- यदि आप इसे नियंत्रित करने वाले व्यक्ति के साथ मित्रवत हैं: उन्हें इसके लिए CORS अनुमतियां जोड़ने के लिए प्राप्त करें।
- यदि यह एक सार्वजनिक सेवा है:
- क्लाइंट-साइड जावास्क्रिप्ट के साथ इसे एक्सेस करने के बारे में वे क्या कहते हैं यह देखने के लिए उनके एपीआई प्रलेखन पढ़ें:
- वे आपको विशिष्ट URL का उपयोग करने के लिए कह सकते हैं
- वे JSONP का समर्थन कर सकते हैं
- वे क्लाइंट-साइड कोड से बिल्कुल भी क्रॉस-ऑरिजिन एक्सेस का समर्थन नहीं कर सकते हैं (यह सुरक्षा के आधार पर एक जानबूझकर निर्णय हो सकता है, खासकर यदि आपको प्रत्येक अनुरोध में एक व्यक्तिगत एपीआई कुंजी पारित करना है)।
- सुनिश्चित करें कि आप एक पूर्व-अनुरोध अनुरोध को ट्रिगर नहीं कर रहे हैं जिसकी आपको आवश्यकता नहीं है। एपीआई साधारण अनुरोधों के लिए अनुमति दे सकता है लेकिन पूर्व-स्वीकृत अनुरोध नहीं।
- यदि उपरोक्त में से कोई भी लागू नहीं होता है: इसके बजाय अपने सर्वर से बात करने के लिए ब्राउज़र प्राप्त करें , और फिर अपने सर्वर को दूसरे सर्वर से डेटा प्राप्त करें और इसे पास करें। (थर्ड-पार्टी होस्टेड सर्विसेज भी हैं जो कॉर्स् हेडर्स को पबली एक्सेस करने योग्य संसाधनों से जोड़ते हैं जो आप उपयोग कर सकते हैं)।