ericcornelissen/webmangler

CSS and JavaScript embeds not detected when the tag/attribute is not all lowercase

Closed this issue · 0 comments

ericcornelissen commented

Bug Report

Description

When mangling a HTML document, the script and style embeds will be ignore if the <script> tag or <style> tag/style attribute (resp.) are not in all lowercase. Even though, generally speaking, browsers will interpret, e.g., <SCRIPT>...</SCRIPT> as a script tag.

This was discovered as part of: https://github.com/ericcornelissen/webmangler/security/code-scanning/4, https://github.com/ericcornelissen/webmangler/security/code-scanning/5, https://github.com/ericcornelissen/webmangler/security/code-scanning/6, https://github.com/ericcornelissen/webmangler/security/code-scanning/7 (all of which were closed as they're not security bugs).

Proof of Concept

  1. Have a HTML file with either a <script> tag or <style> tag or style attribute, or any combination, where the tag(s)/attribute(s) is not in all lowercase. For example:

    <html>
  <head>
    <STYLE>
      .cls-foo {
        display: block;
      }
    </STYLE>
    <SCRIPT>
      var x = document.querySelectorAll(".cls-bar");
    </SCRIPT>
  </head>
  <body>
    <ul id="id-list" STYLE="--color: red;" data-length="3">
      <li class="cls-foo" data-index="1">foo</li>
      <li class="cls-foo cls-bar" data-index="2">foobar</li>
      <li class="cls-foo baz" style="--color: blue;" data-index="3">foobaz</li>
    </ul>
  </body>
</html>

  2. Run WebMangler CLI (version 0.1.6) with WebMangler Core (version 0.1.24) and the default mangler plugins & default language plugins (at the exact versions found in the WebMangler Core package.json).

  3. Observe that the output is not fully mangled. For the example above:

    <html>
  <head>
    <STYLE>
      .cls-foo {
        display: block;
      }
    </STYLE>
    <SCRIPT>
      var x = document.querySelectorAll(".cls-bar");
    </SCRIPT>
  </head>
  <body>
    <ul id="a" STYLE="--color: red;" data-b="3">
      <li class="a" data-a="1">foo</li>
      <li class="a b" data-a="2">foobar</li>
      <li class="a baz" style="--b: blue;" data-a="3">foobaz</li>
    </ul>
  </body>
</html>