Chrome extension fetch API - Content Security Policy

1
votes

My chrome extension should fetch some remote resources from 3rd party API through HTTP request.

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

Unfortunately it throws the following error:

Refused to connect to 'https://gloapi.gitkraken.com/v1/glo/boards' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

After a bit of research, I found the chrome requirements to include the url in the manifest permissions and CSP string.

"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:;"

But instead of solving the first error these changes just caused another.

Ignored insecure CSP value "gloapi.gitkraken.com" in directive 'default-src'.

Is my CSP formatting wrong, or there's something else I should do in order to make this GET HTTP request work.

1
javascriptgoogle-chromefetch-apicontent-security-policy

1 Answers

1
votes

After a bit more of research I found a solution. The URL of the GitKraken API should be in connect-src property, instead of default-src. So my manifest now looks like this:

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/;"

More information:

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