Dynamically changing the HTML of a div with jQuery is causing HTML encoding to be lost

Question

I have a piece of code which dynamically alters the HTML of a div called 'accordion' on the fly like so:

// htmlstring contains some HTML containing some HTML encoding
// e.g. <span class='clickableComponent component' onclick="ComponentClicked('4612', 'Don&#39;t know', '44761');">Don't know</span>
$('#accordion').html(htmlstring);

However, after the HTML for the element 'accordion' is set, upon inspecting the HTML of the div via FireBug (or other developer tool) the encoded apostrophe is lost and is instead replaced by an apostrophe which is un-encoded. The encoding seems to get lost in the .html method.

I've tried using assigning the HTML using the .innerHtml method instead, but the same thing happens.

Does anybody have any ideas as to why this is happening?

score 1 · Accepted Answer · answered Apr 24 '14 at 16:16

When the HTML code is merged into the DOM, everything is canonicalized into the internal DOM representation, the original HTML coding is irrelevant. Apostrophe and ' are equivalent in HTML code, so they turn into the same thing in the DOM.

What you need to do is escape the inner apostrophe. htmlstring should contain:

<span class='clickableComponent component' onclick="ComponentClicked('4612', 'Don\'t know', '44761');">Don't know</span>

Issues like this are one of the reasons why inline Javascript in HTML elements is not recommended. It would be cleaner if you did something like:

$(".clickableComponent").click(function() {
    ComponentClicked('4612', "Don't know", '44761');
});

Thank you Barmar, I will try your solution to this tomorrow. Unfortunately I don't have time to implement your recommended .click function as this is a hotfix, but I will be sure to make note for future development. Thanks again. — The Judge, Apr 24 '14 at 22:10

score 0 · Answer 2 · answered Apr 24 '14 at 16:16

Try using the javascript escape \'

Here's an excerpt from the jQuery docs that explains why your HTML escape character is being rendered:

By design, any jQuery constructor or method that accepts an HTML string — jQuery(), .append(), .after(), etc. — can potentially execute code. This can occur by injection of script tags or use of HTML attributes that execute code (for example, ). Do not use these methods to insert strings obtained from untrusted sources such as URL query parameters, cookies, or form inputs. Doing so can introduce cross-site-scripting (XSS) vulnerabilities. Remove or escape any user input before adding content to the document.

Cheers Reece, will try this tomorrow. – The Judge Apr 24 '14 at 22:11 — The Judge, Apr 24 '14 at 22:11

score 0 · Answer 3 · edited May 23 '17 at 11:57

0

Check this link: HTML-encoding lost when attribute read from input field

you can use the function that Anentropic write.

function htmlEscape(str) {
    return String(str)
            .replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
}

edited May 23 '17 at 11:57

Community

1
1

answered Apr 24 '14 at 16:19

Jaime García Pérez

953
1
10
16

score 0 · Answer 4 · answered Apr 25 '14 at 09:57

Thanks go to Barmar for providing the first correct answer. In actual fact I refactored my code so that I wasn't passing complicated strings via a method parameter, but my you did answer my initial query correctly.

Thanks to other comments for your input too.

Dynamically changing the HTML of a div with jQuery is causing HTML encoding to be lost

4 Answers4

Linked

Related