DEV Community: Christina Blakely

Web-Security for Developers: Cross-Site Scripting (XSS)

Christina Blakely — Sun, 02 Jan 2022 02:59:46 +0000

While web designers and developers tend to be focused on the interface and functionality of a website, it is equally important to be aware of the potential a website has for security incidents that can adversely impact users. Cross-site scripting (XSS) is one of the most common attacks used against users, so let's talk about what we need to do to protect our websites and users from these attacks.

What is XSS?

XSS is when a vulnerability in a website allows an attacker to inject malicious code that is used against the user. This can typically look like a web request that contains content that is not validated prior to being presented to the user. XSS attacks usually come from JavaScript code, but it can sometimes present as HTML, Flash, or any other code the web browser can execute. There are three types of XSS attacks:

Stored XSS Attack, Type-1 XSS

This is when an attacker discovers a vulnerability that allows them to inject malicious code directly to the server, which is where it will stay and impact future users until it is removed. In this attack, a user will become a victim of the attack in response to placing a legitimate request. This type of attack has far greater consequences than the reflected XSS attack because it is more likely to affect each person that visits the compromised website. Websites that are more susceptible to stored XSS attacks are websites that allow users to share content, such as forums, blogs, social networks, or similar platforms.

Reflected XSS Attack, Type-2 XSS

This is when the malicious code is presented to the user, typically through a link the user clicks on, and the malicious code is injected into the website and used against the user that inadvertently initiated the attack. The importance of not clicking on strange links that have been emailed to you has been stressed to most people over the years, but many people are willing to trust a link that is present on a website they believe has integrity.

DOM-Based XSS, Type-0 XSS

This is a lesser known attack compared to the stored and reflected XSS attacks, but it should still be acknowledged. This attack consists of modifying the website's DOM in the browser and changing the content. This can be problematic because it can spread misinformation and damage a company's reputation.

Consequences of XSS

The consequences of a successful XSS attack can be enough to cause severe business damage and ruin reputations forever. These attacks can compromise sensitive user data, allowing the attacker to access session information, credentials, or keystrokes. A business can suffer damages for spreading misinformation due to an attacker modifying a website’s content; imagine if an attacker defaced a corporate website or a government website with false information. This attack can also direct users to other malicious websites, leaving users susceptible to malware.

How do we prevent XSS?

Input Validation

Input validation allows us to determine if the input the user is providing is appropriate for the request being made. The developer must know what type of data is supposed to come from a specific input field; for example, if a user enters a number in an input field labeled 'First Name', that data should be rejected and not processed because it does not have the String type it was expecting. Using regular expressions or validation functions isn't a bad idea either, but attackers have created various ways to circumvent those types of barriers.

Input Sanitation

Input sanitation is more about removing potentially dangerous characters from the user's input. There are a few options you can do based on the needs of the project. You can escape content using HTML entities, which replaces HTML tags with a special string of characters. See here to demo that out. You can also use regular expressions to create a whitelist for allowed content and/or blacklist for disallowed content.

Utilize a Content Security Policy (CSP)

A CSP is essentially instructions that are sent to the browser, along with the JavaScript code, to control how it is executed on the client-side. To view how to configure a CSP in your website, check this out!

Build your websites with security in mind in order to prevent XSS attacks that can compromise user data and the integrity of your projects. Drop any questions in the comments below!

GitHub Basics Pt. 2: Branches and Pull Requests

Christina Blakely — Mon, 20 Dec 2021 23:58:25 +0000

This is Part 2 of our GitHub Basics series that will give answers to questions I had while learning about the version control platform GitHub. To read the Part 1 on initializing a repository and pushing to GitHub, see here! I'm going to break down the concept of branches, using the branches to manage your repository, and using pull requests to merge changes into your production branch.

Utilizing branches in your project is a safe way to try new things that won’t impact the branch used for production. In most projects you will typically have at least two branches: Main and Master. These can be renamed to whatever suits you, but these are standard branch names. For example, you can create branch Main for development purposes and then create a pull request to merge those changes into the Master branch. It is best practice to not directly edit the Master branch, but to make changes in another branch and merge to the Master branch when the code has been tested and confirmed as stable.

This will allow you to have a reliable record of changes that are production-ready, so just in case an issue arises you can roll back to the Master/production branch's previous version. Lets get started. :)

Command to check branch you are currently on:

git branch

It will show all branches on your local repository and the branch you are currently on will be starred.

Command to create another branch based on the branch you're already on and automatically move over to that branch:

git checkout -b testbranch1

Command to create branch while remaining on the current branch:

git branch testbranch1

When you have modified your code in the testbranch1 and want to add it to your production code on the Master branch, use the following commands:

git add filename.js

git commit -m "Commit message here for context"

git push origin testbranch1

You will want to go back to your repository in GitHub and select the Compare & pull request button seen below.

In my repository, I was working on the Main branch and will be merging the changes into the Master branch.

Doing a pull request can be useful if other people need to review what changes have been made before they are approved. To compare the changes, select the Pull Requests (1) Tab and select the name of your pull request; in my case, we would select the link that says "Collections template added."

After you have finished reviewing the changes, you can finish by merging the pull request.

Once you have finished merging and closing the pull request, GitHub will let you know you can safely remove the development branch if you want.

You don't have to delete the branch, but it is an option. You can also delete a branch through the terminal if you choose to. If you are needing to delete testbranch1, for example, you will need to move to the Main, Master, or another branch. Use these commands to change branches and delete testbranch1:

git checkout Main

git branch -d testbranch1

I hope this helped clarify some points that had me confused when I first joined GitHub. Hit me up in the comments :)

GitHub Basics: Init, Commit, & Push

Christina Blakely — Sat, 26 Jun 2021 21:20:30 +0000

GitHub was a confusing and intimidating platform for me when I first started programming. I wasn’t sure what the point of it was or why I should be using it. After a few years using GitHub, I figured I would write a quick breakdown of the platform that would have been useful for me back then.

To get started, let’s discuss why GitHub is used. GitHub is a place to host code, collaborate with other developers, and keep track of how the code has changed over time. This is also known as version control and it is important because if there is a problem with the code that has been pushed to production, there is a way to easily roll back changes to the last version of functional code. Also, it is not a good idea to only have versions of your code on your local machine in case your machine becomes compromised.

I will assume you already have a GitHub account and Git installed on your system and text editor. Now let’s get you started.

Go to GitHub and create your new repository.

Create your project's folder in your text editor, add a file, and add some code.

Open the terminal in your text editor or open the terminal/cmd application and change directories into your project folder.

You will now want to run the git init command. This command is how you create, or initialize, a new project repository on your local machine.
When you run the command above in the terminal and then run the ls -la command, you will see a folder named .git listed in the project structure. This folder is used to store project data that is used to keep track of changes occurring in each file.
Once you have initialized the repository, you will want to add a file from your text editor to your local repository. For example, I have a file named index.html that needs to be added to my local repository. In the terminal, I am going to run git add index.html. This command moves the index.html file from the working environment into the staging environment. The staging environment is for files that are ready to be added to the repository.
If you run the command git status, you will be able to see that index.html has been added to the staging environment, but has yet to be committed.
To commit a file, use the git commit -m "commit message here" command. When a file change has been committed, it updates the .git folder that will save the current state of that file. To verify that this has been done, run the git log command to view information on commit history.
Run the git branch command to see what branch you are on. Git defaults to the master branch, but you are able to change the name if you want to. If you would like to change the name of this branch, you can run git branch -M “newBranchNameHere”.

The steps above created the local repository, but the last few steps involve creating the remote repository to push code onto GitHub's platform.

Grab the url listed on the setup page.

The command git remote add origin https://github.com/ceblakely/practice1.git connects your local repository to the GitHub repository where your commits will be published. The term origin is the universally accepted term for the remote repository, but you could change the name if you wanted to. Lastly, run the git push -u origin master command to push index.html from the local repository to the remote repository on the master branch.

You will have now successfully added a file to your GitHub repository! Below are a few extra tips:

If you wanted to add all files in your project to the staging area, instead of one at a time, run the command git add .
Note the difference between staging, committing, and pushing.

Staging
- places a completed file in another area to show that it is ready to be committed. This allows you to work on multiple files, stage each one as you finish them, and then commit them at the same time.
Committing
- adds staged changes to the local repository. This must happen before they can be pushed to the remote repository.
Pushing
- transfers the commits to the remote repository on GitHub.
Branches are used to save different states of the code. You can have production-ready code on the master branch, create another branch named main and try out new features on that branch without affecting the deployed code. If you wanted to create a different branch to experiment, use the command git branch branchNameHere.

I know the GitHub documentation can be a bit overwhelming, so I hope this helps someone getting started with GitHub! 💫

Sets in Python 🐍

Christina Blakely — Thu, 27 Aug 2020 05:54:32 +0000

What are sets and why should you care about them?

Python sets are collections of data that remove duplicates. This is mainly done for the purposes of identifying membership, as well as comparing and contrasting the differences between sets. Utilizing the built-in set data type is more efficient than looping over and manipulating lists, arrays, or dictionaries.

Sets are mutable, meaning that we can add and remove elements from it. The elements within the set are immutable, hashable objects. This is why sets are so efficient; the set elements are converted to its hash value, which allows for less expensive comparison between elements. Using the frozenset() built-in function creates an immutable version of a set object. I won’t be covering it in this post, but you can read more on it here.

Let’s see how to get started with sets and how to use them.

You can create a set with either curly braces or using the set() function on a list, but remember that a pair of empty curly braces creates a dictionary.

set_a = {‘red’, ‘pink’, ‘yellow’} 
set_a = set([‘red’, ‘pink’, ‘yellow’])

There are several methods that can be used on sets.

Let's practice with these two sets:

set_a = {'red','pink’, ‘yellow', 'orange'}
set_b = {'blue’, ‘green’, ‘yellow', 'orange'}

.remove() removes a specified element from a set. If you attempt to remove an element that is not a member of a set, it raises a KeyError.

set_a.remove('yellow') 
print(set_a)
# set_a = {'pink', 'orange', 'red'}
set_a.remove('purple')
print(set_a)
# KeyError: 'purple'

.discard() removes a specified element from a set, similar to the .remove() method. The difference with this method is that if it tries to discard an element that is not present in the set, it does not return an error.

set_a.discard('red') 
print(set_a)
# {'yellow', 'pink', 'orange'}
set_a.discard('purple')
print(set_a)
# {'yellow', 'pink', 'red', 'orange'}

.add() adds a new element to the set.

set_a.add('purple')
print(set_a)
# {‘red’, ‘orange’, ‘purple’, ‘yellow’, ‘pink’}

.pop() removes a random element from the set. It takes no arguments.

print(set_a.pop())
# red

.union() returns all the elements in all the sets being used. It does not update the main set.

print(set_a.union(set_b))
# {'red', 'pink', 'orange', 'yellow', 'blue’, ‘green’, ‘yellow'}
print(set_a)
# {'red', 'yellow', 'pink'}

.copy() allows you to make a copy of a set. There are two ways to do this, depending on if you want to update changes from original set to the copy or keep the original set in-tact.

new_set = set_a
# If you do it this way, changes made to set_a will show up in new_set
new_set = set_a.copy()
# new_set will remain however set_a was when it was copied.

.clear() is pretty self-explanatory. This method removes all elements from a set.

set_a.clear()
print(set_a)
# set()

.intersection() will return the common elements from the sets in use. The shorthand for this method is &.

print(set_a.intersection(set_b))
print(set_a & set_b)
# {'yellow', 'orange'}

.symmetric_difference() will return the elements present in either of the sets but not in both. It is known as the union of the sets without the intersection. The shorthand for this method is ^.

print(set_a.symmetric_difference(set_b))
print(set_a ^ set_b)
# {'pink', 'blue’, ‘green', 'red'}

.isdisjoint() returns True if two sets are disjoint sets. Two sets are disjoint when there are no shared elements.

print(set_a.isdisjoint(set_b))
# False

.issubset() returns True if all elements of one set are present in another set.

set_c = {1, 2, 3}
set_d = {1, 2, 3, 4, 5, 6, 7}
print(set_c.issubset(set_d))
# True
print(set_d.issubset(set_c))
# False

Sets are not that complex at all, but it can make your code cleaner and your life easier. Feel free to comment or reach out. ✨