Preventing XSS when using .attr('href', url) in jQuery

Question

I want to update the href tag in jQuery. The data is untrusted. I'm trying to understand how can I craft a malicious input to cause an XSS type attack.

<a href='http://example.com' class='link'>Link</a>

My understanding is that the function below should terminate the href tag unexpectedly and create a new attribute onclick, but it doesn't work.

$('.link').on('click', function(e){
    e.preventDefault();
    $(this).attr('href',"' onclick='alert(\"ok\")'");    
});

Here's the fiddle : http://jsfiddle.net/c1d7tuda/1/

P.S. End goal is to use _.escape() for HTML entities, but want to justify its usage.

Injecting in the way you're trying won't work unless your javascript builds a new anchor tag using a plain html string. For example. $('<a href="' + userInput + '"></a> — Kevin B
@KevinB Based on your comment, is it correct to assume that I don't need to worry about escaping HTML entities as long as I'm using $.attr('href', '...') to update anchor tag ? — user
As long as the value isn't used elsewhere where it would be vulnerable to such an attack. — Kevin B

MrWerbenjagermanjensen MrWerbenjagermanjensen · Accepted Answer · 2015-11-19T19:57:00

If you're updating the href attribute of your link using unvalidated user input, a malicious user could supply javascript:alert(0) as their href value. Then, if a user clicked on the link, it would execute the malicious user's arbitrary javascript.

Preventing XSS when using .attr('href', url) in jQuery

1 Answers