Skip to content

Error overlay html encodes the ansi html formatting the error output #3575

Closed
@raix

Description

@raix
  • This is a bug
  • This is a modification request

Code

Reproduced in the CRA webpack 5 update branch using webpack error overlay in the WP5 CRA pr (replacing the CRA error overlay)
(The "wp5" branch is on the way to "main")

Expected Behavior

image

Actual Behavior

image

For Bugs; How can we reproduce the behavior?

ansiHTML returns error formattet using html as a text string but because it's handed of to document.createTextNode the browser will escape the string problem is that errorMessage is already escaped (as it should be to prevent XSS/script injection) so no need for the double escaping.

Suggestion:
Change

...
      const text = ansiHTML(errorMessage);
      const messageTextNode = document.createTextNode(text);
...

To:

...
      var text = ansiHTML(encode(errorMessage));
      var messageTextNode = document.createElement('div');
      messageTextNode.innerHTML = text;
...

For Features; What is the motivation and/or use-case for the feature?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions