Images blocked by CSP in Twitch Extensions

[pointjkee]

Hello,

In the Extension settings there is “Allowlist for URL Fetching Domains.” I added:

• https://my-api-domain

• https://distribution.faceit-cdn.net/images/*.jpeg

• https://distribution.faceit-cdn.net/images/*.jpg

GET requests to my API (https://my-api-domain) work fine. However, when the extension frontend tries to load user avatars from the FACEIT CDN, the browser blocks them due to CSP:
Sample errors:

• Refused to load the image ‘’ because it violates the following Content Security Policy directive: “img-src ‘self’ data: blob:”.

• Refused to load the image ‘https://distribution.faceit-cdn.net/images/360ad66d-b9a0-4d18-8517-058d160ad45b.jpg’ because it violates the following Content Security Policy directive: “img-src ‘self’ https://9j4sphpwffxs9h278xcd8mf4hlkj3s.ext-twitch.tv https://static-cdn.jtvnw.net https://*.google-analytics.com https://www.googletagmanager.com data: blob:”.

1. Is there a separate allowlist/setting for img-src (and media-src) for Twitch Extensions? If yes, where can I add https://distribution.faceit-cdn.net/images/*?

2. Do patterns like https://distribution.faceit-cdn.net/images/*.jpg work in the allowlist, or should we specify just the origin like https://distribution.faceit-cdn.net?

Thank you!

[BarryCarlyon]

@pointjkee

• Refused to load the image ‘https://distribution.faceit-cdn.net/images/360ad66d-b9a0-4d18-8517-058d160ad45b.jpg’ because it violates the following Content Security Policy directive: “img-src ‘self’ https://9j4sphpwffxs9h278xcd8mf4hlkj3s.ext-twitch.tv https://static-cdn.jtvnw.net https://*.google-analytics.com https://www.googletagmanager.com data: blob:”.

You have a sticky/cached CSP, you can see your requiested values are missing, or:

@pointjkee

In the Extension settings there is “Allowlist for URL Fetching Domains.” I added:

• https://my-api-domain
• https://distribution.faceit-cdn.net/images/*.jpeg
• https://distribution.faceit-cdn.net/images/*.jpg

You have added these values to the allow list for fetch instead of Allowlist for Image Domains

So your list needs to be in the top section

Top: images/css background

Middle: video

Bottom: fetch/api

[pointjkee]

Thank you, and sorry for my oversight. However, the issue still persists:

Refused to load the image ‘https://distribution.faceit-cdn.net/images/4c0783eb-4e1c-4548-8ded-9067e13e9e81.jpeg’ because it violates the following Content Security Policy directive: “img-src ‘self’ https://9j4sphpwffxs9h278xcd8mf4hlkj3s.ext-twitch.tv https://static-cdn.jtvnw.net https://distribution.faceit-cdn.net/images/*.jpeg https://distribution.faceit-cdn.net/images/*.jpg https://*.google-analytics.com https://www.googletagmanager.com data: blob:”.

Could you clarify whether path wildcards like https://distribution.faceit-cdn.net/images/*.jpeg are supported in img-src, or do we have to add only the origin — https://distribution.faceit-cdn.net?

[BarryCarlyon]

@pointjkee

Could you clarify whether path wildcards like https://distribution.faceit-cdn.net/images/*.jpeg are supported in img-src, or do we have to add only the origin — https://distribution.faceit-cdn.net?

Any valid CSP as per the CSP specification should suffice, specifc or generic, as long as compliant with the CSP specification

Off hand I don’t recall the specifics of the specification, but I have some wildcard’ed csp’s in production (twitch or otherwise) (granted just wildcard’ed subdomains rather than a specific pathed one)

Normally I’d throw the test URL at security headers to test I just don’t have yours

Edit:

Content-Security-Policy (CSP) header - HTTP | MDN

suggests that you can’t use a wildcard where you did, as wildcards only apply to domain not paths

https://distribution.faceit-cdn.net/images/