rsnext/examples/styled-jsx-with-csp
Karthikeyan Ranasthala c1b2b3f91f
Add an example for styled-jsx with content security policy (#23021)
This is an example on how to use styled-jsx with content security policy.
2021-03-12 19:03:24 +00:00
..
pages Add an example for styled-jsx with content security policy (#23021) 2021-03-12 19:03:24 +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 an example for styled-jsx with content security policy (#23021) 2021-03-12 19:03:24 +00:00
README.md Add an example for styled-jsx with content security policy (#23021) 2021-03-12 19:03:24 +00:00

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:

Deploy with Vercel

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).