#cross origin

1 messages · Page 1 of 1 (latest)

loud plaza
#

Why do I get this error when loading an image from public folder?

/_next/image?url=/logo.png&w=256&q=75
Status
400
VersionHTTP/3
Übertragen315 B (43 B Größe)
Referrer Policystrict-origin-when-cross-origin

solid condorBOT
#
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)

dusky halo
#

I think you might want your next.config.mjs to look like this

const cspHeader = `
  default-src 'self';
  script-src 'self' 'unsafe-eval' 'unsafe-inline';
  style-src 'self' 'unsafe-inline';
  img-src 'self'
`;

const nextConfig = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: cspHeader.replace(/\n/g, ''),
          },
        ],
      },
    ]
  },
};

export default nextConfig;
#

if you want a more complete definition, maybe this is what youre looking for

const cspHeader = `
  default-src 'self';
  script-src 'self' 'unsafe-eval' 'unsafe-inline';
  style-src 'self' 'unsafe-inline';
  img-src 'self'
  connect-src 'self'
  font-src 'self' data:;
  object-src 'none';
  base-uri 'self';
  form-action 'self';
  frame-ancestors 'none';
  upgrade-insecure-requests;
`;```
#

@loud plaza

loud plaza
#

thanks for you response @dusky halo, could you explain what that does?

dusky halo
#

of course

#

CORS (Cross-Origin Resource Sharing) is a security feature that controls who is allowed to interact with your website or server. It’s like a doorman deciding who gets in and who doesn’t.

Imagine you have an <img> tag on your website, and the image source (src) is from another website (like some random image on the internet). When the browser loads your page, it tries to fetch that image.
At that moment, CORS steps in and says:

'Hey, this image is coming from outside — is it allowed to be here?'

If your website’s CORS policy says only resources from itself ('self') are allowed, then CORS will block that image from loading.

You might think: "But it's just an image, why block it?"
Well, good question — it’s not only about images. Without a CORS policy, someone could sneak in scripts that make dangerous API requests to your backend or database. That's why CORS is so important: it protects your site from external content that could be harmful.

Now, about the code I shared earlier:
By setting the Content Security Policy (CSP) like this:

'self' means only allow content from your own website.

We allow scripts and styles inline (because sometimes Next.js needs that for development).

Images are restricted to load only from your own domain ('self').

In short:
We're telling the browser:

'Only trust resources coming from me (the site itself). Block anything that's not from me unless I specifically allow it.'

This setup helps you avoid random external requests that could mess with your app — especially when you're dealing with API calls or loading assets.

#

I used chatgpt on my message to help it make it more clear, i have to say that it made a good work ahhaha

dusky halo
dusky halo
#

If you want to get informed, CORS should guarantee ( if configured properly ) from CSRF and XSS attack, which could be really malicious for a website

#

i believe you got the error in production, right? Or atleast after the build. I don't think that in dev mode it should bother

loud plaza
#

@dusky halo thanks a lot!!

mossy fulcrum