M

MLOG

हिन्दी

CORS (क्रॉस-ओरिजिन रिसोर्स शेयरिंग) के रहस्यों को जानें और अपने वेब एप्लीकेशन में क्रॉस-डोमेन अनुरोधों को सुरक्षित रूप से सक्षम करना सीखें। यह व्यापक गाइड बेसिक्स से लेकर एडवांस्ड कॉन्फ़िगरेशन तक सब कुछ कवर करता है, जिससे विभिन्न ऑरिजिन्स के बीच सहज और सुरक्षित संचार सुनिश्चित होता है।

CORS की गुत्थी सुलझाना: क्रॉस-ओरिजिन रिसोर्स शेयरिंग के लिए एक विस्तृत गाइड

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

सेम-ऑरिजिन पॉलिसी क्या है?

CORS में गहराई से जाने से पहले, सेम-ऑरिजिन पॉलिसी (SOP) को समझना महत्वपूर्ण है। SOP वेब ब्राउज़र में लागू एक मौलिक सुरक्षा तंत्र है। इसका उद्देश्य एक वेबसाइट पर मौजूद दुर्भावनापूर्ण स्क्रिप्ट को दूसरी वेबसाइट पर संवेदनशील डेटा तक पहुंचने से रोकना है। एक ऑरिजिन को प्रोटोकॉल (जैसे, HTTP या HTTPS), डोमेन (जैसे, example.com), और पोर्ट नंबर (जैसे, 80 या 443) के संयोजन द्वारा परिभाषित किया जाता है। दो URLs को एक ही ऑरिजिन का माना जाता है यदि वे समान प्रोटोकॉल, डोमेन और पोर्ट साझा करते हैं।

उदाहरण:

SOP स्क्रिप्ट को किसी भिन्न ऑरिजिन से रिसोर्सेज तक पहुंचने से प्रतिबंधित करती है, जब तक कि इसे अनुमति देने के लिए CORS जैसे विशिष्ट उपाय मौजूद न हों।

CORS क्यों आवश्यक है?

हालांकि सेम-ऑरिजिन पॉलिसी सुरक्षा के लिए महत्वपूर्ण है, यह प्रतिबंधात्मक भी हो सकती है। कई आधुनिक वेब एप्लीकेशन विभिन्न सर्वरों, जैसे APIs या कंटेंट डिलीवरी नेटवर्क (CDNs) से डेटा प्राप्त करने पर निर्भर करते हैं। CORS, SOP में ढील देने और सुरक्षा बनाए रखते हुए वैध क्रॉस-ऑरिजिन अनुरोधों की अनुमति देने का एक नियंत्रित तरीका प्रदान करता है।

एक ऐसे परिदृश्य पर विचार करें जहां http://example.com पर होस्ट किए गए एक वेब एप्लीकेशन को http://api.example.net पर होस्ट किए गए API सर्वर से डेटा प्राप्त करने की आवश्यकता है। CORS के बिना, ब्राउज़र SOP के कारण इस अनुरोध को ब्लॉक कर देगा। CORS API सर्वर को यह स्पष्ट रूप से निर्दिष्ट करने की अनुमति देता है कि किन ऑरिजिन्स को उसके रिसोर्सेज तक पहुंचने की अनुमति है, जिससे वेब एप्लीकेशन सही ढंग से कार्य कर पाता है।

CORS कैसे काम करता है: मूल बातें

CORS क्लाइंट (ब्राउज़र) और सर्वर के बीच आदान-प्रदान किए गए HTTP हेडर्स की एक श्रृंखला के माध्यम से काम करता है। सर्वर इन हेडर्स का उपयोग ब्राउज़र को यह सूचित करने के लिए करता है कि क्या उसे अनुरोधित रिसोर्स तक पहुंचने की अनुमति है। इसमें शामिल प्रमुख HTTP हेडर Access-Control-Allow-Origin है।

परिदृश्य 1: सरल अनुरोध (Simple Request)

एक "सरल अनुरोध" एक GET, HEAD, या POST अनुरोध है जो विशिष्ट मानदंडों को पूरा करता है (उदाहरण के लिए, Content-Type हेडर application/x-www-form-urlencoded, multipart/form-data, या text/plain में से एक है)। इस मामले में, ब्राउज़र सीधे सर्वर को अनुरोध भेजता है, और सर्वर Access-Control-Allow-Origin हेडर के साथ प्रतिक्रिया देता है।

क्लाइंट अनुरोध (http://example.com से):

GET /data HTTP/1.1
Host: api.example.net
Origin: http://example.com

सर्वर प्रतिक्रिया (http://api.example.net से):

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.com
Content-Type: application/json

{
  "data": "सर्वर से कुछ डेटा"
}

इस उदाहरण में, सर्वर Access-Control-Allow-Origin: http://example.com के साथ प्रतिक्रिया देता है, यह दर्शाता है कि http://example.com से अनुरोधों की अनुमति है। यदि अनुरोध में ऑरिजिन Access-Control-Allow-Origin हेडर में मान से मेल नहीं खाता है (या यदि हेडर मौजूद नहीं है), तो ब्राउज़र प्रतिक्रिया को ब्लॉक कर देगा और क्लाइंट-साइड स्क्रिप्ट को डेटा तक पहुंचने से रोक देगा।

परिदृश्य 2: प्रीफ्लाइट अनुरोध (जटिल अनुरोधों के लिए)

अधिक जटिल अनुरोधों के लिए, जैसे कि PUT, DELETE जैसे HTTP तरीकों का उपयोग करने वाले या कस्टम हेडर्स वाले अनुरोधों के लिए, ब्राउज़र HTTP OPTIONS विधि का उपयोग करके एक "प्रीफ्लाइट" अनुरोध करता है। यह प्रीफ्लाइट अनुरोध वास्तविक अनुरोध भेजने से पहले सर्वर से अनुमति मांगता है। सर्वर उन हेडर्स के साथ प्रतिक्रिया देता है जो निर्दिष्ट करते हैं कि कौन से तरीके, हेडर्स और ऑरिजिन्स की अनुमति है।

क्लाइंट प्रीफ्लाइट अनुरोध (http://example.com से):

OPTIONS /data HTTP/1.1
Host: api.example.net
Origin: http://example.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header

सर्वर प्रतिक्रिया (http://api.example.net से):

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Methods: GET, PUT, DELETE
Access-Control-Allow-Headers: X-Custom-Header, Content-Type
Access-Control-Max-Age: 3600

हेडर्स की व्याख्या:

यदि सर्वर की प्रीफ्लाइट प्रतिक्रिया इंगित करती है कि अनुरोध की अनुमति है, तो ब्राउज़र वास्तविक अनुरोध के साथ आगे बढ़ता है। अन्यथा, ब्राउज़र अनुरोध को ब्लॉक कर देता है।

क्लाइंट वास्तविक अनुरोध (http://example.com से):

PUT /data HTTP/1.1
Host: api.example.net
Origin: http://example.com
X-Custom-Header: some-value
Content-Type: application/json

{
  "data": "अपडेट किया जाने वाला कुछ डेटा"
}

सर्वर प्रतिक्रिया (http://api.example.net से):

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.com
Content-Type: application/json

{
  "status": "डेटा सफलतापूर्वक अपडेट किया गया"
}

सामान्य CORS हेडर्स

यहां उन प्रमुख CORS हेडर्स का विवरण दिया गया है जिन्हें आपको समझने की आवश्यकता है:

विभिन्न सर्वर-साइड भाषाओं में CORS

CORS को लागू करने में आमतौर पर आपके सर्वर-साइड एप्लीकेशन को उपयुक्त CORS हेडर्स भेजने के लिए कॉन्फ़िगर करना शामिल होता है। यहां विभिन्न भाषाओं और फ्रेमवर्क में ऐसा करने के उदाहरण दिए गए हैं:

Node.js with Express

आप cors मिडलवेयर पैकेज का उपयोग कर सकते हैं:

const express = require('express');
const cors = require('cors');

const app = express();

// सभी ऑरिजिन्स के लिए CORS सक्षम करें (प्रोडक्शन में सावधानी से उपयोग करें)
app.use(cors());

// वैकल्पिक रूप से, विशिष्ट ऑरिजिन्स के लिए CORS कॉन्फ़िगर करें
// app.use(cors({
//   origin: 'http://example.com'
// }));

app.get('/data', (req, res) => {
  res.json({ message: 'यह सभी ऑरिजिन्स के लिए CORS-सक्षम है!' });
});

app.listen(3000, () => {
  console.log('सर्वर पोर्ट 3000 पर चल रहा है');
});

Python with Flask

आप Flask-CORS एक्सटेंशन का उपयोग कर सकते हैं:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

# वैकल्पिक रूप से, विशिष्ट ऑरिजिन्स के लिए CORS कॉन्फ़िगर करें
# CORS(app, resources={r"/api/*": {"origins": "http://example.com"}})

@app.route("/data")
def hello():
    return {"message": "यह सभी ऑरिजिन्स के लिए CORS-सक्षम है!"}

if __name__ == '__main__':
    app.run(debug=True)

Java with Spring Boot

आप एनोटेशन या कॉन्फ़िगरेशन क्लास का उपयोग करके अपने स्प्रिंग बूट एप्लीकेशन में CORS कॉन्फ़िगर कर सकते हैं:

एनोटेशन का उपयोग करना:

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin(origins = "http://example.com") // http://example.com से अनुरोधों की अनुमति दें
public class DataController {

    @GetMapping("/data")
    public String getData() {
        return "यह http://example.com के लिए CORS-सक्षम है!";
    }
}

कॉन्फ़िगरेशन का उपयोग करना:

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/data")
                .allowedOrigins("http://example.com") // http://example.com से अनुरोधों की अनुमति दें
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*");
    }
}

PHP

 "यह http://example.com के लिए CORS-सक्षम है!");
echo json_encode($data);
?>

CORS और सुरक्षा विचार

जबकि CORS क्रॉस-ऑरिजिन अनुरोधों को सक्षम करता है, इसे सुरक्षित रूप से लागू करना महत्वपूर्ण है। यहां कुछ महत्वपूर्ण विचार दिए गए हैं:

CORS समस्याओं का निवारण

CORS समस्याओं को डीबग करना निराशाजनक हो सकता है। यहां कुछ सामान्य समस्याएं और उन्हें हल करने के तरीके दिए गए हैं:

डीबगिंग उपकरण:

उन्नत CORS परिदृश्य

हालांकि मूल CORS अवधारणाएं अपेक्षाकृत सीधी हैं, कुछ और उन्नत परिदृश्यों पर विचार करना चाहिए:

CORS सर्वोत्तम अभ्यास

सुरक्षित और कुशल CORS कार्यान्वयन सुनिश्चित करने के लिए, इन सर्वोत्तम प्रथाओं का पालन करें:

निष्कर्ष

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

हमेशा सुरक्षा को प्राथमिकता देना याद रखें और अत्यधिक अनुमेय CORS कॉन्फ़िगरेशन का उपयोग करने से बचें। अपनी CORS सेटिंग्स के सुरक्षा प्रभावों पर सावधानीपूर्वक विचार करके, आप अपने एप्लीकेशन और डेटा को अनधिकृत पहुंच से बचा सकते हैं।

हमें उम्मीद है कि इस गाइड ने आपको CORS की गुत्थी सुलझाने में मदद की है। हैप्पी कोडिंग!