Safe string output in React ecosystem

Question

If you want to display a string like °F in a React view as °F, I've found the documented way to do this as something like:

import React from 'react';

export default function renderSafeHTML(rawHTML, element = 'div') {
  return React.createElement(element, {
    dangerouslySetInnerHTML: {
      __html: rawHTML
    }
  });
}

And use as something like:

{renderSafeHTML('&deg;F')}

Is there any sort of helper in the ecosystem for simplifying escaped content? Ember has {{content}} for escaping and {{{content}}} for displaying content w/o escaping and .safeString for marking strings as safe.

Is there something like that in React? I'd be curious about trying to add this functionality to JSX as {} and {{}}, similar to Ember. Why doesn't this exist in React?

random-forest-cat · Accepted Answer · 2017-12-27 20:22:49Z

2

I am using react 16x

You don't need a helper for unicode - you can embed unicode characters directly in JSX

<h1>40{'\u00B0'}F</h1>

or

<h1>40°F</h1>

This will tell you everything you need to know:

https://shripadk.github.io/react/docs/jsx-gotchas.html#html-entities

answered Dec 27, 2017 at 20:22

random-forest-cat

36.3k12 gold badges127 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Derek Hopper · Accepted Answer · 2017-12-27 19:26:38Z

1

I believe React wants you to know its dangerous. They want you to go to the effort of typing all of that out. They don't want to make it easier.

This is taken from their docs:

In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack. So, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it’s dangerous.

https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

answered Dec 27, 2017 at 19:26

Derek Hopper

2,25814 silver badges20 bronze badges

Collectives™ on Stack Overflow

Safe string output in React ecosystem

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related