I'm having an issue with jQuery's remove() method in IE. It's removing the element, but not entirely: it's leaving the last 2 closing tags.
I'm using ASP.Net Web Forms. In the page, we're using a 3rd party widget, which is a Javascript include. Part of the 3rd party widget is a search box and button inside of a form. (Everything in the div class="getquote" container below comes from the 3rd party widget).
Here is the page:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="TestFooBar.aspx.cs" Inherits="MyProject.TestFooBar" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="top">Some Stuff</div>
<div class="getquote">
<div class="box">
<form style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px;
padding-top: 0px" action="http://foo.com/?q=bar"
method="post" target="_self">
<input class="ticker" onclick="this.select()" value="Enter foo" maxlength="15"
type="text" name="fooInput" jquery123456789="42" />
<input class="go" value="Get Foo" type="submit" name="Go" />
</form>
</div>
</div>
<div id="bottom">Some More Stuff</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(function() {
alert($("div").length)
$('div.getquote').remove();
alert($("div").length)
});
</script>
</div>
</form>
</body>
</html>
ASP.Net developers will immediately recognize a huge issue: you cannot have a form inside an ASP.Net web form, because web forms uses a single outer form element wrapped around the entire page.
So my solution is to use jQuery to remove the form and its functionality like so:
$(function() { $('div.getquote').remove(); });
Unfortunately, remove() doesn't work correctly in IE. It leaves the following markup behind:
</form></DIV>
Can anyone explain why this is occuring and what a possible solution may be?
ANALYSIS UPDATE
I still don't have a definitive solution, but believe the problem may be the improperly formed html. when you view the source through IE developer toolbar, here is the result.
<FORM id=form1 method=post name=form1 action=TestFooBar.aspx>
<DIV><INPUT id=__VIEWSTATE value=/wEPDwULLTE2MTY2ODcyMjlkZJK6qpmH4eDoZyoX9RueM4keR6Hd type=hidden name=__VIEWSTATE> </DIV>
<DIV>
<DIV id=top>Some Stuff</DIV></FORM>
<DIV id=bottom>Some More Stuff</DIV>
<SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></SCRIPT>
<SCRIPT type=text/javascript>
$(function() {
alert($("div").length)
$('div.getquote').remove();
alert($("div").length)
});
</SCRIPT>
</DIV></FORM>
So, while jQuery successfully removed most of the <div>, it left behind the closing </form> artifact.
As far as I can see with the given HTML the remove() method is working fine... It is removing the div with class getquote and all its children.
The form and divs left in the page are outside of the said element so it will not be removed by the given command $('div.getquote').remove();.
I think you may have to rethink about the contents of your HTML since there is a form element inside another form element, I think it is not a properly formatted html.
I've come to the conclusion that what I'm trying to do is not possible in the browser layer. The problem with nesting a <form></form> element. IE will ignore the <form>, but when it gets to the </form>, it will close off the outer form, which throws of parsing.
I've then got several options:
1) Never, ever use ASP.Net Web Forms again. Instead go with ASP.NET MVC. OK, this is my dream, but not realistic for legacy apps.
2) Prefer XML feeds over JS includes when using web forms. Generally, this is probably better anyway, but managers love being told by a 3rd party that their widget can be dropped into a page in 5 minutes with only 1 line of code.
3) Don't call the 3rd party JS include in the browser, but instead, call it from a custom server method. Then, use Regex to strip the offending markup and pass what you need to the browser. Ugly hack that should only be done if 2) is not available.
Related
I am a cybersecurity student trying to understand some basic HTML injections. I have been working on this code for a few days and can't understand what I am doing wrong. The code that I have currently does allow for injection, for example if I put <h1>test</h1> into the textbox, it will display test as a header. But if I try <script>alert(1)</script> it won't actually run the script. I have tried setting the value of the text box to "" or with the thought that I could close out that line by inputting the following into the textbox: "><script>alert(1)</script>
I've also tried to cancel out the remainder of the code by adding a comment to the end like this: <script>alert(1)</script><!--
I've tried a number of combinations of each with no luck. Now I actually need to be able to inject a script since I'm playing around with CSP and how that affects injection of scripts into the webpage. I currently DO NOT have a csp specified that would restrict the JavaScript from running. Some other things I've tried include using different browsers, changing browser security, and ensuring that JavaScript is enabled in the browser. Any help would be greatly appreciated!!
<html>
<script language='JavaScript'>
function getwords(){
textbox = document.getElementById('words');
label = document.getElementById('label');
label.innerHTML = textbox.value;
}
</script>
<body>
<input type="text" id="words">
<input type="button" onclick="getwords()" id="Button" value="Enter" />
<label id="label">
</label>
</body>
</html>
That's because <script>s run at page load, and, when the label's content change, the scripts have ran already.
However, if you inject <script> tags to a different page (through the backend (XSS means Cross-Site Scripting)), it does work.
Alternatively, to make it work in a scenario, where the content injected after page load (like your case), you can use JS events (like onclick) to run your code:
<div onclick="alert(1)">Click me!</div>
Or, to execute it without user interaction, you could use an <iframe>'s onload event:
<iframe onload="alert(1)" style="display:none"></iframe>
to execute javascript from your form, you can try:
<iframe src=javascript:alert(1)>
or
<img src=x onerror=alert(1)>
Also worth noting:
script elements inserted using innerHTML do not execute when they
are inserted.
To manually execute JavaScript, you may do the following
without editing your HTML file, add this to the Input field on your Browser.
<iframe onload="alert(1)" style="display:none"></iframe>
More information on why this works here
More on how you can perform actions like this here: developer.mozilla.org
<html>
<script language='JavaScript'>
function getwords(){
textbox = document.getElementById('words');
label = document.getElementById('label');
label.innerHTML = textbox.value;
}
</script>
<body>
<input type="text" id="words">
<input type="button" onclick="getwords()" id="Button" value="Enter" />
<label id="label">
</label>
</body>
</html>
In my application one block is loaded with the controls dynamically. After loading the dynamic controls the data is update by using the angular js. But the angular js is working with static placed controls. But not with dynamic controls.
Here I placing the dynamic code What I tried to get.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#ren").html('<p>Name: <input type="text" ng-model="name"></p>');
});
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Input something in the input box:</p>
<div id="ren"></div>
<p ng-bind="name"></p>
</div>
<button>click</button>
</body>
</html>
Here the input control dynamically added to the div. The text I enter in control does not appering on paragraph. But this work fine if the input control place in div static.
Am I doing any wrongly. please solve my problem.
Probably your html attached via jquery function, is not registered to angular's watch tree. as a result, it doesn't trigger a digest cycle when you type to input with ng-model. Also this kind of usages angular with jquery in the dom edition level is not recommended. In my opinion, you should use directive instead of that jquery-dom operation
I'd prefer to do it in angular way, rather than mixing jQuery with angular. Because directly adding DOM to angular context will not worked as angular compiled DOM(means angular binding will not work on newly injected DOM). You need to compile that DOM with $compile service with specific scope before injecting it into DOM to enable binding on it.
Lets follow this way, which is fully angular way of doing it. There would be ng-click directive on the button, and will toggle a flag to show and hide element & we will render that array using ng-if
HTML
<p>Input something in the input box:</p>
<div id="ren">
<p ng-if="showName">Name: <input type="text" ng-model="name"></p>
</div>
<p ng-bind="name"></p>
</div>
<button type="button" ng-click="showName!=showName">click</button>
I am using Prettify.js and css for my web site but it is not working for HTML
Let's say I have HTML like this:
<div style="padding:3px 0px">
<asp:Label ID="lblTotalAns" runat="server" Text="0 Answers" CssClass="ansHeading" />
</div>
How it will render by prettify?
You have to change < to < and > to > otherwise your code gets rendered by the browser. So your code has to look like this:
<pre class="prettyprint">
<div style="padding:3px 0px">
<asp:Label ID="lblTotalAns" runat="server" Text="0 Answers" CssClass="ansHeading" />
</div>
</pre>
I have created a simple example with your html source: http://jsfiddle.net/aSb76/
This can also be seen in prettify tests source and the result page.
The basic setup on howto include prettify.js is described in the README.
I have no clue about escaping in ASP, but the first search result in Google for something
like 'asp encode html entities' brought up <%= Server.HTMLEncode(sValue) %>. Maybe you can use this.
I would like to propose an alternative solution through which you could achieve the same result (that I assume) you would like to get (= syntax highlighted HTML code shown embedded in a webpage).
Github has a neat service (called Gist) that is used for saving little code snippets online and it allows:
syntax highlighting
embedding of code snippet in your HTML (with 1.)
Here you can see your example markup on Github Gist: https://gist.github.com/2012701
Here you can see it embedded in HTML: http://jsfiddle.net/6YHDu/
If the code you want to show syntax highlighted is generated dynamically (not entered manually), then forget my proposal and go with Prettify.js, otherwise Gist is a very user friendly alternative.
You would use it like this:
In your <head> element:
<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>
In your <body> element:
<body onload="prettyPrint()">
<div style="padding:3px 0px">
<asp:Label ID="lblTotalAns" runat="server" Text="0 Answers" CssClass="ansHeading" />
</div>
</body>
I agree with #tonymarschall I found this alternative if you are looking for one. They say you can use instead of and you wouldn't have to decorate your code with ugly <s Maybe there's some escape involved with Prettify.js as well? After all it is made by Google!
hey Guys,
I am trying to write dynamic html bean using java script
but I keep geting the "function is not found" JS error when I press the button ..
here is a sample code
<html>
<html:form action="loginAction.do" >
<head>
<script type="text/javascript">
function test(){
document.getElementById('dd').innerHTML =
"<html:text property='pid'/>";
}
</script>
</head>
<body>
<table align="center">
<tr>
<td align="center">
<input type="button" value="addprod" onclick="test()"/>
</td>
</tr>
<tr>
<td align="center">
<div id="dd"></div>
</td>
</tr>
</table>
</html:form>
</body>
</html>
I don't know about the
<html:form action="loginAction.do" >
where it should be located
I tried to locate it within the <body>
but I got a big exception due to writing <html:text property='pid'/> in JavaScript outside the <html:form>
...
need your help,
Regards,
I think struts is trying to parse the <html:text /> as a tag in your script, rather that just a javascript string. Try moving the <html:form action="loginAction.do" > into the body AND the <script> within the <html:form> similar to this fiddle http://www.jsfiddle.net/pL4Aq/1/
However, it works in the fiddle because it is just straight HTML... I don't think what you are trying to do will work. <html:text > is a custom tag that gets processed on the server, does a bunch of stuff, and then generates HTML for you. You will never actually see <html:text> if you view the source from your browser, even though it is in your jsp.
You might want to try changing the <html:text > to a straight <input type="text"> tag (in which case, you could just move the <html:form> into the body and leave the script where it is).
I am completely agreed with what Mike is saying.
Writing <html:text> inside javascript is useless since javascript is executing on client side while struts is required to translate this tag to html tag.
Better to write <input type="text"> inside javascript and keeps its name as "prop" if you want struts to fill the value of that text inside the form bean property "prop". Keep the <html:form in body tag. This will work for you.
It should work in a <body> tag.
I've been reading about XSS and I made a simple form with a text and submit input, but when I execute <script>alert();</script> on it, nothing happens, the server gets that string and that's all.
What do I have to do for make it vulnerable?? (then I'll learn what I shouldn't do hehe)
Cheers.
Indeed just let the server output it so that the input string effectively get embedded in HTML source which get returned to the client.
PHP example:
<!doctype html>
<html lang="en">
<head><title>XSS test</title></head>
<body>
<form><input type="text" name="xss"><input type="submit"></form>
<p>Result: <?= $_GET['xss'] ?></p>
</body>
</html>
JSP example:
<!doctype html>
<html lang="en">
<head><title>XSS test</title></head>
<body>
<form><input type="text" name="xss"><input type="submit"></form>
<p>Result: ${param.xss}</p>
</body>
</html>
Alternatively you can redisplay the value in the input elements, that's also often seen:
<input type="text" name="xss" value="<?= $_GET['xss'] ?>">
resp.
<input type="text" name="xss" value="${param.xss}">
This way "weird" attack strings like "/><script>alert('xss')</script><br class=" will work because the server will render it after all as
<input type="text" name="xss" value=""/><script>alert('xss')</script><br class="">
XSS-prevention solutions are among others htmlspecialchars() and fn:escapeXml() for PHP and JSP respectively. Those will replace among others <, > and " by <, > and " so that enduser input doesn't end up to be literally embedded in HTML source but instead just got displayed as it was entered.
Have the server output the input back to the client.
You should "inject" the script. So if you have a text-input, you should put in the form:
" /> <script>alert();</script>
This way you first close the attribute of the existing HTML and then inject your own code. The idea is to escape out the quotes.
Three simple things:
If you're not outputting untrusted data to the page at some point there is no opportunity for XSS
All your untusted data (forms, querystrings, headers, etc) should be validated against a whitelist to ensure it's within an acceptable range
All your output to the screen should be endcoded with an appropriate library (ie Anti-XSS for .NET) onto the appropriate language (HTML, CSS, JS, etc).
More info with examples in OWASP Top 10 for .NET developers part 2: Cross-Site Scripting (XSS).
Google made a really awesome tutorial that covers XSS and other security vulnerabilities here. It can help you understand how these issues are exploited in real applications.