How to load third party images coming from an API-CodePudding

I've been looking on various solutions to solve this problem but none worked for me.

I'm making a website which displays news articles.

JS CODE TO FETCH DATA

async function fetchNewsData(region) {
   try {
     const request = await fetch(
       `https://newsapi.org/v2/top-headlines? 
       country=${region}&category=business&apiKey=${API_KEY}`);

     const response = await request.json();

     if (response.status !== "ok") throw new Error("Something went wrong!");

     return response;
   } catch (err) {
      console.error(err);
     }
 }

API RESPONSE

{

 "author": "Cointelegraph By Brian Newar",
 "title": "Large institutions sold $5.5B in BTC since May — and we're still here",

 "description": "Massive sell-offs from institutions appear to have been the driving 
  force behind the drop in Bitcoin price since May, according to an analyst from Arcane 
  Research.",

 "urlToImage":"https://images.cointelegraph.com/images/1200_aHR0cHM6Ly
  9zMy5jb2ludGYWRzLzIwMjItMDcvZmUFlLTg4NDQtMzFjZmY0MjQ2OWY5LmpwZWc=.jpg",

 "publishedAt": "2022-07-22T02:44:01Z",

 "content": "Since May 10, as much as 236,237 Bitcoin (worth $5.452 billion) has been 
 sold by large institutions mostly as a result of forced selling. \r\nA Twitter thread 
 from Arcane Research analyst Vetle Lunde d… [ 3128 chars]"

},

When i displaying the above data dynamically using JS everyting works fine but i run into CSP error when rendering images. How do i fix it?

Solutions i tried:

Proxy server (heroku) it didn't work, and not a good solution.
crossorigin attr in img tag <img src="urlToImage" crossorigin="anonymous" />
I've read articles about CORS from MDN but none helped me and its quite overwhelming.

META TAG I USED

`meta(http-equiv="Content-Security-Policy" content="default-src 
'self'; font-src 'self' *; img-src 'self' data: https://*; script- 
src 'self'; style-src 'self' https://fonts.googleapis.com 
https://fonts.gstatic.com; frame-src 'self';")`

Error I've Got:

**Refused to load the image '<URL>' because it violates the following Content Security 
Policy directive: "img-src 'self' data:".

stocknews:1 Refused to load the image 'https://images.moneycontrol.com/static- 
mcnews/2021/08/Sensex_Nifty-1-770x433.jpg' because it violates the following Content 
Security Policy directive: "img-src 'self' data:".**

When i use parcel bundler and make a request i'm able to load the images without any error. but without parcel i get CSP error. why?

I would appreciate a safe solution, Rather than some tricky solution to solve this problem.

Thankyou.

CodePudding user response：

Do you have a <meta> tag with of Content-Security-Policy in your HTML? This error seems to be related to this tag, where the security policy for images is:

<meta http-equiv="Content-Security-Policy"
  content="img-src 'self' data:;">

Try updating it to:

<meta http-equiv="Content-Security-Policy"
  content="img-src 'self' data: https://*;">

(or instead of *, you can include all known domains you are including images from)

More info about this tag

CodePudding user response：

It is because Content-Security-Policy, that you need to change from which domain you would like to allow the images or other data

In your case, you can do like this

data:images.cointelegraph.com;

or if you want to allow images from everywhere then use * instead of a particular address but that is not recommended for security concern