I need some help with Helmet.js and my CSP.

[grim quiver]

I'm trying to allow all image sources on my website, but I'm not sure how to set Helmet to allow that. When I comment out app.use(helmet() it works, but when I try anything else I get errors like this in the console:

The resource at “https://cdn.discordapp.com/icons/1025999194395246632/fb3dcad8b3e9bed9b21e9965c7e0d2b1.png” was blocked due to its Cross-Origin-Resource-Policy header (or lack thereof). See https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)#

I've tried setting img-src to an asterisk, but that still gives me the same error.

app.use(helmet({
  contentSecurityPolicy: {
    directives: {
      ...helmet.contentSecurityPolicy.getDefaultDirectives(),
        "img-src": ["'self'", "cdn.discordapp.com"],
    },
  },
}));

[grim quiver]

also, can any security vulnerabilities arise from setting your content security policy for img-src to *?

[topaz bear]

By and large these issues have been ironed out, but if you want to be extremely cautious you can disallow svg

[grim quiver]

how can svgs cause security vulnerabilities?

[topaz bear]

Because they can contain scripts and other weird shit.

It's a potential vector but I don't think there are any CVE right now.

Hence "extremely cautious". Do a Google search for svg xss and you'll see

For your issue I think you need to also configure CORP

helmet.crossOriginResourcePolicy

[grim quiver]

got it thanks

[grim quiver]

ill look into it rn

[topaz bear]

It should do the trick.

[torpid condor]

Cross-Origin-Resource-Policy is a header set by the server — if you're getting that error for cdn.discord.com then it means that Discord has blocked its images from being used in other websites

Discord doesn't want to be used as a free image host for any service, so they block their images from being used on websites that aren't Discord 🤷

[topaz bear]

lmao I entirely forgot to check the url and just assumed all their requests failed. is the correct answer

[grim quiver]

it works if i remove app.use(helmet()) entirely

[torpid condor]

Hmm that's strange

[grim quiver]

this works

app.use(helmet({
  contentSecurityPolicy: {
    directives: {
      ...helmet.contentSecurityPolicy.getDefaultDirectives(),
        "img-src": ["*"],
    },
  },
  crossOriginEmbedderPolicy: false
}));

except it doesnt load this

[topaz bear]

Because it's not an image. https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/default-src

[grim quiver]

ah

god web security is so confusing

[topaz bear]

I swear one in five questions in here goes something like:
My API route works in postman but not browser??

[screenshot of CORS error in console]

[grim quiver]

is there like a clear and simple resource to learn about stuff like this?

i feel like the mdn docs are kinda confusing sometimes

[topaz bear]

I... Learned from mdn