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/

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

Answer 1

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.