#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