6076 Document object model
What is DOM
The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of a document, typically an HTML or XML document, as a tree-like structure of objects. Each element in the document, such as HTML tags or XML nodes, is represented as a node in the DOM tree.
explain the Structure of DOM
Tree Structure: The DOM represents the document as a hierarchical tree structure. Each element in the document is a node, and nodes are organized based on their nesting in the document.
what is meant by DOM Object-OrienteD
The DOM is object-oriented, meaning each node in the tree is an object with properties, methods, and events. This allows developers to manipulate the document dynamically using scripting languages like JavaScript.
what is meant by DOM is a Dynamic Interaction:
JavaScript can interact with the DOM to dynamically update or modify the content, structure, and style of a web page. This enables developers to create interactive and responsive web applications.
what is meant by DOM is platform and languague Antagonistic
Platform and Language Agnostic: The DOM is not tied to a specific programming language or platform. While it’s commonly used with JavaScript, other languages can interact with the DOM as well.
What is meant by Representation of Document Components in respect to DOM
Different types of nodes represent various components of a document, such as elements, attributes, and text content. Developers can traverse the DOM tree to access and manipulate these components.
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1 id="pageTitle">Hello, DOM!</h1>
<p>This is a simple example.</p>
<script>
// Accessing and modifying the DOM using JavaScript
var pageTitle = document.getElementById("pageTitle");
pageTitle.innerHTML = "Updated Title";
</script>
</body>
</html>
In this example, JavaScript is used to access an element with the ID “pageTitle” and update its content, demonstrating how the DOM allows dynamic manipulation of web page content.
What is DOcument Obect Model DOM
Dom is a platform and language neutral interface that will allow programs and scripts to dynamically access and update them content structure and style of documents
it is also a hieriarchical model of s markup language (HTML, XML, HTML
Define the following terms of the hierarchy of a HTML page:
Window
Document
Window is the parent for a given web page
Document is the child withhe objects that are moxt commonly manipulatrd
what is an API in DOM
API - Application Programming Interface, it allows programs to interact with HTML or XML
what can be accessed when an HTML document is being displayed
all the nodes in the tree as well as useful functions and global info such as titles, referrer, body, images, forms ect
explain the following DOM Window Objects
DOCUMENT
The HTML document being displayed.
Using the global variable document, we can access all the nodes in the tree, as well as useful
functions and other global information: title, referrer, body, images, links, forms, etc.
LOCATION
The URL of the document being displayed in this window.
If you set this property to a new URL, that URL will be loaded into this window.
HISTORY
Contains properties representing URLs the client has previously visited.
why is DOM useful
The HTML Document Object Model is a standard for structuring data on a web page.
The HTML DOM is made available to scripts running in the browser, not just the browser itself!
Scripts running in the browser can:
▪ Find things out about the state of the page (loading, closing, etc.)
▪ Change html nodes in response to events, including user requests
▪ Access sensitive information (history, cookies, etc.)
what is DHTML and what are the components
DHTML (Dynamic HTML) is a collection of technologies , such as HTML, CSS, JS, brought together to create interactive websites.
DHTML includes:
▪ DOM (Document Object Model)
▪ Scripting language (JavaScript, Flash, etc.) ▪ Presentation language (CSS etc.)
▪ Markup languages (HTML, XML, etc.)
what is the history of Java Script
JavaScript created by Netscape (Mocha -> LiveScript (NN 2.0, 1995)->JavaScript)
JScript created by Microsoft (IE 3.0, 1996)
Browser renderings are slightly different
list 4 things thatc Java Script (JS) can do
Java Script can:
detect the type of browser
It can react to various events of the browser
It can alter the structure of the html document (modify, delete, add tags on run-time)
It can validate data before being sent to the server
explain Client and Server Scripting
Client-side scripting and server-side scripting refer to the execution of JavaScript code in different environments within a web application.
1. Client-Side Scripting:
• Execution Location: Client-side scripting involves running JavaScript code on the user’s browser (client). The code is downloaded with the web page and executed by the browser.
• Purpose: It is primarily used for enhancing user interfaces, creating interactive web pages, and performing actions on the client’s machine without requiring server interaction.
• Examples: Form validation, dynamic content updates, animations, and handling user interactions are common use cases for client-side scripting.
2. Server-Side Scripting:
• Execution Location: Server-side scripting involves running JavaScript code on the web server. The server processes the code and sends the results (usually HTML, data, or other resources) to the client.
• Purpose: It is used for tasks that require server resources, access to databases, and handling business logic. Server-side scripting is often employed in building dynamic web applications.
•
In many modern web applications, both client-side and server-side scripting are used together to create dynamic and interactive user experiences. For example, client-side scripts may handle real-time form validation, while server-side scripts manage database interactions and business logic.
please View Java Script location inside XHTML
External JS File:
Embedded
JS Code:
Inline
JS Code:
<head>
<script src="./js/myscript.js" type="text/javascript"></script>
</head>
<head>
<script type="text/javascript">
alert ('Hello World!');
</script>
</head>
<head> .... </head> <body>
...... <p>
<script type="text/javascript">
confirm ('Do you want to delete this record?');
</script>
</p> </body>
No <script> tags inside myscript.js: alert('Hello World');
INFO-6076 13
JavaScript: Location inside (X)HTML
<!doctype html> <html lang="en">
<head>
<meta charset="UTF-8" />
<title>My HTML5 Page</title>
<style type="text/css">
h2 { font: 40px Arial; color:#0000FF; }
</style>
<script type="text/javascript"> alert ('Hello World!');
</script>
</head> <body>
<p>This is my first paragraph</p> </body>
</html>
<h2>Hello World!</h2>
HTML5 + CSS + Embedded JavaScript
Can you guess what we'll get?
INFO-6076 14
JavaScript: Location inside (X)HTML
<!doctype html> <html lang="en">
<head>
</body> </html>
</head> <body>
<meta charset="UTF-8" /> <title>My HTML5 Page</title>
<style type="text/css">
h2 { font: 40px Arial; color:#0000FF; }
</style>
<h2>Hello World!</h2>
<p>This is my first paragraph</p> <script type="text/javascript">
alert ('Hello World!'); </script>
HTML5 + CSS + Inline JavaScript
Can you guess what we'll get?
INFO-6076 15
JavaScript: Element manipulation
<!doctype html> <html lang="en">
<head>
<meta charset="UTF-8" />
<title>My HTML5 Page</title>
<style type="text/css">
h2 { font: 40px Arial; color:#0000FF; }
</style>
</head> <body>
</body> </html>
Example: simple manipulations with HTML elements
<h2 id="test">Hello World!</h2>
<h2 id="test">I love INFO-6076!</h2>
<p>This is my first paragraph</p>
<script type="text/javascript"> document.getElementsByTagName('h2')[1].style.marginLeft = "200px"; </script>
INFO-6076
Explain the following Java script terms : Objects, Properties, Methods and Events
Objects refers to windows, documents, images, tables, forms, buttons, links, etc.
Objects are an abstraction. They hold both data, and ways to manipulate the data.
Properties are object attributes.
Properties are defined by using the object's name + . + property name.
Example: background color is expressed by: document.bgcolor
Methods are actions applied to particular objects. Methods are what objects can do.
Example: document.write("Hello World")
Events associate an Object with an Action. Typically, user actions trigger events. Example: OnMouseover event handler action can change an image.
onSubmit event handler sends a form.
Events are the major advantage of the JavaScript language that allow us to intercept not only an interactive event (mouse click, key pressed, element losing focus), but also non-interactive events (page loaded, error,
browser type, etc.)
INFO-6076
what is Java Script Injection
JavaScript can be used not only for good purposes, but also for malicious purposes.
Using JavaScript, an individual can manipulate (add, delete, change) HTML objects. Examples: form input tags, cookie's that are currently set in the browser, etc.
In general, JavaScript Injection is a technique that allows an individual to alter the content of a web page. It can be done by inserting and/or executing JS code.
JavaScript can be executed not only from HTML page, but also from browser's URL or console using the javascript: command followed by any JavaScript command that be execude
examples of Java Script Injection
javascript:alert();
Can be used to retrieve information (or modify and retrieve): javascript:alert(document.cookie); javascript:alert(document.forms[0].to.value="something");
▪ javascript:void();
Can be used to modify items without any visible notifications javascript:void(document.cookie="authorization=true");
In the example above a simple cookie allows/disallows access to a restricted page. We took advantage of this and granted ourselves the access by modifying the cookie.
Can Scripts be controlled ¿
Browsers allow you to set exceptions for trusted sites
There are also 3rd party tools that can be used to control script execution:
▪ NoScript is a Firefox extension that controls the execution of JavaScript
▪ NotScripts and ScriptSafe attempt to provide similar functionality for Chrome
These tools allow you to enable script execution on trusted sites, but disable it when visiting unknown or untrusted sites
What is another name for a Browser Engine uesd by browsers
Web Browsers use a browser engine,
Also called a Layout Engine or Rendering Engine
list the Browser Engines uesd by the follwoing browsers
MicrosoftusedMSHTMLforInternetExplorerand EdgeHTML for the Edge browser
▪ This has since been replaced by the Blink Engine
Google Chrome uses the Blink Engine
▪ Originally used the WebKit Engine
Safari browser uses Apple’s WebKit engine
why have Attackers have since shifted their focus from attacking
web servers to attacking clients/users
▪ A server will typically be more secure than a user’s
outdated web browser
A lot of Apps are now becoming more and more web
based making the browser as the main interface tool ▪ Makes it easier to sell SaS
What is the Browser Exploitation Framework (BeEF )
BeEF is a popular tool for exploiting web browsers and is natively found in Kali Linux
▪ It is browser based and can be launched by clicking on the "cowhead"icon, or by running the executable file found in /usr/share/beef-xss
How does the Browser Eploitation Framework (BEef) works ?
BeEF works by “Hooking” browsers
This involves a client clicking on a link that contains a JavaScript file that will tie their browser back to the BeEF server
▪ hook.js
The Browser will remain “hooked” as long as the user
has the window opened that is hooked
Explain the traffic light” system BeEF uses for payloads
Each command module uses a traffic Light system which it uses tonindicate the following :
- the green module works against the target and should be invisible to the user
- the amber command module works against the target but should be visible to the user
- the white command module is yet to be verified agaiinst this target
- the red command module does not work against this target
Once a browser is hooked, the attacker can perform various actions against the compromised browser. list these actions
BeEF lists these actions in “Command Modules
▪ Information gathering / Software detection
▪ DOM manipulation
▪ JavaScript Execution
▪ Credential Excavation
▪ Browser Redirection
▪ Cookie Information