#Content Security Policy

64 messages · Page 1 of 1 (latest)

north frigate
#

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?

uneven dewBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

minor nymph
#

Are you trying to set up a nonce value?

#

also worth noting that nextjs' CSP omits the content-src directive, which is relevant for websockets.

One more thing, if you're interested in the security of your website, check out https://securityheaders.com, useful tool for testing security based on headers (but that alone isn't sufficient for testing stuff like auth security)

north frigate
north frigate
north frigate
minor nymph
#

Well the error there is very clear, you can only call that headers() function in a server component.

north frigate
#

I literally tried calling it any file

minor nymph
#

are you calling it in the body of a component or at the top of the file? It was intended for the former, not the latter. Has to be called inside the component

#

also, wherever you call it, it is complaining that the component being imported calls headers. So you might have imports mixed up. Server components can contain client and server components, but client components can't contain server components that rely on those functions, afaik

north frigate
#

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

minor nymph
#

well, implementing a CSP is meant to impose certain restrictions. It's like a knight with very heavy armor. Limited mobility and less speed, but better protected, yes? While in a perfect world every website should have a CSP, it would actually be a perfect world if there were no attackers, instead. What is good against attackers might be harmful against consumers, and so, you have to take it on a case-by-case basis.

What I can tell you is, having a relaxed CSP is better than having no CSP. But having an incredibly restrictive CSP will make your options very limited.

#

That being said... the code you have should work. That looks like you are using the page router, my only experience is with app router.

#

If you manage to get that to work, I can tell you that when I was experimenting with using a nonce, passing it to the <Head /> tag appeared to make everything in the head have a nonce attribute applied, as well.

#

that, and/or returning a NextResponse from the middleware with the nonce included as a header, and also within the csp header

north frigate
minor nymph
#

yeah strangely nextjs is sort of a "magic box". They have a lot of documentation, but it's not complete

north frigate
minor nymph
#

Oh, if the parameter does exist on the <Head /> component for your environment, make sure the nonce is not null or undefined

#

I recall that being a typing issue

north frigate
#

oh yeah just checked

#

just happens that I simply cannot get that nonce 🤣

minor nymph
#

yes, bit of an odd problem, hmmm ferrisHmm

#

I would guess that is the root layout, yes?

north frigate
#

yeah

minor nymph
#

I think it just doesn't work on the page router, there is no headers function doc in the page router documentation

north frigate
#

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

minor nymph
#

the app directory works well, I've migrated a frontend to it so far with decent success, but there is a steep learning curve. It requires rethinking browser web apps as a client/server model. People who make networked video games or any other kind of client/server model application will feel right at home. People who feel the browser is more their home will face challenges/obstacles, but not impossible ones

minor nymph
north frigate
#

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

#

🤣

#

it is funny how they make it easier to use external scripts than in-house ones lol

minor nymph
#

I am not sure, I wish I could help you better. We need someone here a little more savvy with the page router to explain this odd descrepancy between your code and the docs

north frigate
#

I mean I can literally copy the docs line-for-line and it doesn't work

minor nymph
#

I would create a fresh project for experimentation purposes and have just what the docs have, and see if that even works. Maybe it's something they haven't updated, or we are missing info about your project setup

north frigate
#

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

minor nymph
#

mhm, it's hardly touched, sadly. Security is reactive, not proactive like it should be waaah

minor nymph
north frigate
#

It's 100% an issue, but ngl I am not super-well-versed in filling these things in github and whatnot

north frigate
#

<@&752637460550385834> Any ideas?

pseudo solstice
north frigate
#

Sorry.

north frigate
#

@minor nymph I managed to get the nonce through some complicated code I found, but well, the styled components still don't work 🤣

#

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

north frigate
#

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;```

north frigate
#

Well, seems like we're in a pickle.