Source Code (web)

#web #html #javascript #css

Intro

Most websites nowadays utilize JavaScript to perform their functions. While HTML is used to determine the website's main fields and parameters, and CSS is used to determine its design, JavaScript is used to perform any functions necessary to run the website. This happens in the background, and we only see the pretty front-end of the website and interact with it.

Even though all of this source code is available at the client-side, it is rendered by our browsers, so we do not often pay attention to the HTML source code. However, if we wanted to understand a certain page's client-side functionalities, we usually start by taking a look at the page's source code.

The following is a demo:

HTML

Visit the url shown in the question ([[#Exercise]]):

Secret Serial Generator: This page generates secret serials.|600

As we can see, the website says Secret Serial Generator, without having any input fields or showing any clear functionality. So, our next step is to peek at its source code. We can do that by pressing [CTRL + U], which should open the source view of the website:

HTML code snippet for a webpage titled 'Secret Serial Generator' with CSS for full-page width and height.|600

As we can see, we can view the HTML source code of the website.

The HTML source code can hold various information, such as comments, to further facilitate a better understanding of the code. Developers may leave sensitive information, which can be further taken advantage of. It is worth reading through the HTML comments.

CSS

CSS code is either defined internally within the same HTML file between <style> elements, or defined externally in a separate .css file and referenced within the HTML code.

In this case, we see that the CSS is internally defined, as seen in the code snippet below:

    <style>
        *,
        html {
            margin: 0;
            padding: 0;
            border: 0;
        }
        ...SNIP...
        h1 {
            font-size: 144px;
        }
        p {
            font-size: 64px;
        }
    </style>

If a page CSS style is externally defined, the external .css file is referred to with the <link> tag within the HTML head, as follows:

<head>
    <link rel="stylesheet" href="style.css">
</head>

JavaScript

The same concept applies to JavaScript. It can be internally written between <script> elements or written into a separate .js file and referenced within the HTML code.

We can see in our HTML source that the .js file is referenced externally:

<script src="secret.js"></script>

We can check out the script by clicking on secret.js, which should take us directly into the script. When we visit it, we see that the code is very complicated and cannot be comprehended:

eval(function (p, a, c, k, e, d) { e = function (c) { '...SNIP... |true|function'.split('|'), 0, {}))

The reason behind this is code obfuscation. What is it? How is it done? Where is it used?

Exercise

TARGET: 94.237.53.104:56803

Challenge 1

Repeat what you learned in this section, and you should find a secret flag, what is it?

Let's visit http://94.237.53.104:56803 and try pressing [CTRL + U] to see the page's source code:

</html>
<!DOCTYPE html>

<head>
    <title>Secret Serial Generator</title>
    <style>
        *,
        html {
            margin: 0;
            padding: 0;
            border: 0;
        }

        html {
            width: 100%;
            height: 100%;
        }

        body {
            width: 100%;
            height: 100%;
            position: relative;
            background-color: #6fb3eb;
        }

        .center {
            width: 100%;
            height: 50%;
            margin: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-family: "Helvetica", Helvetica, sans-serif;
            text-align: center;
        }

        h1 {
            font-size: 144px;
        }

        p {
            font-size: 64px;
        }
    </style>
    <script src="secret.js"></script>
    <!-- HTB{4lw4y5_r34d_7h3_50urc3} -->
</head>

<body>
    <div class="center">
        <h1>Secret Serial Generator</h1>
        <p>This page generates secret serials!</p>
    </div>
</body>

flag: HTB