Using fetch on client side in Custom UI

Hi there,

I am trying to use fetch an image in client side, but I am getting error:

 The page’s settings blocked the loading of a resource (connect-src) at https://images.unsplash.com/photo-1504909177259-7a4a3d7e969e?q=80 because it violates the following directive: “connect-src 'self' https://api.atlassian.com/metal/ingest”

Code:

function fetchImage(imageUrl)  {
    const requestOptions = {
        method: 'GET',
        mode: 'no-cors',
        headers: {'Authorization': 'Bearer ' + 'authToken'}. // I want to fetch image from the site that require authentication in header
    };

    fetch(imageUrl, requestOptions).then(response => {
        if(response.ok) {
            console.log(response.status);
            return response.blob();
        } else {
            console.log(`There was an error fetching image: ${response.status}`);
        }
    }).then((blob) =>{
        const img = document.createElement('img');
        img.src = URL.createObjectURL(blob);
        img.height = 150;
        img.height = 150;
        document.getElementById('image-container').appendChild(img);
    });
}

manifest:

permissions:
  external:
    fetch:
    images:
      - "https://images.unsplash.com"
  content:
    styles:
      - unsafe-inline
    scripts:
      - unsafe-inline

thank you!

I think it needs to be:

permissions:
external:
  fetch:
    client:
      - "https://images.unsplash.com"