https://github.com/jlarky/react-json-script

Safe(r) way to set json content of script tag
https://github.com/jlarky/react-json-script

Last synced: about 1 month ago
JSON representation

Safe(r) way to set json content of script tag

• Host: GitHub
• URL: https://github.com/jlarky/react-json-script
• Owner: JLarky
• Created: 2024-04-29T02:28:31.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-04-29T02:49:55.000Z (8 months ago)
• Last Synced: 2024-04-29T03:35:38.630Z (8 months ago)
• Language: TypeScript
• Homepage: https://jsr.io/@jlarky/react-json-script
• Size: 5.86 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# @jlarky/react-json-script

## Why

- https://pragmaticwebsecurity.com/articles/spasecurity/json-stringify-xss

- https://twitter.com/ariesrclark/status/1784765484497617203

This causes hydration error (see why `dangerouslySetInnerHTML` in https://blog.logrocket.com/improving-react-seo-structured-data/#adding-structured-data-react-app):

```tsx

const App = () => {

  const data = {"id":1};

  return {JSON.stringify(data)}

}

```

This causes XSS (see https://pragmaticwebsecurity.com/articles/spasecurity/json-stringify-xss):

```tsx

const App = () => {

  const data = {"content":"alert('gotcha!')","id":1};

  return 

}

```

## Installation

```bash

bunx jsr add @jlarky/react-json-script

# or

npx jsr add @jlarky/react-json-script

```

## Example

```jsx

import { JsonScript } from "@jlarky/react-json-script";

const data = {

    "@context": "https://schema.org",

    "@type": "Organization",

    "url": "http://www.example.com",

    "name": "Unlimited Ball Bearings Corp.",

    "contactPoint": {

        "@type": "ContactPoint",

        "telephone": "+1-401-555-1212",

        "contactType": "Customer service"

    }

};

const App = () => (

  

);

```

## Development

To install dependencies:

```bash

bun install

```

To publish:

```bash

bun run publish

```