google / google/react-schemaorg

Consider not using dangerouslySetInnerHTML

Open
#16 6 comments 2 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.