google / google/react-schemaorg
Consider not using dangerouslySetInnerHTML
- 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
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