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 :)

Top comments (11)

Collapse
 
jayjeckel profile image
Jay Jeckel • Edited

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 • Edited

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
 
grahamthedev profile image
GrahamTheDev

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 • Edited

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
 
grahamthedev profile image
GrahamTheDev

Can't replicate it, how strange!

Thread Thread
 
labnan profile image
Labnan

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
 
ksengine profile image
Kavindu Santhusa

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

Collapse
 
labnan profile image
Labnan

mhm.. but it does break the page!

Collapse
 
labnan profile image
Labnan

xD

Collapse
 
labnan profile image
Labnan

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

 
labnan profile image
Labnan • Edited

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