Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix parsing HTML/JSX tags to real elements #2796

Merged
merged 3 commits into from Aug 2, 2017

Conversation

Projects
None yet
4 participants
@ccloli
Copy link
Contributor

commented Jul 15, 2017

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.
image

@facebook-github-bot

This comment has been minimized.

Copy link

commented Jul 15, 2017

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 cla@fb.com. Thanks!

@facebook-github-bot

This comment has been minimized.

Copy link

commented Jul 15, 2017

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

@gaearon

This comment has been minimized.

Copy link
Member

commented Jul 15, 2017

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

This comment has been minimized.

Copy link
Contributor Author

commented Jul 15, 2017

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

This comment has been minimized.

Copy link
Contributor Author

commented Jul 15, 2017

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 Timer added the tag: bug fix label Jul 15, 2017

@Timer

This comment has been minimized.

Copy link
Collaborator

commented Jul 15, 2017

Nice catch on the html element escaping!

@gaearon gaearon added this to the 1.0.11 milestone Jul 15, 2017

@Timer

This comment has been minimized.

Copy link
Collaborator

commented Aug 2, 2017

LGTM. I trust you that this works.

Thank you for digging into this.

@Timer Timer merged commit cff167f into facebook:master Aug 2, 2017

2 checks passed

continuous-integration/appveyor/pr AppVeyor build succeeded
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
@Timer

This comment has been minimized.

Copy link
Collaborator

commented Aug 9, 2017

Hi there! This change is out in react-scripts@1.0.11; please give it a go! Thanks.

JohnNilsson referenced this pull request in JohnNilsson/create-react-app-typescript Aug 9, 2017

Fix parsing HTML/JSX tags to real elements (#2796)
* Fix parsing HTML/JSX tags to real elements

* Use `html-entities` to escape instead of pure `replace()`

* Remove unnecessary HTML entity replacing

zangrafx added a commit to absolvent/create-react-app that referenced this pull request Aug 13, 2017

Merge commit 'bfaee410c502a95076a6bd89721c76ca08e15f7b'
* commit 'bfaee410c502a95076a6bd89721c76ca08e15f7b': (39 commits)
  Publish
  Prepare for 1.0.11 release (facebook#2924)
  Update dev deps (facebook#2923)
  Update README.md
  Use env variable to disable source maps (facebook#2818)
  Make formatWebpackMessages return all messages (facebook#2834)
  Adjust the `checkIfOnline` check if in a corporate proxy environment (facebook#2884)
  Fix the order of arguments in spawned child proc (facebook#2913)
  Feature/webpack 3 4 (facebook#2875)
  Allow importing package.json (facebook#2468)
  Re-enable flowtype warning (facebook#2718)
  Format UglifyJs error (facebook#2650)
  Unstage yarn.lock pre-commit (facebook#2700)
  Update README.md
  Update README.md
  Add Electrode to alternatives (facebook#2728)
  Fix parsing HTML/JSX tags to real elements (facebook#2796)
  Update webpack version note (facebook#2798)
  Use modern syntax feature (facebook#2873)
  Allow use of scoped packages with a pinned version (facebook#2853)
  ...

# Conflicts:
#	packages/react-scripts/config/webpack.config.dev.js
#	packages/react-scripts/config/webpack.config.prod.js
#	packages/react-scripts/package.json

JohnNilsson referenced this pull request in JohnNilsson/create-react-app-typescript Sep 9, 2017

Fix parsing HTML/JSX tags to real elements (#2796)
* Fix parsing HTML/JSX tags to real elements

* Use `html-entities` to escape instead of pure `replace()`

* Remove unnecessary HTML entity replacing

Ayc0 pushed a commit to Ayc0/create-react-app that referenced this pull request Sep 18, 2017

Fix parsing HTML/JSX tags to real elements (facebook#2796)
* Fix parsing HTML/JSX tags to real elements

* Use `html-entities` to escape instead of pure `replace()`

* Remove unnecessary HTML entity replacing

kasperpeulen added a commit to kasperpeulen/create-react-app that referenced this pull request Sep 24, 2017

Fix parsing HTML/JSX tags to real elements (facebook#2796)
* Fix parsing HTML/JSX tags to real elements

* Use `html-entities` to escape instead of pure `replace()`

* Remove unnecessary HTML entity replacing

swengorschewski referenced this pull request in swengorschewski/cra-typescript-electron Oct 16, 2017

Fix parsing HTML/JSX tags to real elements (#2796)
* Fix parsing HTML/JSX tags to real elements

* Use `html-entities` to escape instead of pure `replace()`

* Remove unnecessary HTML entity replacing

jdcrensh added a commit to jdcrensh/create-react-app that referenced this pull request Oct 24, 2017

Fix parsing HTML/JSX tags to real elements (facebook#2796)
* Fix parsing HTML/JSX tags to real elements

* Use `html-entities` to escape instead of pure `replace()`

* Remove unnecessary HTML entity replacing

@lock lock bot locked and limited conversation to collaborators Jan 21, 2019

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.