General

Web client-side Technologies

Client-side technology refers to technology that runs on a client, typically the user's web browser, in a client-server model. On the client side, the HTML and CSS received from the server are parsed

rockyJul 5, 202420 min read

Client-side technology refers to technology that runs on a client, typically the user's web browser, in a client-server model. On the client side, the HTML and CSS received from the server are parsed and displayed on the web browser screen, and JavaScript is interpreted to perform dynamic functions for the user.

In this article, you will learn about various technologies such as HTML, CSS, JavaScript, and Document Object Model (DOM) that can be used on the client side to serve web applications.

There are a variety of technologies used on the client side, but this training will only cover the technologies below.

HTML
CSS
JavaScript
DOM
Ajax
JSON
SOP
CORS

HTML

HTML (Hyper Text Markup Language) is a markup language used to create web applications, more specifically web pages. HTML supports creating web pages structurally by using start and end tags enclosed in angle brackets (< and >) and / to display titles, links, content, etc., as shown below.

<tag-name>contents</tag-name>

Alternatively, it can also be used without an end tag, like this:

<tag-name attribute="some-value">

Or, in some cases, the above two formats are used in combination.

<tag-name attribute="some-value"></tag-name>

Which of the above formats to follow depends on the type of HTML tag, and the above format is called an HTML Element.

Because HTML is not a programming language, you cannot create web pages with dynamic features using HTML alone. HTML files have the extension .html or .htm.

Below is a simple example of an HTML file.

<html>
  <head><title>HTML file example</title></head>
  <body>
    <div>
      <h1>This example is a very simple HTML file.</h1>
      <img src="Address or path of image file">
      <a href="link address">Hyperlink</a>
    </div>
    <form action="/login" method="POST">
      ID: <input type="text" name="username" id="username">
      Password: <input type="password" name="password" id="password">
      <input type="submit" name="login" value="Login">
    </form>
  </body>
</html>

hyperlink

It is a technology that can link various types of resources such as documents, images, and videos within an HTML document, and is used when a client sends a request to the server to move a page. The following anchor tag <a> is a representative example. Requests made through the anchor tag are sent through the GET method.

<a href="/other-page">Hyperlink</a>

form

You must use a form to collect or process data by receiving input from the user. The entered data is processed through a server-side programming language according to the logic implemented in the web application. Request methods that can be used in forms include both GET and POST, but are generally sent through the POST method. Most commonly seen forms, such as signing up and logging in, are implemented in forms.

The following is an example of a form that typically handles membership registration. In the example below, when the user fills in the input fields "Username", "Email address", and "Age" and clicks the "Sign up" button, the parameters and values entered by the user in the POST request are included in the message body area. It is sent to the server.

<form action="/join" method="POST"> 
    Username: <input type="text" name="username"> 
    Email address: <input type="email" name="email"> 
    Age: <input type="text" name="age"> 
    <input type="submit" name="submit" value="Sign up"> 
</form>

CSS

CSS (Cascading Style Sheet) is a language that specifies how a web page is displayed to the user, including designing the shape, color, and size of each HTML element. By using CSS, you can create more stylish web pages from a design perspective, and from a development or management perspective, you can separate HTML content and style parts, make HTML pages simple, and make it easy to change the structure later. I will do it.

There are three ways to apply CSS:

Internal CSS
External CSS
In-Line CSS

The basic syntax used in internal and external CSS is:

selector { 
   property: value; 
}

selector: A selector that selects the HTML element to style. HTML tag names (h1, a, p, etc.) or IDs assigned to elements can be used. To learn more about selectors, read MDN's article on Selectors (CSS) .
property: A property that defines how the web browser will display the HTML element selected by the selector. These include color and font size.
value: Specifies the value the property will have.

The following is an example of basic CSS syntax for styling a p tag with a red color and a font size of 20px.

p { 
  color: red; 
  font-size: 20px; 
}

Let's look at examples of three ways to apply CSS.

Internal CSS

First, internal CSS is defined inside an HTML file by wrapping the basic CSS syntax in <style></style> tags. The example below is an example of specifying a style for the p tag name.

<html>
<head>
  <title>Internal CSS (HTML tag name)</title>
  <style>
      p {
          color: red;
          font-size: 20px;
      }
  </style>
</head>
<body>
  <p>Bug Bounty Club</p>
</body>
</html>

I mentioned that you can use not only HTML tag names but also class names and IDs as selectors.

When using a class name, define CSS by specifying the class name as a selector (.myclass) as follows. When using a class name as a selector, you must use Dot (.) in front of the class name. And just add class="myClass" to the p tag where you want to apply that style. Any element in the HTML page whose class attribute is specified as myClass is affected.

<html>
<head>
  <title>Internal CSS (class)</title>
  <style>
      .myClass {
          color: red;
          font-size: 20px;
      }
  </style>
</head>
<body>
  <p class="myClass">Bug Bounty Club</p>
</body>
</html>

Here's how to specify styles through the ID of an HTML element: When using an ID as a selector, you must use a sharp (#) in front of the ID.

<html>
<head>
  <title>Internal CSS (Element ID)</title>
  <style>
      #myID {
          color: red;
          font-size: 20px;
      }
  </style>
</head>
<body>
  <p id="myID">Bug Bounty Club</p>
</body>
</html>

External CSS

External CSS is defined with basic syntax in a file separate from the HTML file.

<html>
<head>
  <title>External CSS</title>
  <link rel="stylesheet" type="text/css" href="/file path/myStyle.css">
 </head>
<body>
  <p>Bug Bounty Club</p>
</body>
</html>

/* External CSS file (myStyle.css) */ p { color: red; font-size: 20px;}

Inline CSS

Inline CSS is a method of specifying directly inside an HTML element and uses a slightly different syntax as follows:

<tag-name style="property1: value1; property2: value2;">

This is also an example of inline CSS to style the p tag with a red color and a font size of 20px.

<p style="color: red; font-size: 20px;" >Bug Bounty Club</p>

Inline CSS only affects the specified HTML element and does not affect other elements. The priority is higher.

JavaScript

Web pages created using only HTML and CSS, as explained earlier, can only provide static content. The interface of these web pages makes users feel bored and uncomfortable. JavaScript is a scripting language that is integrated with HTML and CSS and is used to implement dynamic functions that operate on the client side of web pages. Dynamic functions include moving images on a web page, automatically rotating a slideshow, or automatically recommending search terms in real-time whenever a search term is typed. Many of the functions we commonly encounter while using web applications are JavaScript. It is implemented through. JavaScript has traditionally been a client-side language that runs in web browsers, but with the advent of Node.js, it has become a de facto general-purpose development language that is also used in server-side development. However, it is still the most widely used client-side language.

JavaScript can generally do the following:

Add or change HTML and modify styles.
It performs functions depending on the user's specific actions (mouse click, mouse pointer movement, keyboard press, etc.).
Use technologies such as Ajax to send requests to remote servers and upload and download files.
Set or retrieve cookies or display a message to the user.
Store data on the client side (local storage).

Loading JavaScript into an HTML page is similar to CSS.

Internal JavaScript
External JavaScript
In-Line

Internal JavaScript

Internal JavaScript is a method of implementing JavaScript inside <script></script> tags inside an HTML file. An example implemented inside an HTML file is as follows:

<html>
  <head>
    <title>Internal JavaScript</title>
    <script>
      //JavaScript code here
    </script>
  </head>
  <body>
    ...skip...
  </body>
</html>

External JavaScript

There is a way to write JavaScript in a separate file from the HTML file and load this file into the HTML page. In this case, create a file with the extension name js as follows, and use <script src="/file path/myScript.js"></script> in the HTML page to include the js file in the web page.

<!-- HTML file -->
<html>
  <head>
    <title>External JavaScript</title>
    <script src="/file path/myScript.js"></script>
   </head>
  <body>
    ...skip...
  </body>
</html>

<!-- Separate JavaScript file (myScript.js) --> 
<script> 
  //JavaScript code here 
</script>

inline

Write JavaScript directly inside HTML tag elements. In this case, you need an appropriate event that the HTML tag can use.

Next, when you click the button, a notification window saying 'Hello, hunters!' will appear.

<button onclick="alert('Hello, hunters!')" >Greeting</button>

HTML, JavaScript (JS), and CSS were expressed well by comparing them to people. (Source: Step IT Academy Cambodia)

DOM (HTML DOM)

DOM (Document Object Model) is a tool that creates a structured, hierarchical map of a web page. In other words, when a document such as HTML or XML is loaded into a web browser, the text, elements, and attributes that make up the document become document objects called nodes, and each of these nodes is described below. It is expressed through a logical tree structure called the same DOM Tree. The top node is the "Document" node, and text nodes, element nodes, and attribute nodes become child nodes of this Document node.

DOM Tree (Source: Wikipedia)

DOM provides a platform- and language-independent programming interface, typically through JavaScript objects. This is called the DOM API. The DPM API allows developers to more easily access the components of a web page, navigate the structure, and add, delete, or change the content, properties, or style of the document. If there is no DOM, you cannot control the structure, style, or content of the document through programming languages such as JavaScript.

The DOM API allows access to the DOM through the methods and properties of each object. Methods allow you to access, add, or delete HTML elements, and attributes allow you to change or read the value of an HTML element.

The following is an example of changing the value of the <p> element whose ID is specified as greeting to "Hello, hunters!". In this example, the method is getElementById and the property is innerHTML.

<html> 
  ...omitted... 
  <body> 
    <p id="greeting"></p> 
    <script> 
      document.getElementById("greeting").innerHTML = "Hello, hunters!";
     </script> 
  </body> 
</html>

document: The top node in the DOM Tree.
getElementById("greeting"): Accesses the HTML element with ID greeting.
innerHTML: Represents the value of the specified HTML element.

To read more about the DOM API, check out MDN's article on DOM Interface .

Ajax

Wikipedia's definition of Ajax is:

"Ajax (Asynchronous Javascript and XML) is a web application development technique that uses the following combination to create asynchronous web applications.

HTML (or XHTML) and CSS for presentation information

DOM, JavaScript for dynamic screen output and interaction with display information

XML , (Omitted below...)"

As some of you may have already noticed, Ajax is not a specific technology. As defined in Wikipedia, it is a new development technique created by combining various technologies such as HTML, CSS, JavaScript, DOM, and XMLHttpRequest. As you can see from the name Asynchronous Javascript and XML, it is an asynchronous web development technique using JavaScript and XML. Exchange data with the server. Initially, XML was used to exchange data, hence the name XML, but now it supports a variety of formats and it is common to use JSON.

Traditional web applications were updated on a web page basis through HTTP requests and responses. This method wastes resources and time for both the server and the client because even if only a part of the page needs to be updated, the entire resource, such as images or scripts of the web page, is exchanged again without fail. However, with Ajax, you can asynchronously update only the parts you need via an XMLHttpRequest object without having to update the entire page again. With the advent of Ajax, we enter the era of SPA (Single Page Application). SPA implements only one page that forms the basic framework of a website, uses Ajax to receive data, and displays it in an appropriate location. In fact, before the advent of Ajax, Microsoft's Internet Explorer 5 had a component called Microsoft.XMLHTTP based on Windows ActiveX. Although it provided the same functions as today's Ajax, it did not receive much attention among developers. However, it began to receive attention when Ajax technology was officially introduced sequentially in Mozilla Firefox, Safari, and Opera web browsers, and was adopted by Google Maps. It came to be called Ajax.

Ajax is performed through the following process:

Client event occurs
Create XMLHttpRequest object
Constructing an XMLHttpRequest object
Asynchronous request via XMLHttpRequest
(When the server responds) Call the callback function of the XMLHttpRequest object
HTML DOM updates

Let's take a closer look at each process through the following examples.

<html>
   <head>
      <title>XMLHttpRequest example</title>
      <script>
         function test() {
            var xhr = new XMLHttpRequest();                         // 2. Create an XMLHttpRequest object
             xhr.onreadystatechange = function() {                   // 5. Call the callback function of the XMLHttpRequest object
                 if (xhr.readyState == 4 && xhr.status == 200) {
                        document.getElementById("result").innerHTML = xhr.responseText; // 6. HTML DOM update
                 } };
            xhr.open("GET", "https://www.bugbountyclub.com",true); // 3. Construct XMLHttpRequest object
             xhr.send();                                             // 4. Asynchronous request through XMLHttpRequest
         }
      </script>
   </head>
   <body>
      <button type="button" onclick="test()">Send</button>          // 1. Client event occurs
      <div id="result"></div>
   </body>
</html>

1. Client event occurs

<button type="button" onclick="test()">Send</button>

When an event such as a user clicking a button occurs, the JavaScript test() method is executed.

2. Create XMLHttpRequest object

var xhr = new XMLHttpRequest();

Create an XMLHttpRequest object through JavaScript's XMLHttpRequest library.

3. Construct XMLHttpRequest object

xhr.open("GET", "https://www.bugbountyclub.com",true);

Through the open() method of the XMLHttpRequest object, set the request method (GET, POST, etc.), the URL to send the request to, and whether the request is asynchronous to values of true (default) or false.

4. Asynchronous request via XMLHttpRequest

xhr.send();

Send an asynchronous request to the server through an XMLHttpRequest object.

5. Calling the callback function of the XMLHttpRequest object

xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { // Code for 6 HTML DOM updates goes here. }};

♦ onreadystatechange : Detects events when the state of an XMLHttpRequest object changes. When a response is received from the server, the state changes and the function is executed.

♦ readyState : Indicates the current state of the XMLHttpRequest object. The definitions according to the values are as follows.

0: Request not initialized. This is the state before calling the open() method.
1: Request has been established. This is the state before calling the open() method and sending().
2: Your request has been sent. This is the state after calling the send() method.
3: Your request is being processed. This is the state after sending a request to the server and before receiving a response from the server.
4: Request completed. This is the status after receiving a response from the server.

♦ status : Indicates the HTTP response code.

6. HTML DOM update

document.getElementById("result").innerHTML = xhr.responseText;

Using the DOM API, the server's response is displayed in an HTML element with the ID "result".

♦ responseText : Returns the server’s response as text.

JSON

JSON (JavaScript Object Notation) is an ultra-lightweight data format for storing and transmitting data. It has the advantage of higher readability and lighter capacity than XML, which has been used in the past, and is ultimately mainly used to transmit data between servers and applications in Ajax-based applications instead of XML.

Let's say a web application has a feature that retrieves a user's pet list.

If a user clicks to view a user's pet list, the server returns data in the following JSON format, and the web browser parses and renders the JSON data and displays it to the user.

{ 
    "pet": [ 
        { 
          "name": "Tommy", 
            "type": "dog", 
            "age": 10 
            "like": ["ball", "running"] 
        } 
        { 
            "name": "Sally" , 
            "type": "cat", 
            "age": 4 
            "like": ["fish", ""] 
        } 
    ] 
}

The curly brackets { } represent an object, which is a set of name:value pairs separated by commas (,).
Square brackets [ ] indicate an array. Array elements are separated by commas (,).

SOP

SOP (Same-Origin Policy) is a basic security mechanism of web browsers to protect users and is included in the JavaScript engine standard specification. SOP is a policy that restricts access from one source to resources from another source through scripts. Without an SOP, if a user using Gmail visits a malicious website in another web browser window or tab, the malicious website could read that user's Gmail data or use features, even if the source is different from Gmail. It's possible.

What is a source?

The URL scheme (protocol), host, and port are called origin. That is, if the URL scheme, host, and port are all the same, they are from the same origin. If any of them are different, they have different origins.

It will be easier to understand the concept of origin by comparing https://www.bugbountyclub.com/sop/origin.html with the following URL.

URL	Is it from the same source?	reason
https://www.bugbountyclub.com/sop2/origin2.html	same source	URL schema, host, and port are the same, only the path is different.
http://www.bugbountyclub.com/sop/origin.html	other sources	URL schema is different.
https://test.bugbountyclub.com/sop/origin.html	other sources	Different hosts.
https://www.bugbountyclub.com:8443/sop/origin.html	other sources	The ports are different.
http://test.bugbountyclub.com/sop/origin2.html	other sources	URL schemes, and hosts are different.
https:// test .bugbountyclub.com: 8443 /sop2/origin2.html	other sources	Host and port are different.
http://www.bugbountyclub.com:8080/sop/origin.html	other sources	URL schemes and ports are different.
http://test .bugbountyclub.com: 8080 /sop/origin.html	Other sources	URL scheme, host, and port are all different.

SOP may be misunderstood as blocking requests from one source to another, but it is a function that allows requests to be sent to other sources but restricts the received response from being readable. The SOP completely blocks actions such as retrieving cookies from one source, accessing and manipulating the DOM from another source, or calling Ajax. However, some things are not covered by SOP. In general, SOPs allow the insertion of resources from other sources, but reading resources from other sources via script is strictly prohibited.

things that are allowed

Form submission : The <form action="..."> tag allows form submission to other sources.
Inserting images : The <img src="..."> tag allows you to import and insert images from other sources.
Multimedia embedding : Tags such as <audio src="...">, <video src="...">, and <embed src="..."> can embed multimedia resources from other sources.
iframe : <iframe src="..."> can fetch and display resources from other sources. However, results may vary depending on the settings of the x-frame-options header.
Script injection : <script src="..."> allows you to load and run scripts from other sources.
CSS Injection : <link rel="stylesheet" href="..."> allows you to load and run scripts from other sources.

Things that are blocked

Accessing or reading resources from other sources within the script is blocked by SOP.

Accessing and reading resources from other sources inserted through <iframe src="..."> via JavaScript is prohibited.

const myframe = document.getElementById(iframe"); 
const message = myframe.contentDocument.getElementById("message").innerText;

Loading cross-origin images into the <canvas> tag via JavaScript is prohibited.

<canvas id="myCanvas"></canvas>

var context = document.getElementById('myCanvas').getContext('2d'); 
var img = new Image(); 
img.onload = function() { 
  context.drawImage(img, 0, 0); 
}; 
img.src = 'https://cross-origin.com/image.svg';

However, today's large-scale web applications frequently separate servers according to purpose and use and use resources from other sources such as subdomains for operational and management efficiency. In other words, it is inevitable to use resources from other sources, and in this case, technologies such as CORS and JSONP are available to alleviate SOP restrictions.

CORS

As mentioned, CORS (Cross-Origin Resource Sharing) is a technology created to bypass the strict restrictions of SOP. CORS is a way to allow resources from one origin to be accessed by another origin, granting permission through special HTTP response headers such as Access-Control-Allow-Origin. The special headers used to implement CORS are as follows.

request header

Origin : Notifies the server of the origin of the request.
Access-Control-Request-Method : Informs the server which HTTP request method (GET, POST, PUT, etc.) to be used by the client when making an actual request.
Access-Control-Request-Headers : Notifies the server of the HTTP headers that the client will send when making an actual request.

response header

Access-Control-Allow-Origin : Informs clients from which sources resources can be shared.
Access-Control-Allow-Credentials : When set to true for requests with credentials, causes the response to be exposed to JavaScript.
Access-Control-Allow-Methods : Informs clients which HTTP request methods are allowed when accessing resources.
Access-Control-Allow-Headers : Informs the client which HTTP headers are allowed in the actual request.
Access-Control-Expose-Headers : Notifies the client of headers that can be exposed in the response.
Access-Control-Allow-Max-Age : Informs clients how long Access-Control-Allow-Methods, Access-Control-Allow-Headers headers can be cached.

There are two ways to make a CORS request:

Simple Request
Preflight Request

Simple Request

First, let's say a user visits a website called https://foo.example and retrieves a resource from another source called https://bar.other. As shown in the picture, an Origin header is added to the request, and the origin of the request is foo. an example is set and sent to the server. The server knows where the request came from through the Origin request header. Additionally, the server responds to the client by adding an Access-Control-Allow-Origin (ACAO) header with a wildcard (*) value, thereby allowing the client to access the resource. If the value of the ACAO header is a wildcard, it means that it is allowed for all sources.

Simple Request (Source: MDN)

If you only want to allow specific sources, you can set only those sources in the ACAO header in the HTTP response as follows:

Access-Control-Allow-Origin: foo.example

Preflight Request

Unlike a Simple Request, a Preflight Request undergoes prior agreement between the client and server through the OPTIONS header before sending the actual request. This is called a Preflighted request. In a preflight request, the client informs the server of the methods and headers to be used in the actual request through the Origin header, as well as the Access-Control-Request-Method and Access-Control-Request-Headers headers, and determines whether they are allowed. The server responds by adding Access-Control-Allow-Methods and Access-Control-Allow-Headers headers telling the client which methods and header information are allowed in the request. The actual request and response occur after the preflight request.

Preflight Request (Source: MDN)

CORS-related web application vulnerabilities include “CORS Misconfiguration,” which is #5 Security Misconfiguration in the OWASP TOP 10, and is one of the vulnerabilities frequently reported in bug bounty. This vulnerability could expose sensitive information, including user credentials, to unintended sources.

That’s all. Have a nice day, everyone!

❤️ If you liked the article, like and subscribe to my channel “Codelivly”.

👍 If you have any questions or if I would like to discuss the described hacking tools in more detail, then write in the comments. Your opinion is very important to me!