Next.js Discord

Discord Forum

Content Security Policy

Unanswered
Artois Hound posted this in #help-forum
Open in Discord
Artois HoundOP
I've tried for a while to make this work, but every time I use it one way or another, it just breaks the styled components completely, unless I use unsafe values which I obviously do not want to use. Anyone's got a functioning example they could share?

36 Replies

Original message was deleted
Artois HoundOP
Yeah, well I believe it's necessary as the Styled Components simply do not work if I setup script-src
Artois HoundOP
No matter where I do 
import { headers } from 'next/headers'

const nonce = headers().get('x-nonce')
I get the same error, 
You're importing a component that needs next/headers. That only works in a Server Component which is not supported in the pages/ directory. Read more: https://nextjs.org/docs/getting-started/react-essentials#server-components
and idk how else to deliver the nonce
Original message was deleted
Artois HoundOP
basically this code
Artois HoundOP
I literally tried calling it any file
well the simplest test is this 
import { Html, Head, Main, NextScript } from 'next/document'
import { headers } from 'next/headers'

export default function Document() {
  const nonce = headers().get('x-nonce')
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}
and it don't work
I've read a lot on it, and most people just give up on trying to setup CSP with Styled Components and Next.js but I am not quite sure that is a good idea lol
Original message was deleted
Artois HoundOP
That is exactly what I tried, got some error lemme check
Artois HoundOP
oh yeah just checked
just happens that I simply cannot get that nonce 🤣
yeah
Original message was deleted
Artois HoundOP
I have been testing these, but it's questionable if it's even possible ngl
I was initially deciding whether to just develop with the app directory a few months ago, but after testing it for a few weeks, a lot of things just didn't work
This is the first time I am running into a problem cuz I am using pages 🤣
ig they just abandoned it and now I am here in some tough spot
Funny, but it's somehow extremely difficult lol
This is the last thing I expected to have problems with
I mean this is literally in the pages directory documentation
So why the hell does it not work
🤣
Artois HoundOP
it is funny how they make it easier to use external scripts than in-house ones lol
I mean I can literally copy the docs line-for-line and it doesn't work
Original message was deleted
Artois HoundOP
I am certain it's with 'em cuz read this error: 
You're importing a component that needs next/headers. That only works in a Server Component which is not supported in the pages/ directory. Read more: https://nextjs.org/docs/getting-started/react-essentials#server-components
They placed it in the pages directory on the site and then I get this when I try to use it?
just search "Content Security Policy" on this forum, no one got a reply lol
It's 100% an issue, but ngl I am not super-well-versed in filling these things in github and whatnot
Artois HoundOP
&752637460550385834 Any ideas?
@Artois Hound <@&752637460550385834> Any ideas?
Giant panda
Don't ping moderators for code-help.
Artois HoundOP
Sorry.
Artois HoundOP
@Schneider’s Smooth-fronted Caiman I managed to get the nonce through some complicated code I found, but well, the styled components still don't work 🤣
Artois HoundOP
Did just like you said, but oh well, idk what's wrong at this point 
<Head nonce={nonce} />
Also, I even checked the site, the nonce is indeed actually there
Artois HoundOP
Well, I am stuck on finally having the nonce, but the styled components still not working for some reason, I am going to sleep now but here's the code if someone is feeling brave to find the issue with the Styled Components: 
import Document, {
  Html,
  Head,
  Main,
  NextScript,
  type DocumentContext,
  type DocumentInitialProps,
} from 'next/document';

type Props = DocumentInitialProps & { nonce: string };

const MyDocument = (props: Props) => {
  const { nonce } = props;

  return (
    <Html className="h-full">
      <Head nonce={nonce} />
      <body className="h-full">
        <Main />
        <NextScript nonce={nonce} />
      </body>
    </Html>
  );
};

MyDocument.getInitialProps = async (
  ctx: DocumentContext
): Promise<DocumentInitialProps & { nonce: string }> => {
  const initialProps = await Document.getInitialProps(ctx);

  const nonce = ctx.req?.headers?.['x-nonce'] as string;

  return {
    ...initialProps,
    nonce,
  };
};

export default MyDocument;
Artois HoundOP
Well, seems like we're in a pickle.
Yellow croaker
Guys has someone found a solution? I'm using app/ routing for some reason without unsave-inline and unsav-eval CSP ain't working

this is my error message 

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-ZTA3ODYxNGQtNjAzYi00ZjNjLWFkZTctOWYxYjAxMmEzOTM1' 'strict-dynamic'". Either the 'unsafe-inline' keyword, a hash ('sha256-O9Orejd7U2qrn/jbkceSBFYOf4aID8PF9KD6DC52Ucc='), or a nonce ('nonce-...') is required to enable inline execution.

I used the code given on the documentation just that mine is in next.config