Before we talk about the security of websites, we need to understand how they actually work!

In literal meaning, a “website” consists of multiple web pages, such as the one you’re reading right now. Some websites have interactive features such as buttons and popups, and others may even consist of a separate server that your web browser connects with - we’ll talk about that in more detail.

We usually classify websites into two types: static and dynamic.

As the name suggests, static websites are fixed web pages that don’t update in real time like their dynamic counterparts. Though there may be buttons and popups, these are pre-coded into the website without any external connections.

On the other hand, dynamic websites often update in real-time and connect to a remote server. Examples include social media platforms and banking accounts.

What type of website is CyberHack?

Now, let’s go further into these two types of websites.

Static websites are comprised of three key components:

HTML

CSS

Javascript

Each of these languages is responsible for different aspects of a website.

HTML describes the layout of the website, i.e. how the website is structured. An example HTML webpage looks like this:

In the example above, we created a website with a title, a large heading, and a paragraph of text. In fact, HTML is all you need to create a website!

Which of the following would HTML describe?

Let’s see another example. Which of the following would HTML describe?

CSS describes the styling of the page. Some examples include:

The colour of the background

The font size and type of font

An example snippet of CSS looks like this:

In the example above, all h1 elements (large headings) will be coloured white and aligned to the center of the screen.

Which of the following is something that CSS doesn’t control?

So far, we’ve talked about HTML and CSS - both of these are used to govern the virtual aspects of the website and how it appears to users.

But, what controls the functionality when you click a button? The answer: JavaScript.

JavaScript is a programming language designed for the web. With JavaScript, you can create all sorts of functionality such as dynamically loading content or creating a popup when a button is pressed.

To write Javascript on a website, we include the code in <script> tags:

The above snippet will alert the user with the message “Hello”.

In addition, with JavaScript you can:

Request data from other websites

Send login information to a server

and much more!

Which of the following can you do with JavaScript?

Now, that we’re familiar with HTML, CSS, and JavaScript, there’s one more concept we need to understand before we can start looking at website security in depth.

Imagine a simple application where users can register and sign in to their accounts. Now, when the user fills in their registration information and clicks the “register” button, where does their data go to?

The data is sent to a server that keeps track of all accounts - this way, when the user closes their computer and logs in another day, their data is still safely stored in the server.

We call this the client-server model - the client (you) sends their data to some remote server that stores all user information.

Image source: madooei.github.io

Will your browser always send a request when you visit a website?

To properly display a website, you’ll need HTML, CSS, and JavaScript. Every time you visit a website, your browser will automatically send a request to the server asking for this content!

Now that we understand the building blocks of websites, let’s take a look at some other aspects of a website.

Have you ever wondered how the Remember Me feature on websites work?

Cookies offer websites the ability to store data on the user‘s side. If you’ve ever seen a pop-up on a website asking about permissions for cookies, this is what they’re referring to.

On the basic level, cookies are small pieces of text that contain data. Examples include username=john or session=a76ff90ec . As you can see, these cookies come in pairs; the value of username is john and the value of the session is a76ff90ec.

Which of the following is a valid cookie?

Now, let’s imagine a scenario: you’re logging into your bank account with the Remember Me option so you can visit again without having to re-enter your information.

Let’s see: what happens first?

Just like any other day, you enter your email and password, then press submit. What comes next?

As we discussed in the client-server model, this request is then sent to the server. The server will check whether your email and password are valid, then send a response back to your browser.

Assuming that your email and password are correct, the server will attach a cookie in its response and tell the browser to save this data.

What might the cookie look like?

Often, this cookie will contain data that looks random but is associated with a user on the server end. For example, a76ff90ec could correspond to Jane’s account, while b822a640 could correspond to Alice.

When the browser sees this cookie, it stores the data on your computer for future use.

Now, let’s say you’re finished with your banking task and you close your browser. The next day, when you open your computer and visit the banking website again, your browser will send to the server:

Cookies usually store identifiers of some kind and don’t directly save your login information.

An important security concept is that cookies can be modified by the user. For example, if I set my cookie to be Alice’s (b822a640) and visited the banking website, then I would be logged in as Alice!

This means that you should treat cookies like

If someone gets ahold of your login cookie, then they could impersonate you!

Another potential security flaw involving cookies occurs if the server trusts the cookies without validating them. You’ll see what this entails in the challenge exercise!

As we’ve seen, website applications are complex systems that often involve communications between the client and server.

Although websites can have numerous potential security flaws, there are a few most common ones that account for the majority of cyberdamage and exploitation.

SQL injection occurs when a user’s input is passed directly used to query a database. What does this mean?

Well, a database stores information, such as usernames and passwords. To communicate with this database (e.g. find if a given user exists), you’ll need to speak to it in database language.

Hopefully, you can tell which is the database language:

Now, suppose that the user Jane logs into her account. What would the database query be?

Indeed, the statement 'SELECT * from users WHERE username='Jane' asks the server to “select all the users that have a username of Jane”.

Now, let’s take it one step further. What query would be sent if a malicious user named John’ OR username='admin logged into their account?

If the user input is properly sanitized, then the user’s request to log in would be denied. But, if the input is still allowed, then the malicious user can manipulate the query itself! In:

they’ve logged in as the admin user!

Websites are ubiquitous and play one of the most important roles in connecting people around the world. Whether it’s social media or an educational platform like CyberHack, websites often contain many moving parts - the client, the server, and everything in between.

Through this course, you’ve gained an understanding of how websites are built; the concept of cookies and digital data; and the types of implementation flaws that compromise website security.

Now, you’re ready for the challenge exercise!