Are HTML textbox value attributes safe from XSS attacks? - javascript

I have a textbox where I want to allow users the ability to type in potentially dangerous characters such as < and > (this is a mathematical expression data entry field which required me to disable ASP.NET validation on the textbox). The data is stored in a database and retrieved later for display on the page. When I display the data in the textbox, I am setting it like this:
textboxA.Text = expression; where expression comes from the database with the potentially dangerous characters.
Anyway, I tried purposely inserting something like < script>alert('hi') < /script> but I can't get this script to execute when the Text property is set (translates to value attribute in client-side HTML. The result looks like:
< input type="text" value="<script>alert('hi')< /script>">>< /input>
So what gives, is the value attribute safe from injections?
Note: The spaces before each tag in the examples is only for StackOverflow because it deletes tags from questions.

To properly insert this code into your site you must understand how your code work. I'm not sure how ASP.net declares input field but as long it doesn't automatically encode special characters then my tip should let you insert code.
If for example this is how code of your input looks like (this is input field for HTML site) where is <?php if (isset($_SESSION['username'])) {echo $_SESSION['username'];} ?> its part of the code that inserts your script back into the HTML page (assuming you are saving value into session and redisplay the value in the textbox)
If you're passing argument back to the form by using the URL:
http://www.website.com/index.php?username="><script>alert('hi')</script>
From
<input type="text" name="username"
value="<?php if (isset($_SESSION['username'])) {echo $_SESSION['username'];} ?>">
Then the code you want to inject must look like this:
"><script>alert('hi')</script>
Notice "> at the beginning of this code. Basically what it does is to end the value="" by using " tag and then closes input field with >.
So the actual result would be:
<input type="text" name="username" value=""><script>alert('hi')</script>
From there you will be able to insert code such as JavaScript.

The builtin textbox control automatically encodes the text attribute. When you checked the output, did you use view source or the developer console. The console shows escaped data as unescaped, while view source will show the actual output.
Anyways, a classical attack on textbox value attributes would be:
" autofocus onfocus="alert(1)

Related

Is there any way to edit a URL to embed a form entry?

I know it is possible to embed form values into the URL as parameters if the form has an ID assigned to it. But what if it does not have an ID?
For example the "Search" field in this page:
http://au.autodesk.com/speaker-resource-center/call-for-proposals/voting
<input type="text" placeholder="Search " class="form-control ng-valid ng-dirty search-box" ng-model="search.$" ng-change="updateButtons()">
I know it is possible to embed form values into the URL as parameters if the form has an ID assigned to it.
That is not true.
Server-side (and occasionally client-side) code on a page may read the query string as a means to set default values for form controls (typically so that a form can be corrected and resubmitted if there were errors in the previous attempt).
In these cases, the name attributes will usually map onto the query string (because the form will generate the query string from the name attributes). Often an input will be given an id that is the same as its name.
It is entirely under the control of the site's authors.
There is no way to set values of inputs on another site without the other side providing a mechanism to allow you to do that.
There's a few different ways to do that. Looking at that HTML, it's the first text-type input inside the div, so the first method that comes to mind is this:
You could pull out the div (using the class "search-area") and then target the first text input box within that div. I don't know whether you're using jQuery or native JS or exactly what language/library/framework you're using.
JQuery would be something like:
var inputElement = $(".search-area")[0].first()
This SO answer may help:
jQuery: how to find first visible input/select/textarea excluding buttons?
Edited to add: Answer is targetting the input element. As the answer from someone else mentions.. You can't actually do what you're wanting to do with the URL.
Edited again. Misread the question. I'll leave this here in case someone else needs to know how to target an input field that doesn't have an ID. Alternatively, I have no problems if someone wants to delete this answer.

How to pass html content of a div as form parameter to the server

What is the best way to pass HTML data to server.
I have a htmlPage which has a div.I want to pass the innerHTML of this div to the server so that I can save it in session and recreate that div later during the edit flow.
I have created a hidden field:
<input type="hidden" name="selectedTemplateHtml" id="selectedTemplateHtml" />
In this hidden field I want to set the HTML of that div and post to server.
Please suggest.
I tried simple passing the html from div using $("#divName").html() but when in edit flow we retrieve the stored value it gives exception since it is not able to store the html in the javascript variable as the HTML spans many lines.
Please suggest.
In my case I am able to post the request with newlines and I am able to get back the html which I had posted but when I try to store it back in a javascript variable due to new line characters and double quotes it gives error
#Alexander
Following code is used to display html in edit flow:
cdHtml="${postAdBean.cdHtml}";
templateId="${postAdBean.templateId}";
$("#"+templateId).html(cdHtml);
It gives exception in browser console on the first line ie.:
cdHtml="${postAdBean.cdHtml}";
This is because it is not able to convert the html returned from server to a javascript string.
Okay I got it to work thus:
From client before setting the html in hidden field I encode it :
selectedTemplateHtml=encodeURIComponent(selectedTemplateHtml);
$("#selectedTemplateHtml").val(selectedTemplateHtml);
This is neccessary to escape certain characters like & in the HTML which may otherwise cause issues.
In java:
String
cdHtml=URLDecoder.decode((request.getParameter("selectedTemplateHtml")),"UTF-8");
cdHtml=cdHtml.replace("\n"," ").replace("\r", " ").replace("\t", " ");
cdHtml=cdHtml.replace("\"", "\\\"");
ie. first i decode the html then replace all the newline characters and escape the double codes. Then i send the html back to browser and it is readily assignable as in javascript without any issues.

take html input from user and out modified html back to the user

I have a text box on my site that will take in HTML from the user. I want to be able to take that HTML and modify it and then output the new HTML back to the user. The changes would always be easy because I would only be replacing certain characters within that HTML. They would be the same characters each time.
I think the best way to do this would be to take each line and add it to an array. That way i can output each part of the array into a new line using a for loop or something. This would also preserve line breaks. But that still doesn't solve the HTML issue. Right now when I take in HTML and try to output it, i can't. It won't show up unless it's plain text.
Currently I can only do a single line of text by just using innerHTML.
Is there a way to do this with vanilla JS?
any suggestions on where i could look would be awesome! thank you.
Consider using a prompt like so:
<html>
<script type="text/javascript">
function getValue(){
var retVal = prompt("Enter your name : ", "your name here");
// You can do something like convert it all to lowercase here:
document.write("You have entered : " + retVal.toLowerCase());
}
</script>
Click the following button to see the result:
<form>
<input type="button" value="Click Me" onclick="getValue();" />
</form>
Thus returning modified user input to the user without posting anything or submitting a form. This is just a simple example, but you can take this and apply it to an input field with a button by adding
onclick="functionToDoSomething()"
as an attribute to the button, and having the function get and alter the value of the input field.

how to get name of dynamically generated text input in php

I want to make a page like this
http://agprotective.com.au/invoice/invoice.htm
There someone can add multiple date,site,start time, end time, hours amount by click the button + or can remove the row using - sign button. How can I get the value of that input in php? Normarlly we use $_POST['here-is-the-value-of-name-attribute-of-the-input-tag'];
But in the case http://agprotective.com.au/invoice/invoice.htm , I do not know what will be the value of the name attribute of the tag.
Can anyone tell me how to get the values of the dynamically generated (button generated) input tags and then send them to database.
The correct way to do this is simple:
<input name="myinput[]" />
PHP will then have:
$_POST['myinput'][0], $_POST['myinput'][1]...
The page you linked does it in a stupid manner, if I'm honest.

How can I replace a standard textarea with "insertable" text fields?

I'd like to be able to replace a standard HTML <TEXTAREA> input with insertable <INPUT> text inputs. By insertable, I mean having two TEXT form inputs (name, role) and an "Add" button after it to add a new name/role after this one if desired.
Ideally I'd have 'role' in an HTML <SELECT> input (drawn from my database) but I'm not really asking about that now :)
Also (again ideally) I'd like to be able to read these value in and parse them to look the same as when they were entered, i.e. with the text fields and pulldowns.
My database stores all of this in a single MySql 'text' which right now I have to enter manually in the format :
name - role ; name2 - role2 ; name3 - role3
and my script (that creates XML from this) explodes the "name" into two nodes explode'd by a "space-dash-space" and separates each node when it reads a semicolon.
Edited to show that my main problem is how to replace the plain HTML <textarea> with one or more <INPUT> fields and serialize them so they can be stored in my MySQL text record.
You can save the data as serialized php or JSON encoded string. That way, you can keep the object structure in the TEXT field.
Hope that helps.
Here was my solution: to use jQuery's replaceWith, replacing the TEXTAREA's tag with a bunch of <INPUT TYPE=TEXT name=myVar[]> so that they were stored in an array, and implode/explode the values as I needed them.

Categories