google / google/react-schemaorg
Consider not using dangerouslySetInnerHTML
- Dominant language
- TypeScript
- Stars
- 521
- Forks
- 20
- PR merge metrics
- No merged PRs in 30d
Description
Thank you for this package, I came across it following this issue: https://github.com/google/react-schemaorg/issues/9, as I'm still learning about `dangerouslySetInnerHTML` and XSS.
I noticed that this package uses `dangerouslySetInnerHTML`:
```js
```
---
In order to modify `head` on the website I'm working on, I use https://github.com/staylor/react-helmet-async which is an improved fork of https://github.com/nfl/react-helmet, for React 16+.
I noticed https://github.com/nfl/react-helmet readme has an example for `JSON-LD` which doesn't use `dangerouslySetInnerHTML`:
```js
<Helmet>
{/* inline script elements */}
<script type="application/ld+json">{`
{
"@context": "http://schema.org"
}
`}
```
(please note that I added the first and last lines to make the example shorter)
I suppose in the case of https://github.com/google/react-schemaorg, such a syntax (not using `dangerouslySetInnerHTML`) wasn't followed because it has constraints:
- it requires to call `renderStatic` on the server for https://github.com/nfl/react-helmet, or
- it requires to provide `HelmetProvider` for https://github.com/staylor/react-helmet-async
I suppose https://github.com/google/react-schemaorg is aiming for simplicity and not using any `Helmet` package for this reason.
---
**If within a project we have the choice then what would you recommend please?**
Option a)
```js
<script type="application/ld+json">{JSON.stringify(this.props.item, safeJsonLdReplacer, this.props.space)}
```
Thank you in advance for your time!
Contributor guide
Assessment
This issue has not been assessed yet.