How to stop jQuery converting html entities into valid HTML?

Question

Weeding out a few issues with my site when I found this curious issue.

<img src=".." width="1200" height="1200" alt="&lt;script&gt;alert(&quot;foo&quot;);&lt;/script&gt;" />

The CMS appears to have done it's jobs and converted <script>alert('foo')</script> into what you see above. I display the caption with the following code.

site.caption = {

    container : $('#caption'),

    set : function(str) {

        if (str && str.length) {
            this.container.html('<span>'+str+'</span>').show(); console.log(str);
        } else {
            this.container.hide();
        }

    }

};

The function is called like this.

site.caption.set($(nextSlideElement).find('img').attr('alt'));

When this line runs an alert box pop's up with the text 'foo'. When I do the following in the site.caption.set function it shows the valid html.

console.log(str);

I am using jQuery 1.8.3. Does anyone know why this is happening? How do I show the text <script>alert('foo')</script> without it being run?

Quentin · Accepted Answer · 2013-06-06 14:03:26Z

3

jQuery isn't converting it, the browser is when it parses the HTML.

If you want to treat a string as text instead of HTML, then use jQuery('foo').text(value) instead of jQuery('foo').html(value).

answered Jun 6, 2013 at 14:03

Quentin

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

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

Comments

Tim Rogers · Accepted Answer · 2013-06-06 14:07:38Z

1

this.container.html('<span>'+str+'</span>')

Never concatenate HTML strings. Let jQuery do it for you. Get into this habit and you won't run into this problem.

this.container.empty().append($('<span/>').text(str));

answered Jun 6, 2013 at 14:07

Tim Rogers

21.8k8 gold badges55 silver badges69 bronze badges

Collectives™ on Stack Overflow

How to stop jQuery converting html entities into valid HTML?

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