Fix parsing HTML/JSX tags to real elements

[ccloli]

This should fixed #2789.

Just replaces all the angle brackets to < and > to avoid parsing them as real HTML elements.

Here is the screenshot of the example that mentioned in origin issue, the checkbox is not showing and it displays its source code.

[facebook-github-bot]

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

[gaearon]

Thanks for the PR! Is this enough, or are there more things that need escaping? I'm thinking HTML entities or something like this. Is there a popular package we can use that does the escaping instead of hand rolling it?

[ccloli]

I think it can fixed most cases, but maybe not enough. I searched an article titled
There's more to HTML escaping than &, <, >, and " just now, maybe we still have more things to do.

Yahoo created a project named xss-filters, which has so many cases for protecting from XSS, so I think it also can be used here. Have a look?

[ccloli]

Hi, I notice that html-entities is in the dependence list of react-dev-utils, and it has already being used at react-dev-utils/webpackHotDevClient (line 141) to escape HTML entities:

// ......
var Entities = require('html-entities').AllHtmlEntities;
var ansiHTML = require('./ansiHTML');
var entities = new Entities();
// ......

function showErrorOverlay(message) {
  ensureOverlayDivExists(function onOverlayDivReady(overlayDiv) {
    // TODO: unify this with our runtime overlay
    overlayDiv.innerHTML =
      '<div style="' +
      overlayHeaderStyle() +
      '">Failed to compile</div>' +
      '<pre style="' +
      'display: block; padding: 0.5em; margin-top: 0; ' +
      'margin-bottom: 0.5em; overflow-x: auto; white-space: pre-wrap; ' +
      'border-radius: 0.25rem; background-color: rgba(206, 17, 38, 0.05)">' +
      '<code style="font-family: Consolas, Menlo, monospace;">' +
      ansiHTML(entities.encode(message)) + // <- uses `entities.encode()` to escape HTML entities
      '</code></pre>' +
      '<div style="' +
      'font-family: sans-serif; color: rgb(135, 142, 145); margin-top: 0.5rem; ' +
      'flex: 0 0 auto">' +
      'This error occurred during the build time and cannot be dismissed.</div>';
  });
}

However, in react-error-overlay/lib/components/code.js (line 49), it doesn't use html-entities to escape them (also not in dependencies).

// ......
import generateAnsiHtml from 'react-dev-utils/ansiHTML';
// ......

  const ansiHighlight = codeFrame(
    sourceCode.join('\n'),
    lineNum,
    columnNum == null ? 0 : columnNum - (isFinite(whiteSpace) ? whiteSpace : 0),
    {
      forceColor: true,
      linesAbove: contextSize,
      linesBelow: contextSize,
    }
  ); // <- maybe not parsed correctly, like treating source code as a string, see #2789
  const htmlHighlight = generateAnsiHtml(ansiHighlight); // <- ansiHighlight is not escaped

I'll try replacing the modification in previous commit with entities.encode(), or say do entities.encode() in ansiHTML, for better style and better safety. Some sections in the article that mentioned in previous comment maybe not necessary, like replacing variables to their values is not necessary here, so I think just replacing the HTML entities is okay, and no need to do more things that xss-filters implemented.

[Timer]

Nice catch on the html element escaping!

[Timer]

LGTM. I trust you that this works.

Thank you for digging into this.

[Timer]

Hi there! This change is out in [email protected]; please give it a go! Thanks.