Question

There’s a gotcha when inserting img’s dynamically via scripts.

Take the following code to insert a image for a place:

newPlace.find('.PlaceThumb').append('<img src="' + place.ThumbnailUrl + '" alt="' + place.Name + '" width="50px" style = "padding:2px;"/>');

Someone could name their place: ” onload=”alert(‘hi’)” and the tag would get rendered as:

<img src="/item.aspx?id=123" alt="" onload="alert('hi')" width="50px" style = "padding:2px;"/>

When the image is loaded, the script will execute.

While only and tags support the onload attribute, this is a good lesson to never trust user input.

What is the “Correct” (nice, elegant, clean, general) way of doing this:

newPlace.find('.PlaceThumb').append('<img src="' + place.ThumbnailUrl + '" alt="' + place.Name.replace('"', '&quot;') + '" width="50px" style = "padding:2px;"/>');

I was thinking maybe with templates you could define an operator on strings that would UUencode them – similar to how a string prefixed with @ in C# has special meaning vis a vis backslashes. Is there a way to add this functionality to the standard .net string class?

Answer 1

I can’t tell if you’re using jQuery or not. If you are, then you can do something like this:

newPlace.find('.PlaceThumb').append('<img>');
$('.PlaceThumb img').attr('src', place.ThumbnailUrl).attr('alt', place.Name);

That may not be valid, it’s just off the top of my head, but should give you something to look into.