Helmet: Having issue with ContentSecurityPolicy and displaying outsourced images

Question

I am creating a webapp using ExpressJS, and I am using helmet for security. This is my first time doing anything like this. I am having issues with getting images I am grabbing from the TMDB API to display on my web page when I have helmet installed. I believe I am configuring the content security policy correctly, but I am still having issues.

Here is my configuration:

app.use(
    helmet.contentSecurityPolicy({
        directives: {
            defaultSrc: [],
            connectSrc: ["'self'", ...connectSrcUrls],
            scriptSrc: ["'unsafe-inline'", "'self'", ...scriptSrcUrls],
            styleSrc: ["'self'", "'unsafe-inline'", ...styleSrcUrls],
            workerSrc: ["'self'", "blob:"],
            objectSrc: [],
            imgSrc: [
                "'self'",
                "blob:",
                "data:",
                //"https://res.cloudinary.com/douqbebwk/", //SHOULD MATCH YOUR CLOUDINARY ACCOUNT!
                "https://images.unsplash.com/",
                "https://image.tmdb.org/",
            ],
            fontSrc: ["'self'", ...fontSrcUrls],
        },
    })
);

Here is the image tag that is failing to display:

<img crossorigin="anonymous" style="width: 15%" class="img-fluid mb-2 mx-1 "
     src=<%=`https://image.tmdb.org/t/p/w500${movie.poster_path}`%>>

The odd thing is the images that I am using from unsplash are displaying just fine.

It is only images from TMDB that are not. Do I have the incorrect URL?

I have looked at the TMDB documentation and there is no other image URL I can find.

Answer 1

In building this webapp I have been following a Udemy course. The course advised me to add in the crossorigin="anonymous" to the tag. I just removed this and it works perfectly. Still unsure why. An explanation would be helpful there.