Invoking mouse events through JavaScript

Handling Mouse Events through Java script

In some scenarios, we may need to invoke a button click through script. We can write element.click(), but that will not work in all the browsers. We may need to do this in another way, please check the below code snippet.


function invokeSaveClick(saveElementId) {
    var e = document.createEvent('MouseEvents');
    e.initEvent('click', true, true);
    document.getElementById(saveElementId).dispatchEvent(e);
}

Request.ApplicationPath is not working in some cases

Request.ApplicationPath will work only IE. When we want to support different browsers like Chrome, Safari and Firefox, we should use the below property to get the correct relative URL.

this.Request.Url.GetLeftPart(UriPartial.Authority)

Example:

If we use Request.ApplicationPath 

window.open('" + Request.ApplicationPath + "/abc/testpage.aspx?x=1"','test page', 'toolbar=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes ,modal=yes'); }", true); 

It will be rendered as http://abc/testpage.aspx?x=1

If we use Request.Url.GetLeftPart(UriPartial.Authority), then it will be rendered as 
http://ServerName/abc/testpage.aspx?x=1

Blind SQL Injection

SQL Injection can be avoided using HTML encoding. Please find the list of characters which needs to be handled which getting user inputs especially in multi-line text boxes.

[1] | (pipe sign)

[2] & (ampersand sign)

[3] ; (semicolon sign)

[4] $ (dollar sign)

[5] % (percent sign)

[6] @ (at sign)

[7] ' (single apostrophe)

[8] " (quotation mark)

[9] \' (backslash-escaped apostrophe)

[10] \" (backslash-escaped quotation mark)

[11] <> (triangular parenthesis)

[12] () (parenthesis)

[13] + (plus sign)

[14] CR (Carriage return, ASCII 0x0d)

[15] LF (Line feed, ASCII 0x0a)

[16] , (comma sign)

[17] \ (backslash)

Their is always a chance of manupulating the SQL script as part of form inputs and also end user can prepare a request dynamically and hit the target url's. If we use the HTML encode and decode this can be avoided.

Example:

While getting the input values from the form and before processing that. 

string data = HTTPUtility.HTMLEncode(Textbox1.Text)

While rendering the data to UI 

Textbox1.Text = HTTPUtility.HTMLDecode(data)

This is simple and one of the best practice to avoid SQL injection.

Cross Site Scripting : Validating Query string parameters string

1. We need to validate the request by setting the ValidateRequest="true" on the @ Pages element.

2. We need to take care while using query string parameter. We need to cast the query string value to the respective data type to avoid this. Please check the below code snippet to avoid this. This will help us to check whether user end is manipulating something in the URL, if so then we cannot create a new GUID the catch block will be executed and generic error message will display. the same logic can be applied for any data type.

try
{
string Key = Request.QueryString["e"];
Guid ErrorGUID = new Guid(Key);
lblError.Text = string.Format("Please provide the following error code {0}.", ErrorGUID.ToString();
}
catch ()
{
//handle exceptions accordingy
}

Dynamically assign a function to event in javascript

In javascript, using code we can assign function to the events of the elements.

In general, we can assign the function name to the event name directly, Please see the below example.

var element = document.getElementById("testElement");
element.onclick = DynamicFunction;

function DynamicFunction()
{
 alert("sample function");
}

Consider a scenario where you have to assign a function with parameters. we cannot do in the below mentioned way. this will throw a script error.

var element = document.getElementById("testElement");
element.onclick = DynamicFunctionWithParameters(x,y);

function DynamicFunctionWithParameters(param1, param2)
{
 alert("sample function");
}

we have to go with a round about way to achieve the same, see the below example.

var element = document.getElementById("testElement");
element.onclick = function(x,y){DynamicFunctionWithParameters(x,y);};

function DynamicFunctionWithParameters(param1, param2)
{
 alert("sample function");
}

I think you know, we can even directly write the function instead writing it separately and assigning it to the event later. the below example explains this. while mentioning this way we cannot have the function name, and also the same function cannot not be reused.

var element = document.getElementById("testElement");
element.onclick = function(param1, param2)
{
 alert("sample function");
};

Remove Columns from HTML table

This functions scans all the child nodes of the Table tag and delete the TD tag element depending on the column number specified.

function RemoveColumn()
{
var row, columnCount;
//send as parameter if it is dynamic value.
var columnToRemove = 1;
var tbody = document.getElementById('myTableBody');
for (var i = 0; i < tbody.rows.length; i++) {
row = tbody.rows[i];
columnCount = 0;
for (var j = 0; j < row.childNodes.length; j++) {
if (row.childNodes[j].nodeName == 'TD') {
if (columnCount == columnToRemove) {
row.removeChild(row.childNodes[j]);
break;
}
columnCount++;
} } } }