search

nibtime / next-safe-middleware

Strict CSP (Content-Security-Policy) for Next.js hybrid apps https://web.dev/strict-csp/
https://next-safe-middleware.vercel.app
MIT License
79 stars 20 forks source link

Optimised font isn't listed in CSP #68

Closed Shamilik closed 2 years ago

Shamilik commented 2 years ago

Optimised font isn't listed in CSP in Safari & Chrome

https://nextjs.org/docs/basic-features/font-optimization

Screenshot 2022-08-03 at 11 12 20

Also there is some problem with scripts, but I still didn't realise what exactly.

Shamilik commented 2 years ago
Screenshot 2022-08-03 at 11 21 52
nibtime commented 2 years ago

Hi @Shamilik

On the failed scripts
Is the respective route where the load fails with `getServerSideProps` or `getInitialProps`? If so, you need to wrap the exported data fetching function with `gsspWithNonce` or `gipWithNonce` respectively (https://next-safe-middleware.vercel.app/guides/strict-csp-configuration). That is new since version `0.9.0` as there has been some internal change that makes it impossible to reliably tell apart `getServerSideProps` from `getStaticProps` + `revalidate` (ISR) by `DocumentContext`. It is an extra step to remember, but it's unavoidable to not break the actual security feature + it will be robust towards future changes. and the past. If not, this is super strange. With the new proxy loading mode, the actual scripts wouldn't even be in the DOM in case of a missing hash in CSP. So if the proxy loader can execute, but the inserted scripts get blocked, that would violate the transitive trust semantics of `strict-dynamic` and a browser bug.
An inline proxy loader looks like this: ```html ```
Do the script problems on your site also occur with other browsers (Chrome, Firefox ...)?
Workaround for the font optimization problem
The output of Next font optimization can't be picked up during SSR of `_document`, it happens sometimes after. Fortunately, there is a simple workaround: https://github.com/nibtime/next-safe-middleware/blob/f293383966b7a7806764f0d2aa7e152e51f64549/apps/e2e/pages/_document.tsx#L29-L33 https://github.com/nibtime/next-safe-middleware/blob/f293383966b7a7806764f0d2aa7e152e51f64549/apps/e2e/pages/_document.tsx#L70-L90

I will also draft a bug template with a checklist tailored to Next+CSP-related bugs.

nibtime commented 2 years ago

I am closing this, as the font optimization thing can't be handled automatically and needs the workaround

For the script issues: I am going to release 0.10.1 now (#70). I fixed some bugs with middleware that could break CSP, but those happened on Vercel only.

I also recorded a basic click-through test of the e2e app with Safari+strict-dynamic on a iPad Pro Device (https://github.com/nibtime/next-safe-middleware/pull/69#issuecomment-1206544255) and couldn't spot any issue there, also not in the docs project.

bartoszhernas commented 2 years ago

Can this be added in big red letters in documentation? I spent hours searching why I am getting inline style errors, only to discover the fonts are auto-inlined.

Do you pass nonce to (as nextjs recommends)? If yes, then the issue is on nextjs team, as they should be passing this down to inlined style

bartoszhernas commented 2 years ago

You can disable font-optimization by adding optimizeFonts: false, to nextjs.config https://nextjs.org/docs/basic-features/font-optimization