Using user input inside JavaScript breaks code

Question

I am using user input inside JavaScript. And of course to be safe my framework is changing some symbols to HTML codes. But for some reason that breaks my JavaScript. So for example this works:

<a onclick="alert('hello')">Hello</a>

But this doesn't:

<a onclick="alert('hel l&#039; lo')">Hello</a>

Why doesn't the below work and how can I make it work?

Quentin · Accepted Answer · 2019-07-11 22:52:53Z

3

' is HTML for '. The HTML is parsed and the result passed to the JavaScript compiler so your JavaScript is alert('hel ' lo') and you can't have an unescaped ' in a string literal delimited with ' characters.

Escaping data to make it safe to insert into HTML is not enough to make it safe to insert into JavaScript which is then inserted into HTML in turn.

Store the user input in a data-* attribute (which is plain HTML so you can use ' safely) and then read the attribute from your JavaScript.

answered Jul 11, 2019 at 22:52

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brad · Accepted Answer · 2019-07-11 22:53:35Z

2

You're inserting a character reference for a single quote '.

Even though you're using ', when it hits JavaScript, it's a quote mark. Therefore, you're ending the string literal and causing a syntax error.

answered Jul 11, 2019 at 22:53

Brad

164k57 gold badges380 silver badges559 bronze badges

Collectives™ on Stack Overflow

Using user input inside JavaScript breaks code

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related