Skip to content

Commit

Permalink
docs: move "Content Security Policy" to the "Customization" section
Browse files Browse the repository at this point in the history
  • Loading branch information
cheton committed Dec 4, 2024
1 parent 1626df3 commit 7c20fcf
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 6 deletions.
2 changes: 1 addition & 1 deletion packages/react-docs/config/sidebar-routes.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@ export const routes = [
{ title: 'Color Style', path: 'getting-started/color-style' },
{ title: 'Icons', path: 'getting-started/icons' },
{ title: 'The sx prop', path: 'getting-started/the-sx-prop' },
{ title: 'Security', path: 'getting-started/security' },
{ title: 'Tonic UI Versions', path: 'getting-started/versions' },
],
},
Expand Down Expand Up @@ -67,6 +66,7 @@ export const routes = [
<ToolsConfigurationIcon size="4x" {...props} />
),
routes: [
{ title: 'Content Security Policy', path: 'customization/content-security-policy' },
{ title: 'CSS Theme Variables', path: 'customization/css-theme-variables' },
{ title: 'Shadow DOM', path: 'customization/shadow-dom' },
],
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# Security
# Content Security Policy

## Content Security Policy
Content Security Policy plays a critical role in protecting against various attacks, most notably Cross-Site Scripting (XSS) and data injections. Its core function involves the inclusion of either a `Content-Security-Policy` header in the HTTP response or `<meta>` tags within the HTML of a page.

Content Security Policy (CSP) plays a critical role in protecting against various attacks, most notably Cross-Site Scripting (XSS) and data injections. Its core function involves the inclusion of either a `Content-Security-Policy` header in the HTTP response or `<meta>` tags within the HTML of a page.
## Getting Started

Tonic UI relies on [Emotion](https://emotion.sh/) for its styling system. To seamless integrate [Emotion](https://emotion.sh/) with CSP, it is essential to provide a `nonce` value to the `CacheProvider` component. Detailed instruction can be found in the [Emotion documentation](https://emotion.sh/docs/@emotion/cache).
Tonic UI relies on [Emotion](https://emotion.sh/) for its styling system. To seamless integrate [Emotion](https://emotion.sh/) with Content Security Policy, it is essential to provide a `nonce` value to the `CacheProvider` component. Detailed instruction can be found in the [Emotion documentation](https://emotion.sh/docs/@emotion/cache).

### Step 1: Implement a `EmotionCacheProvider` component

Expand All @@ -13,7 +13,11 @@ const EmotionCacheProvider = ({
children,
nonce,
}) => {
const cache = createCache({ key: 'tonic-ui', nonce });
const cache = createCache({
key: 'tonic-ui',
nonce,
});

return (
<CacheProvider value={cache}>
{children}
Expand Down

0 comments on commit 7c20fcf

Please sign in to comment.