Closing script tag in string causes data to be injected into the DOM

[liamkirsh]

Quick Summary: If a string containing a </script> tag is passed to any function that causes the string to be inserted as-is into the JavaScript that Elm generates, the remainder of the Elm-generated code is injected into the DOM outside of a script context.

SSCCE

import Html exposing (text)

main =
  text "</script><script>alert(`This shouldnt be allowed`)</script>"

Output (line 4378):

var $author$project$Main$main = $elm$html$Html$text('</script><script>alert(`This shouldnt be allowed`)</script>');

• Elm: 0.19.1
• Browser: Mozilla Firefox 60.5.1esr (64-bit) and 71.0 (64-bit)
• Operating System: Debian GNU/Linux 9 and Windows 10 Home Pro

Additional Details

This occurs because the browser's HTML parser runs before the JavaScript parser. The </script> tag closes the JavaScript context generated by the compiler. This doesn't seem to be a security issue unless the developer enters an untrusted string into Elm application code.

Another example of the behavior is if a developer calls Http.get and places the closing script tag in the URL value.

All of the following variations will reproduce the bug: </SCRIPT>, </script >, </script foo>

Probably the same bug referenced in issue #1780.

Proposed Fix Approaches

• Escaping or filtering the tag would change the expected value of the string, which could lead to correctness issues.
• If the JavaScript builder separates the tag in Elm into multiple JavaScript strings, this would preserve correctness. For example, the text from the SSCCE could be built into '</' + 'script><script>alert(`This shouldnt be allowed`)</' + 'script>');

[malaire]

HTML standard recommends escaping </script as <\/script, and also escaping <!-- as <\!-- and <script as <\script.

From 4.12.1.3 Restrictions for contents of script elements

The easiest and safest way to avoid the rather strange restrictions described in this section is to always escape "<!--" as "<\!--", "<script" as "<\script", and "</script" as "<\/script" when these sequences appear in literals in scripts (e.g. in strings, regular expressions, or comments), and to avoid writing code that uses such constructs in expressions. Doing so avoids the pitfalls that the restrictions in this section are prone to triggering: namely, that, for historical reasons, parsing of script blocks in HTML is a strange and exotic practice that acts unintuitively in the face of these sequences.

[liamkirsh]

Thanks @malaire. Per ECMAScript specifications (5, 6, 7), a CharacterEscapeSequence followed by a NonEscapeCharacter has a character value of the NonEscapeCharacter. That means that the JavaScript interpreter treats '<\/script>' as strictly equal to '</script>'. I think that the best solution here is to have the parser escape forward slashes in Elm string literals. I've tested this approach and it produces the correct behavior for the SSCCE.

[liamkirsh]

Oh, cool! <!-- <script> causes the closing script tag to be evaluated in a script context, provoking a SyntaxError so that the script never executes.

import Html exposing (text)


main =
  text "Consider this string: <!-- <script>"