Fixes the incorrectly escaped quotes in the meta content security policy tag on next.js static exports.
Next.JS builds a static export using next export. Next's static export feature does not support
the Security Headers feature of Next, so the solution to
adding a content security policy is to write it in _document.ts.
Unfortunately, due to React's automatic string escaping, any content security policy added into _document.ts will be
improperly escaped, leading this this:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-eval'"/>This is due to a long-standing known issue in React:
This tool searches for html files in the ./out directory of a next.js export, and fixes all occurrances of ' to
replace them to ' so that the content security can be parsed by browsers.
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-eval'"/>npm install --save-dev github:datalink/next-static-export-fix-csp-quotesIn your package.json, add it to the end of your build process as follows:
{
"scripts": {
"build": "next build && next export && next-static-export-fix-csp-quotes",
}
}
When building, you will see the following additional output:
Scanning dirdctory ./out for html files
Updating 404.html
Fixed 8 occurrances
Updating page.html
Fixed 8 occurrances
Updating app.html
Fixed 8 occurrances
Updating index.html
Fixed 8 occurrances
Done
This is licensed under the MIT licence, and can be freely used. There is no warranty; use at your own risk.
- This has not been testing on windows
- There are no unit tests yet