Executing javascript present in the value field of inputs - JavaScript - javascript

I have a form in html:
<form name="foo" action="http://localhost:3000/my_url" method="POST">
<input type="text" name="username" value="alert('hello')" >
</form>
I need to get that JavaScript in the value field for the input to execute, but only through the form's submit. The reason is that page is a template so I don't control it (can't have
<script>
var input = document.getElementsByName("username");
</script>
or any other <script>tag added to the page. I'm trying to prove that's possible an attack to take place over malformed <input> fields, specially using templates.
How can I have that Javascript to execute on the form submission? Remember I'm not allowed to modify the page content except for that piece.
Since I'm doing a POST that form, I can set the <input> field (and only the <input> field) to whatever I want.
I could do
username=<script>alert('hello')<script>
<input type="text" name="username" value="<script>alert('hello')<script>" >
or
username=window.onload = function() { alert('hello') }
<input type="text" name="username" value="window.onload = function() { alert('hello') }" >
I have thought about doing a
username=document.forms['myform'].onsubmit() = function() { alert('hello') }
<input type="text" name="username" value="document.forms['myform'].onsubmit() = function() { alert('hello') }" >
All of those are valid. However I need to get the Javascript in the tag to execute. How can I do that? The security flaw is how the` tag can be exploited if not properly sanitized. As per #guest271314 "requirement include adding tag ..."

When you use a template engine to render html content the server normally sanitize and escape it to prevent passive injection of cross site scripts or XSS for short.
Such attack can be easily achieved on a server that does not enforce the previously mentioned security measures by posting malformed content that will happily be rendered later by the template engine.
For example a form that sends user input
<form name="foo" action="http://localhost:3000/my_url" method="POST">
<input type="text" name="username" value="" >
</form>
If the user sends something like "><script>alert('foo')</script> and later you display this input in another form
<form name="bar" action="http://localhost:3000/my_other_url" method="POST">
<input type="text" name="username" value="#template_engine_render(posted_username_value)#" >
</form>
The resulting output will be
<form name="bar" action="http://localhost:3000/my_other_url" method="POST">
<input type="text" name="username" value="">
<script>alert('foo')</script>
</form>
Because the "> caracters close the input tag and you will end up executing arbitrary user javascript code in your page.
This is why "Never trust user input" is one of the most basic security rules of the web.

Try utilizing Function
Note, submission of form at stacksnippets appear blocked; substituted click event for submit event; i.e.g., click on input at stacksnippets for value of input to be called as parameter to Function.
document.forms["foo"].onclick = function(e) {
Function(this.children[0].value)()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="foo" action="" method="POST">
<input type="text" name="username" value="alert('hello')" >
</form>

Related

Submit multiple forms with one click to an iframe

would anybody be able to help me with some code to submit all of my forms to an iframe with a single click? In my actual code I have 5+ forms that all need to be submitted with one button press. I have tested submitting one form and it submits correctly to the iframe. There must be a simple way, possibly some jQuery to submit all of the forms in a loop?
<form name="1398694471249" method="post" action="WuFoo.aspx" target="formresponse" id="1398694471249">
<input type="hidden" name="Title" id="Title" value="Mr">
<input type="hidden" name="FirstName" id="FirstName" value="Oliver">
<input type="hidden" name="Surname" id="Surname" value="Clark">
<input type="hidden" name="DateOfBirth" id="DateOfBirth" value="19861230">
</form>
<form name="1528632259273" method="post" action="WuFoo.aspx" target="formresponse" id="1528632259273">
<input type="hidden" name="Title" id="Title" value="Mrs">
<input type="hidden" name="FirstName" id="FirstName" value="Sarah">
<input type="hidden" name="Surname" id="Surname" value="Bloggs">
<input type="hidden" name="DateOfBirth" id="DateOfBirth" value="19750622">
</form>
<iframe name='formresponse' width='100%' height='100'></iframe>
<!-- I want to press this button and submit all forms within the iframe -->
<button type="submit">Submit both forms to iframe</button>
As you can see I have two forms (these are dynamically generated from previously captured data in localStorage) so there will be quite a few forms. I was told I can submit multiple forms to an iframe I'm just not sure how. All help appreciated, thank you.
You might be able to do something like this:
$("form").each(function() {
$(this).submit();
});
If you don't care about the contents of the iframe, you can make a fake iframe and load it there:
$("form").each(function() {
var $form = $(this);
var $iframe = $("<iframe name='temporary-iframe'></iframe>");
var oldTarget = $form.prop("target");
$form.prop("target", "temporary-iframe");
$("body").append($iframe);
$form.submit();
$iframe.remove();
$form.prop("target", oldTarget);
});
The above example has a few small performance issues. If this runs too slowly for you (which will probably happen only if you have a ton of forms:
$("form").each(function() {
var oldTarget = this.target;
var iframe = document.createElement("iframe");
this.target = iframe.name = "temporary-iframe";
document.body.appendChild(iframe);
$(this).submit();
$(iframe).remove();
this.target = oldTarget;
});
If you have issues where only the last form submits, that probably means that form #2 stomps on form #1 before it can finish, then #3 stomps on #2, then #4 on #3, et cetera. If you don't care about the contents of the iframe, you can use the above solution. If you do care about the iframe's contents, you'll need to come up with some algorithm for "which iframe do I show?"
Unless you use Ajax you will have to post each form to an individual Iframe. If you use a single iframe you'll likely cancel the submit before it completes by submitting secondary forms.

Mimicking a login form...

We have an internal application that requires the same username/password across the board.
However, if the login fails too many times, then the account is locked for that username.
We can't change the lockout because that will affect the public facing site as well.
I have been asked to come up with a way to essentially, click a button and auto-login.
Initial research has brought me to this script... (Credit)
<!doctype html>
<!-- saved from url=(0014)about:internet -->
<html>
<title>Auto Login</title>
</head>
<body>
<form id="loginForm" name="loginForm" method="post" action="http://mail.google.com">
<select name="uni_url" id="logServer" class="validate[required]">
<option class="" value="" fbUrl="" cookieName="" >
Test_en
</option>
</select>
<input id="loginName" name="name" type="text" value="Username" class="" />
<input id="loginPassword" name="password" type="password" value="ExamplePassword" class="" />
<input type="hidden" id="loginKid" name="kid" value=""/>
</form>
<script>document.loginForm.submit();</script>
</body></html>
...but I can't seem to get it to work for me.
So, I found another option where I can create a small html file (form) with a submit button, that does - onload="form1.submit();", and this could basically log me into this website without having to key in any login information.
Not sure where to start with mimicking a login form like this and need a good direction to get started in.
Thoughts?
Let's assume your existing login form looks like this:
<form action="/login.php" method="post" id="loginform">
<input type="text" name="username" />
<input type="password" name="password" />
<input type="submit" />
</form>
On your "auto-login" (which is really an auto-submit) page you want to mimic the same structure as before but:
Add in values to be submitted (static username and password?)
Optionally remove the submit button (if you know your users have JS enabled then you can get rid).
Add some JS that automagically submits the form for you.
That might give us something like this:
<form action="/login.php" method="post" id="loginform">
<input type="text" name="username" value="gvee" />
<input type="password" name="password" value="hunter2" />
</form>
<script type="text/javascript">document.forms[0].submit()</script>
The javascript will essentially look for the first form on the page (forms[0]) and submit that.
Update
Upon further inspection your existing login form is a bit of a funny onion. Instead of submitting the form directly, it's calling a function called doLogin() that sets certain hidden properties.
Therefore, instead of submitting the form, we should mimic the same behaviour (i.e. call doLogin() instead of .submit()).
One key thing here is that you'll want to only call the function after it has been declared. Simplest solution is to put our added bit of script at the very bottom of the HTML.
<script type="text/javascript">doSubmit();</script>

Empty input onload even if it is saved in the navigator

I would like to clear all the input in my website even if the parameters for logging have been saved by the navigator.
I've tried to do that using that on the concerned input
<input type="text" name="login" placeholder="Adresse E-mail" onload="this.value=''">
Is there an other way for doing that?
What you might want to try use is the autocomplete=off parameter in your input fields.
<input type="text" name="login" placeholder="Adresse E-mail" autocomplete="off" >
This parameter can also be added to the actual <form> element -
<form name="myForm" id="myForm" method="post" autocomplete="off" >
To handle it in generic way, instead of tagging every field, use readystate change event of document and get all input elements by tag name using getElementsByTagName. Check the type of each element and then set the appropriate value.

Keep input values unchange in browser without depending on browser

Values entered by the user in <input/> are required to be kept unchanged after refreshing the page.
The browser dependency is expected be avoided in order to keep the cross browser compatibility.(For example: cookies, localStorage are not solution for this.) any one let me know how this can be achieved. JavaScript, Jquery can be used, but it should be browser compatible.
This should get you started. You can add text to the URL using the # sign in the URL without navigating away from the page. Then when reloading the page, you can pull the text back off of the URL.
HTML and Javascript Code:
Type something in the box below and then refresh the page:<br>
<input type="text" id="myTextBox" onkeyup="saveValue();">
<script type="text/javascript">
var originalLocation = document.location.href;
var myTextBox = document.getElementById('myTextBox');
function saveValue(){
document.location.href = originalLocation + "#" + myTextBox.value;
}
if(document.location.href.indexOf("#") > -1){
myTextBox.value = document.location.href.split("#")[1];
}
</script>
Here is a quick demonstration using localStorage (which is available in all browsers except IE<=7) that relies on this basic plugin for serializing and restoring form values. Try refreshing the page after typing some information into the inputs:
HTML:
<form>
<label for="name">Name:
<input type="text" id="name" name="name" />
</label>
<br/>
<label for="email">Email:
<input type="text" id="email" name="email" />
</label>
</form>
JS:
$(':input').on('input change keyup', function(){
localStorage.formData = JSON.stringify($('form').values());
console.log(localStorage.formData);
});
if(localStorage.formData){
$('form').values(JSON.parse(localStorage.formData));
}

How can I force a form to submit using JavaScript when a person hits the space bar in the input field?

Is that possible? Google searches are leading me nowhere.
My Sample form:
<form action="search.asp" method="post" name="form1">
User ID <input type="text" size="15" name="userid"><p>
Last Name <input type="text" size="15" name="lastname"><p>
School <input type="text" size="15" name="school"><p>
District <input type="text" size="15" name="district"><p>
Email <input type="text" size="20" name="email"><p>
<input type="submit" value=" Go Search! ">
</form>
This needs to work from any input box on the form. I tried onkeyUP but wouldn't work or I probably wrote it wrong. I am no javascript expert. Any ideas?
I don't know why you'd do this, but in Firefox, you would write:
<form action="search.asp" method="post" name="form1" onkeydown="if(event.keyCode == 32) this.submit(); return false;">
Check here to see how to retrieve other browsers' key codes.
Again, this is how you would do it, but I think it's a bad idea.
The whole form to submit whenever a space is detected by may be a little messy, but what's interesting is to do it for a specific input. I used it in a field where user gives some tags. Each tag must de only one word,and so the space character can be used as an event to store the given tag and wait for the next.
<input type="text" id="tagtextbox" onKeyUp="if(event.keyCode == 32) myfunction();" />

Categories