3 Ways to Do Javascript Injection – Explained For Beginners

Welcome to a quick tutorial on how to do Javascript injection. You might have stumbled on this “injection thing” on the Internet, and heard that plenty of people have voiced out security concerns over it.

In the layman term, Javascript injection happens when a user enters a piece of Javascript code into the site. It can be done via a few ways:

  1. Use the developer’s console to insert or change the Javascript.
  2. Entering javascript:SCRIPT into the address bar.
  3. Entering <script> tags into the comment or review forms.

But just how is it done and why is it a security risk? That is exactly what we will explore in this guide with examples, explained in the simple layman terms as much as possible – Read on to find out!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

REAL QUICK TUTORIAL

 

TABLE OF CONTENTS

Download & Notes The Basics Injection Examples
Prevention Measures Useful Bits & Links The End

 

 

DOWNLOAD & NOTES

First, here is the download link to the example source code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the example code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

There is nothing to install, so just download and unzip into a folder. If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

JAVASCRIPT INJECTION BASICS

Let us now get started by understanding what Javascript injection is, and the basics in this section.

 

WHAT IS JAVASCRIPT INJECTION?

JavaScript injection is a process by which we can insert and use our own JavaScript code in a page, either by entering the code into the address bar, or by finding an XSS vulnerability in a website.

Wikihow

 

HOW? WHY? WHAT?

Yep, the definition on Wikihow pretty much explained the gist of Javascript script injection. But I am sure there are still a lot of questions floating around, so here’s a quick compressed answer:

  • What – Code ninjas find a way to insert their own scripts into a web page, thus called “injection”.
  • How – There are 3 commonly used methods.
    • By using the developer’s console to insert some scripts.
    • Entering Javascript directly in the address bar.
    • XSS (cross-site scripting) – By entering <script> tags into comment fields or any forms.
  • Why – There are endless reasons to why… Could be developers doing some debugging stuff on their own website, or evil code ninjas trying to take over the world.

 

 

JAVASCRIPT INJECTION EXAMPLES

So far so good? There are probably still a lot of question marks right now, so let us go through the examples.

 

METHOD 1) DEVELOPER’S CONSOLE INJECTION

THE SIMPLE HTML PAGE

For this first example, we will be using this bare minimum HTML page and Javascript as the setting. Take note that I am using Google Chrome here as well, but all other good modern browsers should also have an equivalent developer’s console.

1a-page.html
<!DOCTYPE html>
<html>
  <head>
    <script src="1b-script.js"></script>
  </head>
  <body>
    <input type="button" value="Test" onclick="verbose()"/>
  </body>
</html>
1b-script.js
function verbose(){
  alert("Hello World!");
}

 

HOW TO INJECT

Yep, this is but a very simple page with only one button. Clicking on it will show an alert box with “Hello World”, and we are going to use the developer’s console to hijack this behavior.

First, open the page in your browser, and click on the test button to confirm the “hello world” if you want… Then right-click on the test button and inspect it.

Next, navigate to the “Event Listeners” tab and expand the “click” events – There should only be one event registered, that is, to fire up the verbose() function when we click on the test button. Remove this event, because we are going to replace it with an injected function.

Moving on, double click on the onclick="verbose()" – Replace it with onclick="hijack()".

Finally, change to the “Console” tab, enter function hijack(){ alert("HIJACKED"); } and hit return.

That’s it. Clicking on the test button now will show “hijacked” instead.

 

THE USES

Oh no! You have learned how to do something bad and fallen into the dark side. Bad code ninja… Not really. As much as most people will think that Javascript injection is a form of cyber attack – The fact that it exists in the developer’s console means that it has value as a debugging technique.

P.S. For the beginners, these code changes will only be on your own computer, it does change anything on the server (obviously). Just hit reload and the page will revert.

 

 

METHOD 2) ADDRESS BAR JAVASCRIPT

THE SAMPLE PAGE

This method is probably one of the oldest ways to do Javascript injection – By entering Javascript into the address bar itself. For that, we will be working on this simple page:

2a-page.html
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <input type="text" id="txt-field" value="uvuwewewe onyetenyevwe uvwewenum osas"/>
  </body>
</html>

 

HOW TO INJECT

How does this address bar injection thing work? First, fire up the test page in your browser, and enter javascript:alert("Hi!"); in your address bar. That’s all, it’s that simple.

If you want to do something more “productive”, try entering javascript:alert(document.getElementById("txt-field").value); – Yes, Javascript works here as usual, just as you do with a code editor.

 

METHOD 3) CROSS SITE SCRIPTING (XSS)

THE DUMMY PAGE WITH COMMENT FORM

This final example is a tad bit different, and it involves submitting comments on forums, comment forms, or just about anything else. For example, we submit a comment with Well done! <script>alert('HAHA!')</script> into a website with poor security. Without any checks, the website just saves this comment into the database, and on the next time the page is reloaded:

3-xss.html
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1>LE NOOB WEBPAGE</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    </p>
    <h3>COMMENTS</h3>
    <div>
      Well done! <script>alert('HAHA!')</script>
    </div>
  </body>
</html>

That’s it. This page is done, and we can do all sorts of funny things by inserting our own scripts – But please take note that many modern systems and firewalls already know this attack pattern. It is extremely rare to even find one website that is still open to such attacks. So, don’t even think about doing it.

 

WHERE IS THE ATTACK!?

All of the above examples have by far, been rather harmless. So where does the “injection attack” part come in? Ahem, I will not reveal the exact dark secrets here and get my ads demonetized… This is also not a hacking blog. But historically, people have done quite a lot of naughty things with it:

  • Have a registration form with too many restrictions? Hijack the registration function, change it to your own with no checks and restrictions. Hopefully, some beginner code ninja did the system and is too dumb to implement server-side checks.
  • A comment form that accepts <script> tags!? Let me put some ads on your page and make free money.
  • A forum that accepts <script> tags!? Maybe I will just hijack the user login form and send them to my server instead.
  • Poorly made online shop? Let’s inject some funny scripts inside…

 

 

PREVENTION MEASURES

Yes, Javascript injection can do some serious damage. Having a firewall can act as a line of defense, but don’t depend too much on it. As code ninjas, we seek to create better and safer systems. Javascript injection is not that difficult to prevent with good system design in the first place.

 

REMOVE HTML TAGS FOR COMMENTS, FORUMS, FEEDBACK

If you intend to make your own website, forum, comment form, or product feedback – It will be a good idea to put in a small “defense mechanism”. Before saving to the database, replace all < with &lt; (HTML symbol lesser than), and all > with &gt; (HTML symbol greater than). That’s all to the magic, it will prevent XSS, and any people trying to insert HTML into your website. For example, in PHP:

<?php
// BAD COMMENT
$badComment = "<script>DO SOMETHING NAUGHTY</script> Hi! Thanks for sharing! This comment is safe. I swear.";

// CONVERT ALL CHARACTERS INTO HTML ENTITIES
$badComment = htmlentities($badComment);

// SAVE INTO DATABASE
// INSERT INTO `comments` (`text`) VALUES $badComment;

 

SERVER-SIDE CHECKS

Don’t trust Javascript to do all your form validations and restrictions. That can be your “first line” of checks for cosmetic purposes, but always check submitted data on the server-side instead – Before irreversible damage is done.

 

 

USEFUL BITS & LINKS

That’s all for this tutorial, and here is a small section on some extras and links that may be useful to you.

 

INFOGRAPHIC CHEAT SHEET

How To Do Javascript Injection (click to enlarge)

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

2 thoughts on “3 Ways to Do Javascript Injection – Explained For Beginners”

  1. For example 1: There’s no way for someone without server / backend access to use this in a malicious way on a production website? It’s not an indicator that you might have a security issue if you can do this at all?

    1. As above, if a beginner only does Javascript checks (no server-side protection), we can use injection to bypass all the Javascript checks – This becomes a security issue.

Leave a Comment

Your email address will not be published. Required fields are marked *