🤩 👸🏿 🎋 समान-उत्पत्ति-नीति के लिए लाइफ़कॉक; Google Chrome और अन्य 🤡 🙋 🖨️

उद्देश्य:
- एक REST सर्वर है
- एक पेज का एप्लिकेशन (HTML / CSS / जावास्क्रिप्ट) है जो XMLHttpRequest के माध्यम से सर्वर से डेटा लेता है
- आपको एक नई सुविधा विकसित करने की आवश्यकता है

जब फ्रंट-एंड डेवलपर को ऐसे कार्य का सामना करना पड़ता है, तो दो विकल्प होते हैं:
- अपने स्थानीयहोस्ट पर परीक्षण सर्वर बढ़ाएं
- XMLHttpRequest2 का उपयोग करने के लिए सर्वर की प्रतिक्रिया के लिए शीर्षक "अनुमति-नियंत्रण-अनुमति-उत्पत्ति: *" जोड़ने के लिए बैक-एंड पूछें

पहला विकल्प समय लेने वाला है, और हमेशा संभव नहीं है। दूसरा विकल्प भी सबसे अच्छा नहीं है - "अनुमति-नियंत्रण-अनुमति-उत्पत्ति: *" सेट करना सुरक्षित नहीं लगता है, और बैक-एंड लंबे समय तक ऐसा कर सकता है।

और फिर यह मुझे एक तुच्छ विचार प्रतीत हुआ - सर्वर पर हेडर क्यों बदलें अगर यह सीधे क्लाइंट पर किया जा सकता है।

फिडलर के बारे में मैंने पहले ही एक बार लिखने की कोशिश की थी ।

फिडलर के साथ समाधान

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

वह सब है!

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

Chrome के एक्सटेंशन के बीच, किसी कारण से मुझे एक भी ऐसा नहीं मिला, जो रिस्पॉन्स हेडर को बदल सके, हालांकि शायद मैं बुरी तरह से देख रहा था। इसलिए, मैंने जल्दी से अपनी बाइक लिखने का फैसला किया। विस्तार और github का लिंक क्योंकि यह फैशनेबल और युवा है

क्रोम एक्सटेंशन

manifest.json

{ "name": "Allow-Control-Allow-Origin: *", "version": "1.0", "manifest_version": 2, "description": "Allow to you request any site with ajax from any source. Add to response - 'Allow-Control-Allow-Origin: *' header", "background": { //      "scripts": ["background.js"] }, "browser_action": { //      , "default_popup"    "default_icon": "off.gif", "default_title": "Allow-Control-Allow-Origin" }, "permissions": [ "storage", //  localStorage "webRequest", // webRequest API "webRequestBlocking", "*://*/*" //      ], "web_accessible_resources": [ //  -             "on.gif","off.gif" ] }

थोड़ा और विस्तार से:
- "पृष्ठभूमि" - एक , दो संक्षेप में - जब क्रोम पृष्ठभूमि में शुरू होता है तो काम के विस्तार के लिए।
"अनुमतियाँ": ["*: // * / *"] उन साइटों के पते जहां एक्सटेंशन काम करता है और जहां एक्सटेंशन से अजाक्स अनुरोध भेजने के लिए पहुंच का संकेत दिया गया है। "Content_scripts" के लिए वैकल्पिक: [...],
यदि आपको किसी खुली साइट के पृष्ठों पर स्क्रिप्ट को सीधे एम्बेड करने की आवश्यकता है (उपयोगी है यदि आपको साइट की स्क्रिप्ट में घोषित कार्यों और चर का उपयोग करने की आवश्यकता है, अन्यथा विस्तार अपने दायरे में काम करता है और साइट की स्क्रिप्ट अपने आप में)
- "Browser_action" - एक्सटेंशन को सक्षम या अक्षम करने के लिए एक बटन जोड़ने की आवश्यकता है
पेज_एक्शन का विकल्प
एक ही समय में पेज_एक्शन और ब्राउज़र_एक्शन का उपयोग नहीं किया जा सकता है
- WebRequest API और webRequestBlocking - अनुरोध और प्रतिक्रिया हेडर को बदलें
- "web_accessible_resources" - अन्यथा चित्र का पथ इस तरह दिखना चाहिए:
रास्ता चाहिए:
पृष्ठभूमि-छवि: url ("/ sprites.png");
सीएसएस
पृष्ठभूमि-छवि: url ('क्रोम-एक्सटेंशन: //__MSG_@@extension_id__/sprites.png');
जे एस
var url = chrome.extension.getURL ('sprites.png');

backgound.js

 var requestListener = function(details){ var flag = false, rule = { name: "Origin", value: "http://evil.com/" }; for (var i = 0; i < details.requestHeaders.length; ++i) { if (details.requestHeaders[i].name === rule.name) { flag = true; details.requestHeaders[i].value = rule.value; break; } } if(!flag) details.requestHeaders.push(rule); return {requestHeaders: details.requestHeaders}; }; var responseListener = function(details){ var rule = { "name": "Access-Control-Allow-Origin", "value": "*" }; details.responseHeaders.push(rule); return {responseHeaders: details.responseHeaders}; }; /*On install*/ chrome.runtime.onInstalled.addListener(function(){ localStorage.active = false; }); /*Icon change*/ chrome.browserAction.onClicked.addListener(function(tab){ if(localStorage.active === "true"){ localStorage.active = false; chrome.browserAction.setIcon({path: "off.gif"}); /*Remove Response Listener*/ chrome.webRequest.onHeadersReceived.removeListener(responseListener); chrome.webRequest.onBeforeSendHeaders.removeListener(requestListener); }else{ localStorage.active = true; chrome.browserAction.setIcon({path: "on.gif"}); /*Add Response Listener*/ chrome.webRequest.onHeadersReceived.addListener(responseListener,{ urls: [ "*://*/*" ] },["blocking", "responseHeaders"]); chrome.webRequest.onBeforeSendHeaders.addListener(requestListener,{ urls: [ "*://*/*" ] },["requestHeaders"]); } });

कोड द्वारा अधिक जानकारी:
OnHeadersReceived और onBeforeSendHeaders के लिए कॉलबैक ने क्रमशः रिस्पांसलिंटर और रिक्वेस्टलीनर को अलग-अलग कार्यों में लगाया, ताकि हेडर को चालू और बंद करने के बाद स्विच को बदला न जाए। घुड़सवार हैंडलर को हटाएं

chrome.runtime.onInstalled - एक बार निष्पादित हो जाएगा - वहाँ आप प्लगइन की डिफ़ॉल्ट स्थिति को इनिशियलाइज़ कर सकते हैं

chrome.browserAction.onClicked .addListener - जब हम एक्सटेंशन बटन पर क्लिक करते हैं - हम ईवेंट को पकड़ते हैं और प्लगइन को चालू और बंद करते हैं

अगर (localStorage.active === "सच") - किसी कारण से, हर बार मैं इस पर ठोकर खाता हूं और यह भूल जाता हूं कि लोकलस्टोरेज में चाबियाँ <string> में संग्रहीत हैं

वास्तव में, हमें onBeforeSendHeaders की आवश्यकता नहीं है, लेकिन चूंकि Chrome स्थानीय होस्ट के लिए ajax अनुरोधों को भेजने की अनुमति नहीं देता है।
विस्तार के पहले संस्करण में, मैंने इस पर ध्यान नहीं दिया क्योंकि जब मैं क्रोम शुरू करता हूं, मेरे पास ध्वज होता है - फाइल-एक्सेस-से-फाइल्स

आप यहां और यहां झंडे के बारे में अधिक पढ़ सकते हैं ।

मेरे पास ये हैं:
~~शॉर्टकट पर राइट क्लिक करें -> गुण -> लक्ष्य~~
C: \ Users \ Ololo \ AppData \ Local \ Google \ Chrome \ Application \ chrome.exe --allow-file-access-from-files --remote-debugging-port = 9222 --allow-file-access-allow -क्रॉस मूल के लेखन-शीघ्र

एफएफ के लिए - यहां किसी कारण से, मुझे सर्वर से प्रतिक्रिया की जगह के लिए एक्सटेंशन नहीं मिला, लेकिन फिर, शायद यह खराब दिख रहा था। यदि कोई आपको बताता है कि मैं एक पोस्ट में डालूंगा।

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

पीएसएस
यह विषय विषय पर लागू नहीं होता है, लेकिन शायद कोई चाहता था और भूल गया था - कल (21 जनवरी) अगले महीने ऑनलाइन पाठ्यक्रमों का अगला दौर शुरू हुआ
पाठ्यक्रम के छापों को यहां पढ़ा जा सकता है । पाठ्यक्रम के लिए पंजीकरण कुछ हफ़्ते के भीतर उपलब्ध होना चाहिए।

समान-उत्पत्ति-नीति के लिए लाइफ़कॉक; Google Chrome और अन्य

More articles: