Table of content:

1. Part one : Basics of Javascript for XSS
2. Basics of XSS (Stealing Cookies)
3. Different Contexts for XSS execution
4. Different types of XSS Filters and their bypasses
5. Different Ways to Bypass XSS Filters by (leak/access)ing Objects
6. CSP Bypasses:
     [*] What is CSP
     [*] WhiteListing script-src for CDNs causing XSS CSP Bypass
     [*] Various other ways to CSP bypass
7. Browser Based Vulnerabilites causing (Old IE) XSS
     [*] Converting XSS from[Old IE] to newer version of IE
8. DOM Based XSS
     [*] various Sources/Sinks  
9. Misc XSS Techniques(shorter payloads)
10. Stealing CSRF Token and Performing CSRF Actions using XSS
11. Exploiting Self XSSs via Login/Logout CSRF Chain.
12. AngularJs Template Injections to XSS
13. Manual VS Automated Scanning and Tools/methods for XSS testing


In This Tutorial, We are going to discuss the basics of Javascript(js) for this upcoming series of XSS to understand and exploit XSS, way better than just firing alerts.


Javascript is a client-side Programming/Scripting Language for the Web used within HTML for Changing the behavior/functionality of a web page ie. javascript could be used to Change the Style(CSS) and Document Object Model(DOM) of a Web Page and may or may not depend on the user interaction/input.

What is DOM(Document Object Model)?

Simply put, When a Web Page is loaded a DOM Tree(Data Structure) is Created Which contains all the HTML Nodes including Elements/Tag Names, attributes of the tags, id of the tag, name of the tag, text/html content within another HTML element ie. DOM contains the structure of whole Web page.

A Simple HTML5 Page would be like This:
<!doctype html>
Some Text
<p name="para" id="1">Hi</p>
DOM would look like this:
|_DOCTYPE: html
	|_#text: Some Text
	|_P name="para" id="1"
	|	#text: Hi
Different ways to execute JS:
  • Inside <script>...</script>
  • Loading External Js file with 'src' attribute
  • Using Event handlers
  • Browser console using F12

  • Javascript Comments:
  • Single Line Comment : //This is a Comment
  • Another Single Line comment <!--This is commented
  • Multi Line Comment : /*Multi line comment*/
  • Lesser Known Single Line Comment : --> This is also a Comment

    DataTypes & Variables declaration in JS
    The Syntax is bit Similar to C ie. each line ends with semicolons (they are not required when statements are written in different lines)etc.. except that we don't need to declare data types of variables for example:
    var a=10,b=null,c="String",d=false,e={A:1,B:"String2",C:[1,2]},f=[1,2,3,"String3"],g; //Explained Below
    We can also declare the same in different lines
    var a=10;
    var b=-20;
    a is an integer data type
    b is an Empty Object
    c is a String
    d is a boolean (true/false) data type
    e is a javascript Object

    Basic Syntax in javascript to declare objects, since javascript objects are declared within braces as {} returns an Empty Object. An object is an array of multiple properties, value of a property could be any datatype. Check a few example objects below
    e={propertyname:"value of property"}
    eg: {propertyname1:"value1",propertyname2:"value2"}
    Try and define the below variables using any of the method mentioned above and then check their values, You can simply run this in Browser Console(Press F12 on Chrome/FF), paste the below code and then type in thier name to check each variable's value one by one.
    var a=10,b=null,c="String",d=false,e={A:1,B:"String2",C:[1,2]},f=[1,2,3,"String3"],g;
    An Example HTML Document for the above variables would be :
    <!doctype html>
    var a=10,b=null,c="String",d=false,e={A:1,B:"String2",C:[1,2]},f=[1,2,3,"String3"],g;

    Let us see how to access Javascript Objects, first of all using the below statement in javascript console we will declare an object "obj" which have two properties prop1 and prop2, using the below statement.
    var obj={prop1:300,prop2:"String"};
    The values of These Properties Could be accessed in 2 Ways

    1. Dot Notation
    obj.prop1; // would return the value of property prop1
    obj.prop2; // would return the value of property prop2
    2.Square Brackets [] Notation
    obj["prop1"];// would return the value of property prop1 
    obj["prop2"];// would return the value of property prop2
    Window and Document Object in javascript:
    Window is the main JavaScript global object, accessed by "window" object it contains all the information about the opened window (height, width, name of the window, DOM etc) and also its opener window (if its there). Document is a property of "window" object only but since "window" object is global it could be accessed by "document" or even as "window.document".

    So basically, DOM (Document Object Model) loads all the objects inside "WINDOW" and then the "DOCUMENT" object gets loaded inside the window object. Some of the Important Properties of "window" & "document" objects are:

    1. Window.location or location;, which contains all the information about the current loaded Window like the URL, Hostname, port, protocol, path etc. : ""
    window.location.hostname : ""
    window.location.href : ""
    window.location.origin : ""
    window.location.pathname :"/path/to/file.php"
    window.location.port :""
    window.location.protocol : "https:"
    Changing the properties of location Object would redirect the page for example location.href=""; would redirect to

    2. Window.opener; returns the reference to the parent window which opened the current window using method for example: URL, name); //Opens a Window of name and URL , if url is empty string it returns about:blank page."", "MyWindow" );//opens an about:blank window with name "MyWindow"
    mywin.document.write("This is Child Window");
    mywin.opener.document.write("The Parent Window");//We Could Change content of the Parent Window

    Author : Rahul Maini
    Date : 2017-04-22