title: Chrome extension fetch API - Content Security Policy
body: <p>My chrome extension should fetch some remote resources from 3rd party API through HTTP request.</p>
  
  <pre><code>const getBoards = callback =&gt; {
  fetch("https://gloapi.gitkraken.com/v1/glo/boards", {
    credentials: "include"
  })
    .then(response =&gt; { ... })
    .catch(err =&gt; { ... });
  };
  </code></pre>
  
  <p>Unfortunately it throws the following error:</p>
  
  <blockquote>
    <p>Refused to connect to '<a href="https://gloapi.gitkraken.com/v1/glo/boards" rel="nofollow noreferrer">https://gloapi.gitkraken.com/v1/glo/boards</a>' 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.</p>
  </blockquote>
  
  <p>After a bit of research, I found the chrome requirements to include the url in the manifest permissions and CSP string.</p>
  
  <pre><code>"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:;"
  </code></pre>
  
  <p>But instead of solving the first error these changes just caused another.</p>
  
  <blockquote>
    <p>Ignored insecure CSP value "gloapi.gitkraken.com" in directive 'default-src'.</p>
  </blockquote>
  
  <p>Is my CSP formatting wrong, or there's something else I should do in order to make this GET HTTP request work.</p>