History

Hassan El Mghari 33aa51ab26 Change README structure in examples (#35349 ) Changed the README structure in all examples to take out the Stackblitz button and include it as a link instead using a [bash script](https://gist.github.com/Nutlope/a8f3556a5a401e32a8c6278b782ebf8a/revisions). I also added the Vercel deploy button to 15 READMEs that didn't have it.		2022-03-16 21:39:26 +00:00
..
pages	Add options to defaultGetInitialProps and upgrade styled-jsx-with-csp example (#32594 )	2021-12-17 23:27:56 +00:00
.gitignore	Add an example for styled-jsx with content security policy (#23021 )	2021-03-12 19:03:24 +00:00
package.json	Add options to defaultGetInitialProps and upgrade styled-jsx-with-csp example (#32594 )	2021-12-17 23:27:56 +00:00
README.md	Change README structure in examples (#35349 )	2022-03-16 21:39:26 +00:00

README.md

Styled-JSX with Content Security Policy

This example showcases how you can use nonce for style-src directive in Content Security Policy with styled-jsx.

Checkout the demo and notice the following,

style-src directive in Content-Security-Policy response header.
meta tag to pass on the nonce to styled-jsx for client-side rendering.
style tags with nonce attributes.

Deploy your own

Deploy the example using Vercel or preview live with StackBlitz

How to use

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example styled-jsx-with-csp styled-jsx-with-csp-app
# or
yarn create next-app --example styled-jsx-with-csp styled-jsx-with-csp-app

Deploy it to the cloud with Vercel (Documentation).