Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

_next/static/chunks/main-app.js is missing nonce #55129

Open
1 task done
kin-for-test opened this issue Sep 8, 2023 · 5 comments
Open
1 task done

_next/static/chunks/main-app.js is missing nonce #55129

kin-for-test opened this issue Sep 8, 2023 · 5 comments
Labels
bug Issue was opened via the bug report template.

Comments

@kin-for-test
Copy link

kin-for-test commented Sep 8, 2023

Link to the code that reproduces this issue or a replay of the bug

https://codesandbox.io/p/sandbox/cranky-moore-394lqf?file=undefined

To Reproduce

1.next dev
2. open chrome console
3. error showup

Current vs. Expected behavior

expected:
_next/static/chunks/main-app.js have nonce

current:
a

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Pro
    Binaries:
      Node: 20.5.1
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.19
      eslint-config-next: 13.4.19
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.2.2
    Next.js Config:
      output: N/A

Which area(s) are affected? (Select all that apply)

App Router

Additional context

middleware.ts

import { NextRequest, NextResponse } from "next/server";
export function middleware(request: NextRequest) {
	const nonce = Buffer.from(crypto.randomUUID()).toString("base64");
	const cspHeader = `
		default-src 'self';
		script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
		style-src 'self' 'nonce-${nonce}';
		img-src 'self' blob: data:;
		font-src 'self';
		object-src 'none';
		base-uri 'self';
		form-action 'self';
		frame-ancestors 'none';
		block-all-mixed-content;
		upgrade-insecure-requests;
	`;
	const requestHeaders = new Headers();
	requestHeaders.set("x-nonce", nonce);
	requestHeaders.set(
		"Content-Security-Policy",
		// Replace newline characters and spaces
		cspHeader.replace(/\s{2,}/g, " ").trim(),
	);
	let response = NextResponse.next({
		headers: requestHeaders,
		request: {
			headers: requestHeaders,
		},
	});
	return response;
}

export const config = {
	matcher: "/:path*",
};```
@kin-for-test kin-for-test added the bug Issue was opened via the bug report template. label Sep 8, 2023
@taro-shono
Copy link
Contributor

taro-shono commented Sep 12, 2023

I am having the same problem. codesandbox gives me an error on the preview page and I can't see it, so I think it would be easier to find the problem if you showed this page as well: https://394lqf-3000.csb.app/

You will also see the csp error in console:

Screenshot

Screen Shot 2023-09-12 at 18 09 31

@FlowerGeoji
Copy link

me too. I am having the same problem.

@luis-immunefi
Copy link

luis-immunefi commented Sep 15, 2023

This has been fixed in the canary versions: 13.4.20-canary.30.

@yelodevopsi
Copy link

Coming from 13.4.19 I can confirm that it has been solved too with 13.5.2 at least:

"eslint-config-next": "^13.5.2",
    "next": "^13.5.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"

@yelodevopsi
Copy link

Issue opened at: mui/material-ui#39093

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
bug Issue was opened via the bug report template.
Projects
None yet
Development

No branches or pull requests

5 participants