google chrome - CORS हेडर के साथ प्रतिक्रिया करने वाले डेटा संसाधनों के अनुरोधों को अवरुद्ध करने से CORB को कैसे रोकें?




google-chrome google-chrome-extension (2)

different देखें

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

क्रॉस-ऑरिजिन से बचने के लिए आप ऐसा कर सकते हैं।

पुरानी सामग्री स्क्रिप्ट, एक क्रॉस-उत्पत्ति लाने के लिए:

var itemId = 12345;
var url = "https://another-site.com/price-query?itemId=" +
         encodeURIComponent(request.itemId);
fetch(url)
  .then(response => response.text())
  .then(text => parsePrice(text))
  .then(price => ...)
  .catch(error => ...)

नई सामग्री स्क्रिप्ट, इसकी पृष्ठभूमि पृष्ठ को इसके बजाय डेटा लाने के लिए कह रही है:

chrome.runtime.sendMessage(
    {contentScriptQuery: "queryPrice", itemId: 12345},
    price => ...);

नया एक्सटेंशन बैकग्राउंड पेज, एक ज्ञात URL से प्राप्त करना और डेटा रिले करना:

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.contentScriptQuery == "queryPrice") {
      var url = "https://another-site.com/price-query?itemId=" +
              encodeURIComponent(request.itemId);
      fetch(url)
          .then(response => response.text())
          .then(text => parsePrice(text))
          .then(price => sendResponse(price))
          .catch(error => ...)
      return true;  // Will respond asynchronously.
    }
  });

मैं एक क्रोम एक्सटेंशन विकसित कर रहा हूं जो कुछ वेबसाइटों से एक एपीआई I नियंत्रण के लिए अनुरोध करता है। Chrome 73 तक, एक्सटेंशन ने सही तरीके से काम किया। Chrome 73 में अपग्रेड करने के बाद, मुझे निम्न त्रुटि मिलने लगी:

क्रॉस-ओरिजिन पढ़ें ब्लॉकिंग (कॉर्ब) अवरुद्ध क्रॉस मूल प्रतिक्रिया

CORB पर क्रोम के प्रलेखन के अनुसार, CORB एक अनुरोध की प्रतिक्रिया को अवरुद्ध करेगा यदि निम्नलिखित सभी सत्य हैं:

  1. संसाधन एक "डेटा संसाधन" है। विशेष रूप से, सामग्री प्रकार HTML, XML, JSON है

  2. सर्वर एक X-Content-Type-Options: nosniff साथ प्रतिक्रिया करता है X-Content-Type-Options: nosniff हेडर, या यदि इस हेडर को छोड़ दिया जाता है, तो Chrome पता लगाता है कि सामग्री का प्रकार HTML, XML, या JSON में से एक है जो फ़ाइल का निरीक्षण कर रहा है

  3. कोर स्पष्ट रूप से संसाधन तक पहुंच की अनुमति नहीं देता है

इसके अलावा, "लेटर्स फ्रॉम स्पेक्टर एंड मेल्टडाउन" (Google I / O 2018) के अनुसार , ऐसा लगता है कि mode: cors को जोड़ना महत्वपूर्ण हो सकता mode: cors को इनवोकेशन fetch लिए, अर्थात, fetch(url, { mode: 'cors' })

इसे ठीक करने के लिए, मैंने निम्नलिखित परिवर्तन किए हैं:

सबसे पहले, मैंने अपने एपीआई से सभी प्रतिक्रियाओं के लिए निम्नलिखित शीर्ष लेख जोड़े:

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Origin: https://www.example.com

दूसरा, मैंने इस तरह दिखने के लिए अपने fetch() को विस्तार पर मंगलाचरण अपडेट किया:

fetch(url, { credentials: 'include', mode: 'cors' })

हालाँकि, ये परिवर्तन काम नहीं किया। मैं अपने अनुरोध को ब्लॉक करने के लिए क्या बदल सकता हूं कॉर्ब द्वारा अवरुद्ध नहीं किया गया है?


different fetchResource different के उदाहरणों के आधार पर, मैंने fetch सभी इनवोकेशन को एक नई विधि fetchResource बदल दिया, जिसमें एक समान API है, लेकिन बैकग्राउंड पेज पर fetchResource कॉल को डेलिगेट करता है।

// contentScript.js
function fetchResource(input, init) {
  return new Promise((resolve, reject) => {
    chrome.runtime.sendMessage({input, init}, messageResponse => {
      const [response, error] = messageResponse;
      if (response === null) {
        reject(error);
      } else {
        // Use undefined on a 204 - No Content
        const body = response.body ? new Blob([response.body]) : undefined;
        resolve(new Response(body, {
          status: response.status,
          statusText: response.statusText,
        }));
      }
    });
  });
}

// background.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  fetch(request.input, request.init).then(function(response) {
    return response.text().then(function(text) {
      sendResponse([{
        body: text,
        status: response.status,
        statusText: response.statusText,
      }, null]);
    });
  }, function(error) {
    sendResponse([null, error]);
  });
  return true;
});

यह मेरे द्वारा किए गए परिवर्तनों का सबसे छोटा सेट है जो समस्या को हल करने वाले मेरे ऐप में करने में सक्षम था। (नोट, एक्सटेंशन और बैकग्राउंड पेज उनके बीच केवल JSON-serializable ऑब्जेक्ट्स को पास कर सकते हैं, इसलिए हम बैकग्राउंड पेज से एक्सटेंशन तक Fetch API रिस्पॉन्स ऑब्जेक्ट को पास नहीं कर सकते।)

पृष्ठभूमि पृष्ठ CORS या CORB से प्रभावित नहीं होते हैं, इसलिए ब्राउज़र अब API से प्रतिक्रियाओं को अवरुद्ध नहीं करता है।






cross-origin-read-blocking