एक्सटेंशन की सुरक्षा बेहतर बनाएं

मेनिफ़ेस्ट V3 में सुरक्षा को बेहतर बनाना

ध्यान दें: मेनिफ़ेस्ट V3, आम तौर पर Chrome 88 या इसके बाद के वर्शन पर काम करता है. Chrome के बाद के वर्शन में जोड़ी गई एक्सटेंशन की सुविधाओं के लिए, सहायता से जुड़ी जानकारी के लिए एपीआई का रेफ़रंस दस्तावेज़ देखें. अगर आपके एक्सटेंशन को किसी खास एपीआई की ज़रूरत है, तो मेनिफ़ेस्ट फ़ाइल में Chrome का कम से कम वर्शन तय किया जा सकता है.

यह तीन सेक्शन में से आखिरी सेक्शन है. इसमें, एक्सटेंशन के सेवा वर्कर का हिस्सा नहीं होने वाले कोड में किए जाने वाले ज़रूरी बदलावों के बारे में बताया गया है. इसमें एक्सटेंशन की सुरक्षा को बेहतर बनाने के लिए ज़रूरी बदलावों के बारे में बताया गया है. दूसरे दो सेक्शन में, मेनिफ़ेस्ट V3 पर अपग्रेड करने के लिए अपने कोड को अपडेट करने और वेब अनुरोधों को ब्लॉक करने की सुविधा को बदलने के बारे में बताया गया है.

आर्बिट्रेरी स्ट्रिंग को चलाने की सुविधा हटाना

अब executeScript(), eval(), और new Function() का इस्तेमाल करके, बाहरी लॉजिक लागू नहीं किया जा सकता.

• सभी बाहरी कोड (JS, Wasm, CSS) को अपने एक्सटेंशन बंडल में ले जाएं.
• एक्सटेंशन बंडल से संसाधन लोड करने के लिए, स्क्रिप्ट और स्टाइल रेफ़रंस अपडेट करें.
• रनटाइम के दौरान रिसॉर्स यूआरएल बनाने के लिए, chrome.runtime.getURL() का इस्तेमाल करें.
• सैंडबॉक्स किए गए iframe का इस्तेमाल करें: सैंडबॉक्स किए गए iframe में, eval और new Function(...) अब भी काम करते हैं. ज़्यादा जानकारी के लिए, सैंडबॉक्स किए गए iframe के बारे में गाइड पढ़ें.

executeScript() तरीका अब tabs नेमस्पेस के बजाय, scripting नेमस्पेस में है. कॉल अपडेट करने के बारे में जानने के लिए, executeScript() को एक से दूसरी जगह ले जाना लेख पढ़ें.

कुछ खास मामलों में, अब भी अपनी पसंद की स्ट्रिंग को चलाया जा सकता है:

• insertCSS का इस्तेमाल करके, किसी वेब पेज में रिमोट होस्ट की गई स्टाइलशीट इंजेक्ट करना
• chrome.devtools का इस्तेमाल करने वाले एक्सटेंशन के लिए: inspectWindow.eval, जांचे गए पेज के संदर्भ में JavaScript को लागू करने की अनुमति देता है.
• डीबगर एक्सटेंशन, डीबग टारगेट में JavaScript को लागू करने के लिए, chrome.debugger.sendCommand का इस्तेमाल कर सकते हैं.

रिमोट तौर पर होस्ट किया गया कोड हटाना

मेनिफ़ेस्ट V3 में, आपके एक्सटेंशन का पूरा लॉजिक, एक्सटेंशन पैकेज का हिस्सा होना चाहिए. Chrome वेब स्टोर की नीति के मुताबिक, अब रिमोट तौर पर होस्ट की गई फ़ाइलों को लोड और चलाया नहीं जा सकता. उदाहरण के लिए:

• डेवलपर के सर्वर से ली गई JavaScript फ़ाइलें.
• CDN पर होस्ट की गई कोई भी लाइब्रेरी.
• तीसरे पक्ष की ऐसी लाइब्रेरी जो रिमोट होस्ट किए गए कोड को डाइनैमिक तौर पर फ़ेच करती हैं.

इस्तेमाल के उदाहरण और रिमोट होस्टिंग की वजह के आधार पर, अन्य तरीके उपलब्ध हैं. इस सेक्शन में, ध्यान में रखने के लिए कुछ तरीके बताए गए हैं. अगर आपको रिमोट होस्ट किए गए कोड से जुड़ी समस्याएं आ रही हैं, तो हमारे पास सलाह उपलब्ध है.

कॉन्फ़िगरेशन से मिलने वाली सुविधाएं और लॉजिक

आपका एक्सटेंशन, रनटाइम के दौरान किसी रिमोट कॉन्फ़िगरेशन (जैसे, JSON फ़ाइल) को लोड और कैश मेमोरी में सेव करता है. कैश मेमोरी में सेव किए गए कॉन्फ़िगरेशन से यह तय होता है कि कौनसी सुविधाएं चालू हैं.

रिमोट सेवा की मदद से बाहरी लॉजिक

आपका एक्सटेंशन, किसी रिमोट वेब सेवा को कॉल करता है. इससे, कोड को निजी रखा जा सकता है और ज़रूरत के हिसाब से उसमें बदलाव किया जा सकता है. साथ ही, Chrome Web Store पर एक्सटेंशन को फिर से सबमिट करने की ज़रूरत नहीं पड़ती.

रिमोट तरीके से होस्ट किए गए कोड को सैंडबॉक्स किए गए iframe में एम्बेड करना

रिमोट तरीके से होस्ट किया गया कोड, सैंडबॉक्स किए गए iframe में काम करता है. कृपया ध्यान दें कि अगर कोड को एम्बेड किए गए पेज के डीओएम का ऐक्सेस चाहिए, तो यह तरीका काम नहीं करता.

तीसरे पक्ष की लाइब्रेरी को बंडल करना

अगर React या Bootstrap जैसे किसी लोकप्रिय फ़्रेमवर्क का इस्तेमाल किया जा रहा है, जिसे पहले किसी बाहरी सर्वर से लोड किया जाता था, तो छोटी की गई फ़ाइलों को डाउनलोड किया जा सकता है. साथ ही, उन्हें अपने प्रोजेक्ट में जोड़ा जा सकता है और उन्हें स्थानीय तौर पर इंपोर्ट किया जा सकता है. उदाहरण के लिए:

<script src="./react-dom.production.min.js"></script>
<link href="./bootstrap.min.css" rel="stylesheet">

किसी लाइब्रेरी को सेवा वर्कर में शामिल करने के लिए, मेनिफ़ेस्ट में "background.type" बटन को "module" पर सेट करें और import स्टेटमेंट का इस्तेमाल करें.

चेतावनी: कुछ लाइब्रेरी (उदाहरण के लिए, Firebase), रनटाइम के दौरान ज़रूरत के हिसाब से अतिरिक्त कोड फ़ेच करती हैं. ऐसा होने से रोकने के लिए, आपके पास दो विकल्प हैं. आपके पास ऐसी लाइब्रेरी चुनने का विकल्प है जो रिमोट तौर पर होस्ट किए गए कोड का इस्तेमाल नहीं करती. बिल्ड के समय, सभी संभावित डाइनैमिक इंपोर्ट भी डाउनलोड किए जा सकते हैं. यहां Rollup.js का इस्तेमाल करके Firebase को बंडल करने वाली स्क्रिप्ट का उदाहरण दिया गया है.

टैब में इंजेक्ट की गई स्क्रिप्ट में बाहरी लाइब्रेरी का इस्तेमाल करना

scripting.executeScript() को कॉल करते समय, बाहरी लाइब्रेरी को files कलेक्शन में जोड़कर, रनटाइम के दौरान भी उन्हें लोड किया जा सकता है. हालांकि, अब भी रनटाइम के दौरान डेटा को रिमोट तौर पर लोड किया जा सकता है.

chrome.scripting.executeScript({
  target: {tabId: tab.id},
  files: ['jquery-min.js', 'content-script.js']
});

फ़ंक्शन इंजेक्ट करना

अगर आपको ज़्यादा डाइनैमिकिटी चाहिए, तो scripting.executeScript() में नई func प्रॉपर्टी की मदद से, कॉन्टेंट स्क्रिप्ट के तौर पर फ़ंक्शन इंजेक्ट किया जा सकता है. साथ ही, args प्रॉपर्टी का इस्तेमाल करके वैरिएबल पास किए जा सकते हैं.

मेनिफ़ेस्ट V2

let name = 'World!';
chrome.tabs.executeScript({
  code: `alert('Hello, ${name}!')`
});

बैकग्राउंड स्क्रिप्ट फ़ाइल में.

मेनिफ़ेस्ट V3

async function getCurrentTab() {/* ... */}
let tab = await getCurrentTab();

function showAlert(givenName) {
  alert(`Hello, ${givenName}`);
}

let name = 'World';
chrome.scripting.executeScript({
  target: {tabId: tab.id},
  func: showAlert,
  args: [name],
});

बैकग्राउंड में काम करने वाले वर्कर.

Chrome एक्सटेंशन के सैंपल का रेपो में, फ़ंक्शन इंजेक्शन का उदाहरण है. इसे सिलसिलेवार तरीके से देखा जा सकता है. getCurrentTab() का उदाहरण, उस फ़ंक्शन के रेफ़रंस में दिया गया है.

समस्या को हल करने के अन्य तरीके ढूंढना

अगर ऊपर बताए गए तरीके से, आपके इस्तेमाल के उदाहरण में मदद नहीं मिलती है, तो आपको कोई दूसरा समाधान ढूंढना पड़ सकता है. जैसे, किसी दूसरी लाइब्रेरी पर माइग्रेट करना या लाइब्रेरी की सुविधाओं का इस्तेमाल करने के दूसरे तरीके ढूंढना. उदाहरण के लिए, Google Analytics के मामले में, Google Analytics 4 गाइड में बताए गए तरीके से, रिमोट तौर पर होस्ट किए गए आधिकारिक JavaScript वर्शन का इस्तेमाल करने के बजाय, Google मेज़रमेंट प्रोटोकॉल पर स्विच किया जा सकता है.

कॉन्टेंट की सुरक्षा से जुड़ी नीति अपडेट करना

"content_security_policy" को manifest.json फ़ाइल से नहीं हटाया गया है, लेकिन अब यह एक डिक्शनरी है, जो दो प्रॉपर्टी के साथ काम करती है: "extension_pages" और "sandbox".

मेनिफ़ेस्ट V2

{
  ...
  "content_security_policy": "default-src 'self'"
  ...
}

मेनिफ़ेस्ट V3

{
  ...
  "content_security_policy": {
    "extension_pages": "default-src 'self'",
    "sandbox": "..."
  }
  ...
}

extension_pages: यह आपके एक्सटेंशन में मौजूद कॉन्टेक्स्ट को रेफ़र करता है. इनमें एचटीएमएल फ़ाइलें और सेवा वर्कर शामिल हैं.

ध्यान दें: इस तरह के पेज, chrome-extension:// प्रोटोकॉल से दिखाए जाते हैं. उदाहरण के लिए, आपके एक्सटेंशन में एक पेज chrome-extension://EXTENSION_ID/foo.html है.

sandbox: इससे उन सैंडबॉक्स किए गए एक्सटेंशन पेजों का पता चलता है जिनका इस्तेमाल आपका एक्सटेंशन करता है.

कॉन्टेंट की सुरक्षा से जुड़ी ऐसी नीतियां हटाना जो काम नहीं करतीं

मेनिफ़ेस्ट V3, "extension_pages" फ़ील्ड में कॉन्टेंट की सुरक्षा से जुड़ी नीति की कुछ वैल्यू इस्तेमाल करने की अनुमति नहीं देता. हालांकि, मेनिफ़ेस्ट V2 में इन वैल्यू का इस्तेमाल किया जा सकता था. खास तौर पर, मेनिफ़ेस्ट V3 उन ऐप्लिकेशन को अनुमति नहीं देता जो रिमोट कोड को चलाने की अनुमति देते हैं. script-src, object-src, और worker-src डायरेक्टिव में सिर्फ़ ये वैल्यू हो सकती हैं:

• self
• none
• wasm-unsafe-eval
• सिर्फ़ अनपैक किए गए एक्सटेंशन: कोई भी localhost सोर्स, (http://localhost, http://127.0.0.1 या उन डोमेन पर कोई भी पोर्ट)

sandbox के लिए, कॉन्टेंट की सुरक्षा के बारे में नीति की वैल्यू पर ऐसी कोई नई पाबंदी नहीं है.