XSS via img tag, redundant semicolons? - javascript

I was looking over the WebGoat exercises, and for one question they ask that you create a JavaScript alert using an img tag.
Their solution is thus:
<img src=x onerror=;;alert('XSS') />
Looking at their solution, I wonder why two (as opposed to just one) semicolns are necessary before the actual alert?

Indeed the semicolons aren't necessary i just tested the same tag w/o the semicolons on FF5 and Chrome latest, they both send the alerts with this
<img src=x onerror=;;alert('XSS') />
<img src=x onerror=alert('XSS') />
<img src="x" onerror="alert('XSS')" />
i think they are trying to stop the onerror event in the first semicolon, then output the bogus code out of the event in the alert
i tried this
<img src=x onerror=alert('eventfire');;alert('XSS') />
and it encloses both alerts inside the event, so its not running the second alert outside the event scope.
answer? seems to be doing the same thing w/o the semicolons (maybe there for old browsers that parse the html poorly and execute the alert outside the scope of the event???)

Related

Nesting quotes in HTML > JavaScript > WebForms or how to call a .NET method in a JavaScript method

Who would think so, but I actually need 3 levels of nested quotes in an ASP.NET WebForms page.
Here's what I have:
<img
src='<% ResolveClientUrl("~/SwissStyleguide/img/swiss.svg"); %>'
onerror="this.onerror=null; this.src='SwissStyleguide/img/swiss.png';"
alt="Confederatio Helvetica"
/>
Now, the first part, assigning a dynamically created URL to the src attribute works fine. The server resolves the given special URL and creates an absolute link for the client to fetch.
But the onerror handler is more tricky: since the src URL to the png image is already in an expression with double quotes, I can not invoke the ASP.NET ResolveClientUrl method, which strictly requires double quotes for the string argument.
I tried to do it like this (does not work!)
<img
src='<% ResolveClientUrl("~/SwissStyleguide/img/swiss.svg"); %>'
onerror="this.onerror=null; this.src='<% ResolveClientUrl("~/SwissStyleguide/img/swiss.png"); %>';"
alt="Confederatio Helvetica"
/>
But without much surprise, Visual Studio complains about this string. The only idea that comes to my mind is to use a string constant to avoid having the innermost quotes, but that seems very ugly.
Is there a way to escape or otherwise specify some or all of the quotes to make that work?
Note: I know about this question: When to use double or single quotes in JavaScript? but changing the quotes does not help in this case.
Well,... this turned out as an instance of the "<%$, <%#, <%=, <%# … what's the deal?" WebForms problem, answered perfectly here: https://stackoverflow.com/a/957321/79485
The solution is to use the equal sign after the percent sign and omit the trailing semicolon. Like this:
onerror="this.onerror=null; this.src='<%= ResolveClientUrl("~/SwissStyleguide/img/swiss.png") %>';"
I'll leave the question and this answer here as a reminder of anyone tripping over this too.
How about placing the attributes from the code-behind instead?
.aspx
<img id="image" runat="server" alt="Confederatio Helvetica" />
.aspx.cs (Page_Load)
image.Attributes.Add("src", Page.ResolveUrl("~/SwissStyleguide/img/swiss.svg"));
image.Attributes.Add("onerror", "this.onerror=null; this.src='" +
Page.ResolveUrl("~/SwissStyleguide/img/swiss.png") + "';";

Javascript lastChild call returns sibling, when using empty element tags

I have the following piece of Javascript:
//Clear out container
var container = document.getElementById("buy");
while (container.lastChild)
{
container.removeChild(container.lastChild);
}
and further down, the piece of HTML on which it operates:
<div id="buy" class="itemGroup" />
<canvas id="drawArea" width="200" height="200">
Your browser does not support HTML5 Canvas.
</canvas>
However, the Javascript code removes the canvas, unless the buy div uses start and end tags i.e.
<div id="buy" class="itemGroup">
</div>
Why is this? I thought the two, from an XML point of view, are equivalent? Using Chrome 29.0.1547.76 m on Windows 7.
Thanks in advance!
This is not a more complete answer than the comments already given per se, but I just can't add a comment to your post. Anyway, there are some tags which are not self closing and 'div' is one of them - which actually makes sense if you think about it. Semantically speaking, why are you making a 'division' if there's nothing in it?
Another tricky one is 'script'. Even if you are linking to an external script file in your page, you cannot use
<script type="text/javascript" src="example.js" />
this just doesn't work. Another one is 'textarea'. This renders any html after it useless!
<textarea cols="5" rows="5" />
Take a look at some other ones: http://xahlee.info/js/html5_non-closing_tag.html

TinyMCE merges A tags incorrectly

I've got the following problem with TinyMCE:
I've inserted the following code into a TinyMCE instance:
<p><img class="img-center" src="/_pics/articles/WAbOlemChF.jpg" alt="b" /></p>
<p><img class="img-center" src="/_pics/articles/cT89QKCChs.jpg" alt="v" /></p>
This results is the following:
If I place the cursor as indicated in the image above, and I hit the DELETE key, I get the following:
So far, so good, except that when I check out the code, it looks like this:
<p><img class="img-center" src="/_pics/articles/WAbOlemChF.jpg" alt="b" /><img class="img-center" src="/_pics/articles/cT89QKCChs.jpg" alt="v" /></p>
Note, that the A tags have been merged. As you'd image this raises a big problem since the "href" attribute was different. I would've expected it to put both A tags in the same paragraph, but keep them distinct.
Is it a TinyMCE bug, or there's something in the configuration that I can tweak so it merges only identical A tags?
I'm using v3.5.6, jQuery version.
We had a lot of wierd delete behaviours probably due to the fact that browsers have bugs.
Solution was to take care of the delte process and executing an own action to bypass the default behaviour. For this we defined several scenarios where unwanted things happened and tried to isolate that cases in order to be able to correct it.
If you don't want TinyMCE to mess with your code, just give it a class. This works in the WordPress implementation, so hopefully it will work for you too.
Example..
<p class="image"><img class="img-center" src="/_pics/articles/WAbOlemChF.jpg" alt="b" /></p>
<p class="image"><img class="img-center" src="/_pics/articles/cT89QKCChs.jpg" alt="v" /></p>
The class doesn't have to be defined, just give it an empty class if need be. Point is, TinyMCE won't remove anything that has a class and hence your code should remain untouched.

Inline event handlers and anonymous functions

I have a need to dynamically include and run a script in a page. I am using an image onload event for this:
<img src="blank.gif" onload="DoIt" />
The DoIt function looks like this (just made up this example):
this.onload=' ';this.src='image.jpg';
I have no control on the page itself (I only control the HTML string that the page will call), so I need to include the DoIt function explicitly in the markup.
I tried using an anonymous function, but it didn't work:
<img src="blank.gif" onload="function(){this.onload=' ';this.src='image.jpg';}" />
Should I just write the script inline, like this:
<img src="blank.gif" onload="this.onload=' ';this.src='image.jpg';" />
And in this case are there any limitations (e.g. script length)?
Thanks for your help!
The this won't work inside the function since the function is called by the window object, therefore the this will refer to window.
If you want to wrap your code inside a function you must wrap that function, call it with the this set to the element or pass the this as a parameter:
<html>
<body>
<!-- call the function and set the this accordingly-->
<img src="foo.png" onload="(function(){...}).call(this)" />
<!-- pass the this as a parameter -->
<img src="foo.png" onload="(function(e){....})(this)" />
</body>
</html>
Yet this doesn't really make sense to me:
I have no control on the page itself (I only control the HTML string that the page will call),
Do you only have control over the img tags? If you can output abritary HTML, then why not just put something in a `script' tag?
Update
With a script block you could declare your function in there and then simply call it in the onload event.
<script>
function doIt(el) {
// code in here
console.log(el.id); // you could do stuff depending on the id
}
</script>
<img id="img1" src="foo.png" onload="doIt(this)" />
<img id="img2" src="foo.png" onload="doIt(this)" />
Now you need only one function for many images.
And if you need to get really fancy, you can setup your script tag to pull in jQuery or any other library.
<script src="somepathtojquery"></script>
<script>
// do jquery stuff in herep
If you need a lot of these handlers jQuery could do the job.
Still I'm asking my self when you have full control over the HTML why don't you use a library in the first place? :)
Try:
<img src="blank.gif" onload="(function(el){el.onload=' ';el.src='image.jpg';})(this)" />

JavaScript inside an <img title="<a href='#' onClick='alert('Hello World!')>The Link</a>" /> possible?

<img title="<a href='#' onClick='alert('Hello World!')>The Link</a>" />
So I've got some specific question.. I already know that I can work with attributes inside a TITLE attribute.. But can I work with events inside a TITLE attribute?
(btw - It seems like a rubbish code, but this already works as is should on my web project - I just need a way to use some Javascript on this sheathed link.)
I USE Jquery framework.
No, this is, as you say "rubbish code". If it works as should, it is because browsers try to "read the writer's mind" - in other words, they have algorithms to try to make sense of "rubbish code", guess at the probable intent and internally change it into something that actually makes sense.
In other words, your code only works by accident, and probably not in all browsers.
Is this what you're trying to do?
<img title="The Link" />
When you click on the image you'll get the alert:
<img src="logo1.jpg" onClick='alert("Hello World!")'/>
if this is what you want.
Im my browser, this doesn't work at all. The tooltip field doesn't show a link, but <a href='#' onClick='alert('Hello World!')>The Link</a>.
I'm using FF 3.6.12.
You'll have to do this by hand with JS and CSS. Begin here
<img title="The Link" />
no, you can't do that, but you can use event handlers to change the title:
<img src="foo.jpg" onmouseover="this.title='it is now ' + new Date()" />

Categories