DEV Community

Cover image for How to Hack a Website With uBlock Origin
Best Codes
Best Codes

Posted on • Updated on

How to Hack a Website With uBlock Origin

DISCLAIMER: Best_codes is not liable for any legal trouble resulting from this article. Remember to only “hack” for fun or testing purposes, as there are penalties for hacking.

Yes. You read correctly. And saw correctly. That was a cat hacking with uBlock Origin. OK, maybe not. But it is, in fact, quite easy to do some basic hacking with uBlock Origin. Not like complex stuff such as logging in to someone's account or hacking it, but more along the lines of injecting code or discovering handy API keys. Without further ado, let's discover how!

What is uBlock Origin?

uBlock Origin is a popular advertisement / tracker blocking extension for most major browsers (Chrome, Firefox, Opera, Edge). While it does occasionally have issues with breaking websites, it is overall an awesome extension! Let's take a look at some of uBlock Origin's features and how we can use them to do some basic “ethical” website hacking.

Installing uBlock

Most of you probably already know how to install uBlock in your web browser. Just skip this. If you don't, don't worry, it's really easy. Simply go to the extension page for your browser, and search uBlock Origin.
Chrome: https://chrome.google.com/webstore/detail/ublock-origin/
Firefox: https://addons.mozilla.org/en-US/firefox/addon/ublock-origin/
Opera: https://addons.opera.com/en/extensions/details/ublock/
Edge: https://microsoftedge.microsoft.com/addons/detail/ublock-origin/

Then, click the “install” / “add” button (this varies by browser) and follow the steps to install uBlock. If not done already, you can usually right-click on the extension icon and select “Pin” to make sure you can always see and use the extension.

Testing uBlock

Now, you can give uBlock Origin a quick test. One good site for this is https://d3ward.github.io/toolz/adblock.html. You should see a number by the extension icon, displaying how many ads and/or trackers were blocked.

uBlock's Features

Now, let's take a look at some of uBlock's useful features.

  1. Custom element blocking:

Anywhere on a page, right click and select “Block element”. You can then proceed to block an element and click create. The element will disappear, even after the page reloads or the browser restarts:
Before:

before block

After:

After block

  1. Script blocking:

You can also block custom scripts with uBlock. Click the extension icon, then the settings button:

uBlock settings

Go to “My filters” and add a rule to block a script:

uBlock script

Now, that asset will be blocked.

  1. Request logging:

You can also use uBlock Origin to see URL requests that any site is making:

uBlock logger

Click the log button to open the uBlock logger. In it, you will see all requests the website has made:

uBlock logs

Now, let's explore how to utilize these features for hacking.

Using uBlock to hack

To use uBlock Origin to hack a website easiest, you can use a code injecting extension. For Chrome and Firefox, I recommend Code Injector:
Chrome: https://chrome.google.com/webstore/detail/code-injector/
Firefox: https://addons.mozilla.org/en-US/firefox/addon/codeinjector/

Finding API keys

API keys are just tokens put in a URL to an API that lets the API know that you are authenticated and allowed to access the API endpoint. An example would be an API for a social media website, let's imagine one called dev.to (how weird…). So, let's say you go to dev.to and look at the latest posts. How are these posts loaded? dev.to makes a request to an API. (let's just say it is https://dev.to/stories/feed/?page=1). It does this using JS.

Example (using RunKit, not real JS):

//Hidden setup const fetchUrl = require("fetch").fetchUrl; console.log("Please expect a delay of several seconds while your browser fetches the API data"); fetchUrl("https://dev.to/stories/feed/?page=1", function (error, meta, body) { if (error) { console.error(error); return; } console.log(body.toString()); console.log("Please note that RunKit abbreviates the response. It is, in reality, pretty long."); });

How did I find this URL? The logger. Let's use the logger to do some more basic hacking.

  1. Open the logger. I have Opera Browser (really a great browser), so I can use it from my sidebar.
  2. Go to dev.to. You will see the requests dev.to is making in the logger. Search “count” and click on the result:

logger filter

Now, you can see your message count:

count of messages

This has many other possibilities. I have used it to find audio and video sources, make social media monitors, and much more. Now, to the cooler part of hacking with uBlock:

Injecting Code

Injecting code into a website is a technique used to modify the behavior of a website by adding new code to its existing codebase. This can be done by exploiting vulnerabilities in the website’s security, such as HTML injection or cross-site scripting (XSS). To do so with uBlock, you will need Code Injector. Basically, all you have to do is use uBlock (the logger) to block a script from loading, then the injector to make the website load your new version of the script. I will not provide example photos of this, but it is relatively easy.

--

I hope you have enjoyed this post and found it interesting or useful. If you have any questions, please let me know in the comments.

Top comments (0)