nibtime
commented
2 years ago Hi @alexturpin
that no style tag at all is covered is odd. Your 404 page (https://can-you-unlock-edbupijva-alexturpin.vercel.app/doesntexist) also has inline styles blocked (The default Next error component uses inline style attributes). This should work with a proper setup, see here: https://next-safe-middleware.vercel.app/doesntexist
Can you try this setup and see how it goes?
// pages/_document.js
import Document, {
provideComponents,
} from '@next-safe/middleware/dist/document';
import { Html, Main } from 'next/document';
import React from 'react';
export default class MyDocument extends Document {
static async getInitialProps(ctx: any) {
return Document.getInitialProps(ctx);
}
render() {
const { Head, NextScript } = provideComponents(this.props);
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}// pages/_middleware.js
import type { Middleware } from '@next-safe/middleware';
import {
chain,
nextSafe,
strictDynamic,
strictInlineStyles,
} from '@next-safe/middleware';
const isDev = process.env.NODE_ENV === 'development';
export default chain(
nextSafe({ isDev }),
strictDynamic(),
strictInlineStyles({
extendStyleSrc: false,
}),
)I experimented a lot with what's possible to avoid style-src: 'unsafe-inline' in the CSP. I think I haven't put this in docs yet at all though, I intend do update it soon though, I will tackle #30 the next few weeks
I am currently working on some stuff for a version 0.7.0. I will set up Mantine in the e2e app, see how it goes and report problems/limitations I found back here.
I realized though that it might not always be possible to avoid style-src: 'unsafe-inline' and is dependent on how the CSS-in-JS framework works and if what your 3rd party libs do with inline styles (insert/change dynamically etc.)
alexturpin
oauramos
allcontributors[bot]
Hey all,
I'm just integrating the middleware into my Next.js website and I'm running into a few issues. You can see the issues live here.
I am using Google Fonts and it seems like Google or Next.js does some inlining into a style tag, and those tags don't have a hash.
Here's how I include the Google Fonts:
The other problem is that I am using Mantine which leverages Emotion under the hood. It outputs an inline style tag at the top of my
that also doesn't seem to have a hash. I do have access to the nonce option of Emotion in my _app.ts but not sure if that's even helpful.Anyone know if there there are any workarounds to these problems? Cheers!