TIL: you need to escape the </script> in a string in an inline script in HTML

Published on 02/03/2024, 235 words, 1 minutes to read

When I was implementing this change in my site, I ran into a weird issue where my literal JavaScript text was being inserted into the page as if it was in the literal HTML. This was odd at first, but then I realized what was going on.

I was converting code that looked like this:

<script src="https://ethical-ads.whatever/script.js" async></script>
<div
  data-ea-publisher="christinewebsite"
  data-ea-type="text"
  data-ea-style="fixedfooter"
></div>

Into something like this:

<script>
    if (!window.location.hostname.includes(".shark-harmonic.ts.net")) {
        document.write('<script src="https://ethical-ads.whatever/script.js" async></script>');
    }
</script>
<div data-ea-publisher="christinewebsite" data-ea-type="text" data-ea-style="fixedfooter"></div>

But then I saw '); } at the top of every page. This was odd, but when I figured out what was going on, I felt very dumb. I was writing a string that contained a </script> tag, which was causing the browser to think that the script tag was ending early.

The fix was simple: escape the </script> tag in the string. This is done by replacing the / with \/:

<script>
  if (!window.location.hostname.includes(".shark-harmonic.ts.net")) {
    document.write(
      '<script src="https://ethical-ads.whatever/script.js" async><\/script>'
    );
  }
</script>
<div
  data-ea-publisher="christinewebsite"
  data-ea-type="text"
  data-ea-style="fixedfooter"
></div>

Facts and circumstances may have changed since publication. Please contact me before jumping to conclusions if something seems wrong or unclear.

Tags: