Hello again, In the previous part of this tutorial we learnt about:
1. Various Important Properties and Methods of window & document objects
So in this tutorial, we are going to learn about Event Handlers in JS
A Basic Syntax for that is:
A very basic example of Event which executes on-a-click, the Event Attribute name for click event is "onclick", for example: Click Me
Some Common Event Handlers:
1. onmouseover/onclick : onmouseover occurs when an object with this event is hovered while onclick is triggered when an object is clicked
2. onmousedown/onmouseup : clicked and not left/mouse click is left
3. onfocus : typically used with input tag when we focus or select the input field
4. onblur : used when we unfocus a field
5. onkeypress/onkeyup/onkeydown : onkeypress occurs when a key is pressed, onkeyup occurs when key is left and onkeydown occurs when key is pressed and not left.
6. onload : occurs when a page loads
7. onunload : when someone leaves the page
8. onerror : when an error occurs while loading a file
Now there's a way too big lists of event handlers available in your browsers and its not possible to write about all, but there is a Way to get to know about available Event Handlers is open Dev Console (Ctrl+Shift+J) and type "on" and console will show you(press Ctrl+Space if it didn't show) a long list of available event handlers. Now You could just pick any one and Google about them ie. which event they handle and with which tags they could be used.
There is also an event handlers list posted by Dr.Mario(@0x6d6172696f) http://pastebin.com/raw/WwcBmz5J, which comes handy when bypassing WAFs filtering some common above listed Handlers.
So This is all for Event Handlers just wanted to introduce you guys with event handlers, lets come to next topic ie. AJAX Requests.
Update a web page without reloading the page
Request data from a server - after the page has loaded
Receive data from a server - after the page has loaded
Send data to a server - in the background
Steps to Create a Very Basic AJAX Request:
1. Create an XMLHttpRequest(also called XHR) Object
2. Use "onload" method on that object to define what function to call after the request has been made
3. Use "open" method on that object to define Request Method(GET/POST/PUT/PATCH/DELETE etc), URL or External File to make Request to.
4. Used "send" method to Make that request.
so a Basic Structure to Make an AJAX Request looks like this:
NOTE : This won't work if u just open this file in "Chrome" locally ie. using file:// protocol However "Mozilla Firefox" allows that. So either open in Firefox or set up a Web server and do on that.
var xhrobj=new XMLHttpRequest();//creates XHR object
if(this.status===200) //Used to check if the Response Code is 200 OK ie. Page loaded fine or Successfully.
//some things to do after Response has been Successful
xhrobj.open("GET","URL/file to load");
xhrobj.send();//if method is POST , POST data is to be sent as its parameter/argument like xhrobj.send("name=value&name1=value1")
SAME ORIGIN POLICY (SOP)
Now you can't Just read responses from any Web Page out there, if that was so then, anyone could make an AJAX Request to Your Bank/Gmail and Read Responses ie. Read your sensitive data. So this is where SAME ORIGIN POLICY(SOP) comes into play, it restricts which "origin" is allowed to read responses from which "origin". There must be Same "origin" if we want to read server responses. ("origin" is explained below)
To circumvent SOP, we have to have follow some rules:
Two pages have the **same origin** if
- Protocol (http://,ftp:// etc)
- Specified Port(http://host.tld:PORT/)
- host (http://host.tld/)
are the same for both pages.
For More Details refer to: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
Problem With SOP
But this is a problem when we want to read Responses from another origin, so in that Case, "CORS" (Cross Origin Resource Sharing) comes into action. It is used to allow reading server responses from "whitelisted" Origins. In that case we are able to read responses from External Origin without SOP coming to play.
When a CORS request is made a "Origin" Header is also sent along Which contains the origin of the AJAX Request and in Response of HTTP Header comes like,
which means response could only be read/accessed by http://host origin
Now This causes another problem, Since sometimes we have this header's value set * (which means it allows any host) which allows to read sensitive server responses. But by default cookies are not sent so we are safe but again,
Access-Control-Allow-Credentials: true; // its another header returned in response which is used to allow sending cookies along with the AJAX Request if set to true
However, Browser Implements their own Security by not allowing below headers together:
So We are Safe again if the "Origin" Header is Validated Properly if its not , It leads to Sensitive Disclosure from Server
For More Details on This Issue: http://www.geekboy.ninja/blog/exploiting-misconfigured-cors-cross-origin-resource-sharing/
For More Details on CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
Reading Server Response:
AJAX Request would be required in Scenarios Where we will be stealing nonces(CSRF Tokens) via XSS and Performing CSRF Actions on behalf of other Users.
var xhrobj=new XMLHttpRequest();
var resp=this.responseText;//this.responseText contains the server response, there's also responseXML property Which can be used to parse XML only
alert("Server Response: "+resp);//this will alert the HTML content of server response
Author : Rahul Maini
Date : 2017-05-13