DEV Community

Labnan
Labnan

Posted on

Be Aware of the !-- script Bug

Lets say you have this string in a variable (case insensitive):

`etc etc etc<!-- etc etc<scRipT> etc`
Enter fullscreen mode Exit fullscreen mode

This will break any html tag after it.

Or lets say you divided that into some variables:

const first = `etc etc etc <!--`;
const second = `anything`;
const third = `<script>`
Enter fullscreen mode Exit fullscreen mode

This will also break the html page.

Therefore please carefully assign any string that contains

`<!--<script>` 
Enter fullscreen mode Exit fullscreen mode

or similar into a variable, if it is inside <script> tag.

codepen example

Edit: The original title is changed

Feel free to ask any question related to this in the comments :)

Discussion (14)

Collapse
jayjeckel profile image
Jay Jeckel • Edited on

Something here seems to have messed up the article's feed card. The estimated read time and the save button are missing and instead there is a link to the article with weird text, the word "in" prefixed with a back tick, a quote character, and a space.
screen cap of the issue

I don't know how you did it, but Bobby Tables would be proud.

EDIT: Ah, I see it now. Having the commented script tag in the title is the issue and the extra link's weird text is the title's text between the script tags. Someone should definitely file an issue about this.

Collapse
labnan profile image
Labnan Author • Edited on

wow! I did not think it would create issue in this website.

For me it looks ok though.
Image

Edit:
I found it!
image

Collapse
code913 profile image
code913 • Edited on

"It's not a bug it's a feature"

Collapse
labnan profile image
Labnan Author

xD

Collapse
inhuofficial profile image
InHuOfficial

I can't replicate this, is it device specific or is it a particular part of the site (specific feed item)?

Collapse
labnan profile image
Labnan Author • Edited on

I changed the title, since it was causing an issue
The issue could be seen at dev.to/latest

This event was an accident though. I was just telling people about about handling input strings that are shown in a page and the title bugged.

Thread Thread
inhuofficial profile image
InHuOfficial

Can't replicate it, how strange!

Thread Thread
labnan profile image
Labnan Author

I have internet shortage right now so I can not test locally.

I will try replicating it locally and let you know exact steps when the internet problem is fixed, if you want. :)

I have never worked with forem repo before. It will be fun!

Collapse
lukeshiru profile image
LUKESHIRU

Some solutions for those wondering (which will be 1 in 100000 being that nobody puts a string like that in JS):

  • You can just escape that !:
<script>
    const works = `<\!--<script>`;
    console.log(works);
</script>
Enter fullscreen mode Exit fullscreen mode
  • Or you can put it in an external file:
// script.js
const works = `<!--<script>`;
console.log(works);
Enter fullscreen mode Exit fullscreen mode
<!-- index.html -->
<script src="./script.js"></script>
Enter fullscreen mode Exit fullscreen mode
  • Or you could just not put a string like that in your HTML.

Cheers!

Collapse
labnan profile image
Labnan Author

true! people hardly assigns like that.. the problem arises when someone is taking input from an api :)

Collapse
lukeshiru profile image
LUKESHIRU

Yup, but if that comes from an API it will not be directly in a script in your HTML, so you should be safe.

Thread Thread
labnan profile image
Labnan Author • Edited on

yup! it's safe as long as the string is not showing in the html that client receives.

So, if someone needs to show the string received from an api they have to be careful

Collapse
ksengine profile image
Kavindu Santhusa

That's how browsers parse HTML. Otherwise writing HTML parsers would be a headache.

Collapse
labnan profile image
Labnan Author

mhm.. but it does break the page!