Avoid using dangerous JSX properties

[philipjonsen]

DESCRIPTION
Dangerous properties in React are those whose behavior is known to be a common source of application vulnerabilities. The properties names clearly indicate they are dangerous and should be avoided unless great care is taken.

dangerouslySetInnerHTML is React's replacement for using innerHTML in the browser DOM. 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.

BAD PRACTICE

import React from 'react';

const Hello = <div dangerouslySetInnerHTML={{ __html: "Hello World" }}>;

RECOMMENDED

import React from 'react';

const Hello =

Hello World

;

Dangerous property 'dangerouslySetInnerHTML' found
src/containers/Profile/Posts/Comments.js

      </div>
      <div className="info">
        <h3>{name}</h3>
        <span dangerouslySetInnerHTML={renderHtml(content)} />
        <div className="time">
          <time>{time}</time>
        </div>

Dangerous property 'dangerouslySetInnerHTML' found
src/containers/Profile/Posts/Comments.js

      </div>
      <div className="info">
        <h3>{name}</h3>
        <span dangerouslySetInnerHTML={renderHtml(content)} />
        <div className="time">
          <time>{time}</time>
          <button type="button" onClick={handleLike}>

Dangerous property 'dangerouslySetInnerHTML' found
src/containers/Profile/Posts/Posts.js

        {newData.type === 'video' && (
          <div
            className="video-container"
            dangerouslySetInnerHTML={renderHtml(newData.video)}
          ></div>
        )}
      </div>