Как избежать Cross-Origin Read Blocking (CORB) в расширении Chrome Web - PullRequest
Новая
       52

Как избежать Cross-Origin Read Blocking (CORB) в расширении Chrome Web

0 голосов
/ 20 февраля 2019

Я написал веб-расширение Chrome , чтобы избежать ограничения CORS при разработке моих собственных веб-приложений.Расширение является инструментом разработчика и используется для передачи запроса от исходного URL-адреса до целевого URL-адреса.

Код расширения ядра подобен этому, поэтому разработчики могут разрабатывать свои страницы на моем сайте и запрашивать их на стороне сервера без ограничения CORS: 

chrome.webRequest.onBeforeRequest.addListener(details => {
  let redirectUrl = '';
  //...
  redirectUrl = details.url.replace(TNT.validRules[i].source, TNT.validRules[i].dest);
 return {redirectUrl}
}, {urls: ['<all_urls>']}, ['blocking']);


chrome.webRequest.onHeadersReceived.addListener(details => {
  details.responseHeaders.map(item => {
    if (item.name.toLowerCase() == 'Access-Control-Allow-Origin'.toLowerCase()) {
      item.value = '*'
    }
  })
  return {responseHeaders};
}, {urls: ['<all_urls>']}, ["blocking", "responseHeaders"]);

Но последний Chrome 72 не может прокси-запрос.И ошибки консоли:

Блокировка перекрестного чтения (CORB) блокирует ответ перекрестного источника https://xxxxxxx.com/abc.json?siteId=69 с приложением MIME-типа / json.Подробнее см. https://www.chromestatus.com/feature/5629709824032768.

Ответы [ 2 ]

0 голосов
/ 08 июля 2019

Я нашел ответ в Google Docs:

Избегайте перекрестных выборок в скриптах контента

Старый скрипт контента, делая перекрестныйисходная выборка: 

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.
    }
  });

https://www.chromium.org/Home/chromium-security/extension-content-script-fetches

0 голосов
/ 23 февраля 2019

См. Этот вопрос, поданный соучредителем в Moesif.

https://bugs.chromium.org/p/chromium/issues https://bugs.chromium.org/p/chromium/issues/detail?id=933893

Основываясь на его обсуждении с инженерами Chronium, в основном, вы должны добавить extraHeaders в дополнительные опции для добавления слушателей, которые будут нажимать этот триггерближе к сети и вставьте заголовки, прежде чем сработает CORB.

chrome.webRequest.onHeadersReceived.addListener(details => {
  const responseHeaders = details.responseHeaders.map(item => {
    if (item.name.toLowerCase() === 'access-control-allow-origin') {
      item.value = '*'
    }
  })
  return { responseHeaders };
}, {urls: ['<all_urls>']}, ['blocking', 'responseHeaders', 'extraHeaders'])

Кстати, немного саморекламы здесь.Почему бы вам просто не использовать наш инструмент CORS,

https://chrome.google.com/webstore/detail/moesif-orign-cors-changer/digfbfaphojjndkpccljibejjbppifbc?hl=en

Это уже наиболее полнофункциональный инструмент CORS.

...