blob: 85848b40555ebaf278402141ff13e86b52f9fe2e (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
---
title: "TIL: you need to escape the </script> in a string in an inline script in HTML"
date: 2024-02-03
type: blog
hero:
ai: "Photo by Xe Iaso, iPhone 13 Pro"
file: winter-drive
prompt: "A color-graded image of a snowy field taken from the side of a moving car."
---
When I was implementing [this change](https://github.com/Xe/site/commit/944fbf678403c77e158accd66363accbbe6d6eb4) 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:
```html
<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:
```html
<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 `\/`:
```html
<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>
```
|
