https://github.com/robinvdvleuten/json-from-script
👮🏻 Tiny JSON parser for your CSP aware script tags.
https://github.com/robinvdvleuten/json-from-script
csp javascript json script security
Last synced: 2 months ago
JSON representation
👮🏻 Tiny JSON parser for your CSP aware script tags.
- Host: GitHub
- URL: https://github.com/robinvdvleuten/json-from-script
- Owner: robinvdvleuten
- License: mit
- Created: 2017-05-12T07:34:41.000Z (about 9 years ago)
- Default Branch: main
- Last Pushed: 2026-04-20T20:59:48.000Z (2 months ago)
- Last Synced: 2026-04-20T22:38:42.510Z (2 months ago)
- Topics: csp, javascript, json, script, security
- Language: JavaScript
- Homepage: https://npm.im/json-from-script
- Size: 268 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# json-from-script
A tiny (276B) JSON parser for your CSP aware script tags.
[](https://www.npmjs.com/package/json-from-script)
[](https://github.com/robinvdvleuten/json-from-script/actions/workflows/build.yml)
[](https://licenses.dev/npm/json-from-script)
Modern front-ends often need a tiny bit of server-rendered data to kick-start hydration or to configure a widget. The usual answer is an inline `` that hydrates a global variable—but that approach triggers strict [Content Security Policies](https://developers.google.com/web/fundamentals/security/csp/), can’t be cached independently, and forces you to hand-roll parsing and error handling for every page. **json-from-script** smooths out that workflow by treating `<script type="application/json">` tags as a simple, declarative data transport that is safe under CSP.
## Installation
```
$ npm install --save json-from-script
```
## Usage
When your HTML contains any script tag like this:
```html
<script type="application/json" class="data" data-attr="foo">{"bar":"baz"}
```
You can parse it in your JavaScript application like this:
```js
import jsonFromScript from 'json-from-script';
// Parsed will be { foo: { bar: 'baz' } }
const parsed = jsonFromScript();
```
Behind the scenes the helper scans the DOM for matching script tags, reads their `data-*` attributes, and returns a single object that is ready to feed into your app state or view models.
## API
### `jsonFromScript(selector, attribute)`
Parses every script element that matches the given selector and merges the JSON contents into a single object keyed by a data attribute.
- `selector `: CSS selector for the script tags to parse. Defaults to `script.data` which targets `` elements with the `data` class.
- `attribute <String>`: Name of the data attribute used to derive the property name on the returned object. Defaults to `data-attr`, which reads the value from `data-attr="..."` on each script tag.
The helper returns the aggregated object. If no matching scripts are found the result is an empty object. Invalid JSON will throw the same error you would get from `JSON.parse`, making it easy to catch misconfigured script blocks during development.
## License
MIT © [Robin van der Vleuten](https://robinvdvleuten.nl)