Skip to content
New issue

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

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using i18n in next.config.js will cause secure headers to disappear #55

Open
1 of 2 tasks
websaid opened this issue Feb 14, 2022 · 2 comments
Open
1 of 2 tasks

Comments

@websaid
Copy link

websaid commented Feb 14, 2022

馃挬 Bug Report

A summary of the bug

Using i18n internationalization will cause secure headers to disappear

Current behavior

If you have this in your next.config.js:

i18n: {
  defaultLocale: "de",
  locales: ["de"]
},

Your headers will not be used.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository.

  1. add this to your next.config.js alongside your headers configuration
    i18n: { defaultLocale: "de", locales: ["de"] },
  2. npm run build & npm run start
  3. Check network tab, the CSP header wont be displayed
  4. Remove i18n, recompile & restart, CSP Headers are back there

Expected behavior

CSP Headers to work when i18n locales are set.

Environment

  • This project version(s): v2.2.0
  • Nodejs version: v14.15.4
  • OS: Windows 10

Additional context

The headers config i used:

  async headers() {
    return [{
      source: "/(.*)",
      headers: createSecureHeaders({
        contentSecurityPolicy: {
          directives: {
            defaultSrc: "'self'",
            imgSrc: ["https://*", "'self'", "data:"],
            styleSrc: ["'self'", "https://use.typekit.net/", "'unsafe-inline'"],
            fontSrc: "https://use.typekit.net/",
            scriptSrc: ["'self'", process.env.NODE_ENV === "development" ? "'unsafe-eval'" : ""],
            scriptSrcElem: "'self'"
          }
        }
      })
    }]
  }

  • I've tried to find similar issues
  • I would like to work on a fix 馃挭馃徎
@mauritsl
Copy link

I had the same issue.
When i18n is enabled, the path for the homepage is "/en", but the language prefix is stripped before matching the path but doesn't contain a trailing slash anymore. Hence an empty string is matched against /(.*).

The solution is to add locale: false to prevent NextJS from stripping the language prefix. I would suggest adding this to the code in the readme. Setting this option has no effect when i18n is not in use.

Config example with this fix:

module.exports = {
  i18n: {
    locales: ['en'],
    defaultLocale: 'en',
  },
  async headers() {
    return [
      {
        locale: false,
        source: '/(.*)',
        headers: createSecureHeaders({
          frameGuard: 'deny',
          nosniff: 'nosniff',
          referrerPolicy: 'same-origin',
        })
      },
    ];
  }
};

Note that we cannot omit the slash from the pattern as an alternative solution because NextJS fails to start in that case.

@mauritsl
Copy link

It would be good if this could be reviewed and updated in the readme soon. When enabling i18n later on, the security headers' absence may go unnoticed, hence putting the site at risk.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants