google / google/react-schemaorg

Consider not using dangerouslySetInnerHTML

Offen
#16 6 Kommentare 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
TypeScript
Sterne
521
Forks
20
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

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!

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Keine Repository-Datei und kein Test sind benannt. Beginne mit der Prüfung der Komponente, die das JSON-LD-Snippet rendert, sowie der verlinkten React Helmet-Beispiele; ermittle das beabsichtigte Rendering-Verhalten auf dem Server und auf dem Client und ob das Ersetzen von dangerouslySetInnerHTML machbar ist. Als abgeschlossen sollte ein beschlossener Ansatz sowie eine Validierung der Sicherheitsauswirkungen vorliegen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react, typescript
Bereich
frontend, security
Issue-Typ
Refactoring
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
25/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.