API извлечения расширений Chrome — политика безопасности контента

#javascript #google-chrome #fetch-api #content-security-policy

#javascript #google-chrome #fetch-api #политика безопасности контента

Вопрос:

Мое расширение Chrome должно извлекать некоторые удаленные ресурсы из стороннего API через HTTP-запрос.

 const getBoards = callback => {
fetch("https://gloapi.gitkraken.com/v1/glo/boards", {
  credentials: "include"
})
  .then(response => { ... })
  .catch(err => { ... });
};
  

К сожалению, это выдает следующую ошибку:

Отказано в подключении к ‘https://gloapi.gitkraken.com/v1/glo/boards ‘ потому что это нарушает следующую директиву политики безопасности контента: «default-src ‘self'». Обратите внимание, что ‘connect-src’ явно не был установлен, поэтому ‘default-src’ используется в качестве запасного варианта.

После небольшого исследования я обнаружил, что требования Chrome включают URL-адрес в разрешения манифеста и строку CSP.

 "permissions": [ ..., "https://gloapi.gitkraken.com/" ],
"content_security_policy": "default-src 'self' gloapi.gitkraken.com; script-src 'self' 'sha256-[...]'; style-src * 'unsafe-inline'; img-src 'self' data:;"
  

Но вместо устранения первой ошибки эти изменения просто вызвали другую.

Игнорируемое небезопасное значение CSP «gloapi.gitkraken.com » в директиве ‘default-src’.

Является ли мое форматирование CSP неправильным, или есть что-то еще, что я должен сделать, чтобы заставить этот HTTP-запрос GET работать.

Ответ №1:

После еще нескольких исследований я нашел решение. URL-адрес GitKraken API должен быть в connect-src свойстве, вместо default-src . Итак, мой манифест теперь выглядит следующим образом:

 permissions: [ ..., "https://gloapi.gitkraken.com/" ],
"content_security_policy": "default-src 'self'; script-src 'self' 'sha256-[...]'; style-src * 'unsafe-inline'; img-src 'self' data:; connect-src https://gloapi.gitkraken.com/;"
  

Дополнительная информация:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src#Syntax