Getting Started¶
Introduction to HTML¶
HTML (Hyper-Text Markup Language) is a markup language that enables to display contents (text, images, videos and links etc.) on web pages. It was developed about 27 years ago by WHATWG. A Web browser processes the HTML received from Internet servers, processes it and renders it accordingly to the user. The wiki that you see now, was actually sent by the server in plain HTML to your browser and was processed by it to display it in the current layout. Inorder to view the HTML source code of a web page a view-source URI scheme is provided in modern day web browsers. For example, the URI view-source:http://example.com should show the HTML source code of the page located at http://example.com.
It is important to know that HTML is not a programming language. This is because it doesn’t do anything like a programming language, it just structures the page. However, programming languages like JavaScript can be embedded into HTML. The web browser executes JavaScript code on the user’s system and produces output accordingly, which then can be used to interact with the user, and make changes in the web page as required. We’ll see much more on JavaScript in the upcoming section.
Introduction to JavaScript¶
JavaScript is a programming language which was introduced by Brendan Eich. It is based on ECMAScript specification. JavaScript is one of the core technologies of the World Wide Web. JavaScript was first introduced as a client-side scripting language to be used within the web browsers. But, it has now emerged as a popular server-side language, namely Node.Js. There are also many other web frameworks based on it (Eg. Angular.js, AJAX, Vue.js etc.)
Client-side JavaScript is primarily used for the following purposes (but not limited to):
- Input field validation
- Animation of page elements
- Placing interactive contents like games
- Dynamic loading of hyper-text elements
- Used for making calls to API end-points
Development Tools¶
Modern web browsers have a feature known as developer tools which enables the end user or a developer to interact with DOM elements, CSS and also execute JavaScript on their browser. They can be used for testing and development purposes.
The development tools provides some fundamental features such as:
a. JavaScript debugging
b. Web page assets, resources and network information
c. Manipulating DOM elements
d. Profiling and auditing
e. Editing and accessing HTTP cookies
Examples with Developer Tools¶
Inspect Elements¶
This tool basically shows all HTML tags and contents of the page that the user or the developer is currently viewing i.e. Web page assets and resources.
Here we can clearly see the html tags and contents of the page that the user or the developer is currently viewing . We could edit the DOM and check the functionality or property of the page directly using this Inspect Element rather than making permanent changes in our files.
Now lets see an example how a user could actually edit the properties temporarily and review the changes
So currently we are editing property of a webpage footer where user or developer can change the property “Background-color: #343a40” to #3a4(green). Now the page renders with our new changes made.
Console¶
Browser console is like a web console but applied to the whole browser rather than a single content tab. Console basically logs network requests, JavaScript, CSS, and security errors and warnings, and messages of current webpage or web application.
Console are also capable of executing JavaScript expressions and helps in interacting with javascript codes that the browser renders
The page used for demo is linked with a js file “example.js”
Now let's have a look into “example.js”
This is a basic javaScript function which executes console.log(“hi how are you”)
Now let's use help of the console to execute or call this function and see what it does
Console is also capable of executing JavaScript expression
Here, the console successfully executed the expression alert(“hey”)
Network¶
The Network Monitor shows you all the network requests the Browser makes (for example, when it loads a page, or due to XMLHttpRequests), how long each request takes, and the details of each requests, its response and data passed through those requests .Using this, the user or the developer can edit these requests to suit his or her needs.
Here the user or developer can see several requests made to certain CSS files, images and their response code as well.
Using edit and resend options, we can actually edit our entire requests made to the server; here the user or the developer can edit request headers,request method and request body.
The following are some examples of the request and response header.
Here, the request header can be edited by the user and is user controllable ,while the response header is actually the one which is responded by the server.
Request headers¶
Header | Description | Example |
---|---|---|
Accept | Media type(s) that is/are acceptable for the response. | Accept: text/html |
Authorization | Authentication credentials for HTTP authentication. | Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ== |
Connection | Control options for the current connection and list of hop-by-hop request fields. | Connection: keep-alive |
Cookie | An HTTP cookie previously sent by the server with Set-Cookie | Cookie: $Version=1; Skin=new; |
Host | The domain name of the server (for virtual hosting), and the TCP port number on which the server is listening. The port number may be omitted if the port is the standard port for the service requested. | Host: wiki.bi0s.in |
Referer | This is the address of the previous web page from which a link to the currently requested page was followed. | Referer: https://inctf.in/ |
User-Agent | The user agent string of the user agent. | User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:12.0) Gecko/20100101 Firefox/12.0 |
Cookie¶
This is helpful to edit, delete or create a cookie or sessions .