CSP prevents loading of react-giphy-brand fonts InterFace_W_Rg.woff2

[strefethen]

Expected behavior:
I'm trying out Talk on my dev environment and running into some issues. First, Talk is including a font pulled from S3 that simply won't work when CSP is used since adding s3.amazonaws.com to a CSP header would be nonsensical.

When loading a page with the Talk client the CSP error is:

Refused to load the font 'https://s3.amazonaws.com/giphyscripts/react-giphy-brand/fonts/InterFace_W_Rg.woff2'

I see this referenced in @giphy/js-brand and while I don't see a direct reference to this package I imagine it's pulled in as a dependency with one of the following dependent packages included in Talk's package.json:

"@giphy/js-fetch-api": "^4.1.2",
"@giphy/js-types": "^5.0.0",
"@giphy/react-components": "^5.4.0",

Unfortunately, I don't see any way around this with this dependency tree as these URLs are referenced directly in the typography.ts from the js-brand package:

https://github.com/Giphy/giphy-js/blob/master/packages/brand/src/typography.ts

At any rate, the Talk client loads and seemingly functions properly and I haven't dug into to see what won't work missing this font.

Oddly, it seems like giphy folks must be aware of this as the @giphy/js-brand README.md mentions setting GIPHY_SDK_NO_FONTS: true though this doesn't apply to Talk via docker.

Actual behavior:
My $0.02 sense is Talk shouldn't have dependencies pulled from S3 as it seems like that's a pretty big security hazard.

Fingers crossed I'm just missing something that will work around this?

Related Issues:
In a search I didn't see any issues related to Talk on this subject. I did find another project with this same issue using CSP:

jitsi/jitsi-meet#11419

Versions:
Talk v7.5.0

• NodeJS:
• NPM:
• MongoDB:
• Redis:
• Browser: Chrome Version 131.0.6778.205 (Official Build) (arm64)
• OS: macOS

[strefethen]

I forgot the second CSP issue, not sure this warrants a new issue but happy to create one if so. I also see this error:

Refused to connect to 'wss://localhost/api/graphql/live' because it violates the following Content Security Policy directive: "connect-src ...

In this case, I notice localhost is missing the port # so I don't think it's going to connect correctly. I've added http://localhost to my CSP (for dev) and resolved several other errors but these two remain.

[tessalt]

thanks for reporting, are you having production issues impacting the app functionality because of CSP or only in development? We're probably not going to have resources to chase down the giphy font issue but hopefully that will be addressed in a future giphy update.

[strefethen]

Hi @tessalt, thanks for the reply.

I didn't debug where the font is used so can't comment on any possible broken functionality. To me, the issue is that Coral is pulling in files from an S3 bucket which is just a bad idea from the POV of dependency hijacking, lack of integrity verification, and privacy. IMO, the Coral discussion should center around this being a security risk more than anything. For me CSP exposed this issue which is exactly what it was designed to do.

The "wss" issue with the missing port is really a separate issue. I haven't debugged that one but given it's in Coral it should be fixable with a PR.

[strefethen]

Hi @tessalt I posted to the giphy repo too and it turns out they fixed this issue awhile ago. Coral is using @giphy/react-components v5.4.0 whereas the latest release is v9.8.0 so, fairly outdated.

Hopefully, Coral can review its dependencies and update to the latest in the fairly near future.

Giphy/giphy-js#462 (comment)

[losowsky]

Thanks - we've added it to our backlog. More soon.