Videos → Building your first malicious chrome extension 😈

Introduction and Welcome0:00

A big round of applause to welcome Mr. Alon Kiriati, Tech Lead from Dropbox from Israel. A big round of applause, please.

Speaker Introduction and Browser Poll1:02

Hi everyone. So excited to be today. Just like a great conference. Thank you everyone for being here. So my name is Alon Kiriati. I'm from the Tel Aviv site. I work for Dropbox. And today we're going to talk about Chrome extensions. So just to know you guys better, I'd like to take a short poll. And ask you like which browser are you using? So let's like raise hands. Who here uses Chrome?

Anyone use Firefox?

Safari, anyone? Not much. Edge? Edge with Chromium? Any brave people here? Yeah, I see some brave people here. Cool.

Focus on Chrome Extensions and Cross-Browser Compatibility1:42

So this talk will be focused on Chrome. But you'll also be glad to know that even if you don't use Chrome, most of the browsers use the same API and the same architecture. So you'll be able to understand everything except one browser. Any guesses which one? Shout out.

So Safari. Well, Apple do their own thing in their own way. So Safari will be excluded today from this talk.

The Story of a Hack Week Extension Project2:08

So let's start. Well, my story starts a few years ago. I got this mail with this title, "What a great extension!" Well, I opened up the mail. And I see this recommendation for extension that helps me render the code I'm writing in different browsers. Well, as a front-end developer, I thought, well, it's like something I really need. So I went, I didn't think twice, and I downloaded the extension. Then I saw another extension that helped me measure the distance between two points on the screen. Well, another great extension. I went and downloaded this one. Another extension that helps me pick a color on the screen and more and more extensions.

At the time, I thought that every extension is just another tool in my toolkit. So every extension will make me a better developer, a more efficient one.

Lessons Learned: Ease of Building and Power of Extensions3:06

Well, until Hack Week came. So what is a Hack Week? Hack Week is an extended hackathon that we do at Dropbox twice a year. It's a one week that we can build everything we want. From product, new product, to business improvements, closing some tech debt, literally everything that we want. And in that Hack Week, I decided to build a Chrome extension that will help me manage my tasks better. Well, the extension was a huge success. It had a grand number of total one download. Well, the only one who downloaded it was me. But from every success, or should I say success, you can learn some lessons. So the two lessons I learned during this Hack Week was the first one is how easy it is to build a Chrome extension. It only took me about five minutes to download a demo from the internet and run the extension. And it took something about one hour to two to build all the functionality that we want for our extension. So for the rest of the Hack Week, we can just like add more and more features. Which leads me to the second point. The second lesson I learned is how powerful these extensions can actually be. So for every functionality, every feature that we added, we're surprised like, "Really? Can extension do this?"

And then we added more functionalities and, "Really? Can extension also do that?"

Building a Currency Conversion Extension Demo4:40

So this is what we're going to do today. The first thing that we're going to do is build together a Chrome extension. Then we're going to take this Chrome extension and turn it into a malicious one. So the goals here, the first goal is to build an extension. The second goal is not to make you guys, not to turn you guys into malicious hackers, but to rethink extensions. Stop thinking about them as these cute tools that you add to your browser, but think about them as dangerous things that can harm your computer and your company.

Live Demo of the Currency Conversion Extension5:19

So let's start. So what we're going to build today is, I think it's pretty cool and something that can be really helpful for us. Some it's a tool, extension, that will help us do a conversion, currency conversions. So I picked here amazon.co.uk, just a random site. I'm not getting any commission from them. So as you can see on the right top side, you can see the extension. And then once you click on it, so first we'll pick

the product, which is a Kindle, just like a random one. And once you click the extension, you can pick your target currency, which in our case will be US dollars. As you can see, all the prices in pounds. So when we mark the price, it switches to dollars,

as you can see. Cool. And also if you are from Europe, for example, you can choose euros, and you mark the price and it changes.

Code Explanation: HTML, Popup, and Background Script6:19

Well, so let's start.

But before we start, a short disclaimer. So, all the code you're going to see today in this extension will be pretty shitty. I'm sorry just like want to make this one simple. So I'm not going to use any TypeScript ES5, ES6, promises, let, const. Probably you saw all this in the other talks today. I really want to make this one simple. So even if you didn't like write JavaScript in last few years, you're going to be able to understand everything. Also I'm not going to cover any edge cases. I know sometimes developers can be nitpicky.

So I promise you there are tons of bugs here. Just trying to understand the concept. The code is less important. But it doesn't mean that you should write code like this, of course.

Extension Architecture: Core and Content Contexts7:05

Well, so what is an extension? An extension is just a zip file with one required file. This is the `𝚖𝚊𝚗𝚒𝚏𝚎𝚜𝚝.𝚓𝚜𝚘𝚗`. Which is the glue for all the extension. It has all the configuration that you need. The permissions, all the files you're going to use, the name of the extension, icon, and so on. And then you can add more and more files. So let's see how it's built. So it's built from two contexts. The first context is the core of the extension. It has two parts. The first part is the HTML, the popup HTML. So which will be the HTML that you see once you click the extension. And then you can also load more JavaScript files. The second part is a `𝚋𝚊𝚌𝚔𝚐𝚛𝚘𝚞𝚗𝚍.𝚓𝚜` which runs always in the background. And it can interact with your browser and your extension.

Content Script and Interacting with the User's Browser8:01

So let's see how it works. Let's write some code now. So as you can see here, it's only like simple HTML, nothing that you haven't seen before. It has a header which is a currency, then a dropdown with all the target currencies. And we also want to load a JavaScript. You can see here. We want to sync between the HTML and the local storage to save the currency. So once the HTML loads, it loads a JavaScript.

And we take the value from the local storage.

Once we make some change, we also save the value

to the local storage. Cool. So also what we have in the `𝚋𝚊𝚌𝚔𝚐𝚛𝚘𝚞𝚗𝚍.𝚓𝚜`, we have the conversion function. The conversion function gets three parameter: from currency, to currency, and amount. And it returns the new currency and the new amount. So as you can see here, it's a XML HTTP request to an external site that returns all the currencies. And once it's returned, we do some like simple math just to make a conversion and return it back.

So that's for the core context.

Messaging Between Contexts9:19

But the more interesting, at least for me, is a content context. Because there you can actually interact with the user's browser. After the page finishes load, you can run some of your JavaScript. If you put in a `𝚌𝚘𝚗𝚝𝚎𝚗𝚝.𝚓𝚜`. So this is how it looks like. So we have an event listener to the mouse up. Every time the user clicks the mouse, we get this event. We take a selection from the window, what the user selects. Then we parse out the amount and the currency. And once we have the amount and the currency, the next thing we want to do is call our conversion

function. Call our conversion function and inject the result back to the DOM. But we have some problem here. Well, we talked about two contexts and we can't call directly from one context to another. So thanks to Google who built this great mechanism of messaging, we can actually send message from the content to the background, from the content to the `𝚙𝚘𝚙𝚞𝚙.𝚓𝚜`, and vice versa on the other side.

So let's see how it looks like. So on the sender side, which is the content, once we have the amount and the currency, we send the message. So the first parameter is null because we send the message to ourself, to our extension. The second parameter is a message. So the first, it's just a JSON with a type which is the type of the message to get converted currency, the amount, and the currency. Then the last parameter is the callback. So in our case, once we get the response, we want to inject the result to the DOM, as you can see here.

And from on the other side, on the `𝚋𝚊𝚌𝚔𝚐𝚛𝚘𝚞𝚗𝚍.𝚓𝚜`, we want to receive the message. We check the header. And once we have the match, we can take the currency and the amount.

We get the target currency from the local storage that we saved before from the extension, from the dropdown. And we can now call the conversion function

and inject the result to the DOM.

Complete Code Overview and Second Demo with a Twist11:58

Cool. So this is all the code that you need for our extension. As you can see, a very cool extension. We built it with only a few lines of code. That's all we need. So now let's see it all from the beginning. But this time I'm going to show you the same demo, but I ask you to pay attention to the small details. Once this demo ends, I'll ask a question if you let's see if we paid attention to all the details. So let's see it now.

Spotting the Malicious Behavior: Affiliate Link Injection13:00

Did you notice anything weird happening here? Someone maybe? Well, I'll show it again. This time, focus only on the URL top bar.

So, as you can see, I pick the product that I want. I press enter. Then something was added there. A tag with a unique identifier. This tag wasn't added by the user. Also, it wasn't added by Amazon. It was added by my extension. So what I'm doing here, I'm trying to abuse the programs that Amazon and other sites have, which called referrer or affiliate, where you can distribute like a link to some product, and then you can get small amount of money from every time the user buy something. So I just use my extension to add this tag.

Let's see now the code.

So, if you look at what we're doing here, we use the event of 𝚘𝚗𝙱𝚎𝚏𝚘𝚛𝚎𝚁𝚎𝚚𝚞𝚎𝚜𝚝. We take the URL, we add a tag, and we redirect the user to the new site with a tag and our unique identifier.

Extending the Malicious Behavior and Redirection Risks14:14

And it only works on Amazon now. Of course, I can extend this extension to also work with AliExpress, eBay,

most of the sites have this affiliate program. And if you think this is not malicious enough, we can also go and maybe redirect the user to our shopping site, or even more malicious and more evil, we can also redirect the user to a phishing site, steal their credential, and then hack their accounts.

Key Logging Example with Firebase Demonstration14:49

Let's take a look at another example. So you could probably see that we can listen to events, and we can also call an external API. So why not taking two of them together and do a classic key logging? On the top, you can see the content JS. We just listen to every key event, and send every time the user press some key, we send the event to the background. And on the background, we take the key that the user pressed, and we send it to a malicious server. In my case, I built on top of a Firebase.

Let's see how it works in practice now. On the left side, you can see the user's browser.

And on the right side, you can see my database, which is a Firebase database, a malicious one. So the user use the extension as usual,

nothing to suspect here. Everything works as usual. But when they're going to the bank accounts, as you can see, they're putting their username and password. Everything is sent to the server, to my malicious server, with the best password ever, of course, 123456.

Whenever you can, use this password.

Capturing Browser Screenshots and Data Exfiltration16:10

So, if this hasn't frightened you enough, let's take a look at another example. Extensions can also take pictures from your browser.

So in this case, I just use the event of going between

changing the active tab. Every time the user changes the active tab, I'm taking a picture of the tab and send it to my malicious server. Let's see now an example. So on the left side, you can see, okay, so the user plays between the tabs. As you can see, all financial data is sent as a picture, all your user's database, your private code from GitHub, your currency wallet, and the worst thing you can think about,

your embarrassing photos from Facebook. There are some pictures you don't want to send to a malicious server, believe me. And in this case, you can even see that the extension is not even there. The user maybe hid it or even forgot that it's there, but it always runs in the background.

How Malicious Extensions Make Money: Adware, Data Collection, and Cryptojacking17:21

Well, luckily, or not,

extensions don't want to steal your photos. What they really want to do is make money, of course. So how do they do it? The most common ways, I'm going to show you now. So the most common way is adware, taking advertisements and inject them to the DOM, to your DOM. The second thing is also collecting your data and sending it to third-party companies. Also, they can steal credentials, as we saw before. And of course, riding the trend of crypto.

So they can mine crypto from the background JS, and also trying to hijack transactions from the user. For some case, I don't know why, Monero seems to be the most popular crypto.

Chrome Web Store Security Measures and Review Process18:18

But the reason you don't see everyday malicious extensions is that we have the Chrome Web Store that protects us. And the Chrome Web Store uses the mechanism to try to find these malicious extensions. The first mechanism is automatic review that they do for every extension. The second one, which not always happen, is the manual review that they do to suspicious extensions. And the third one is reports from users, which is why it's very important to report and review if you see one. And with all those three, they get a great rate of 96.5% success rate.

This is from 2015, and they're always trying to improve. Lately I've even seen some rumors of they're trying to integrate machine learning to their system. I actually couldn't find any evidence for that, but everyone wants to say machine learning because it's cool. Everyone needs to say machine learning once in a lifetime.

Techniques Used by Malicious Extensions to Bypass Review19:19

So I told you in the beginning that I'm not going to help you try to move over this one, and not trying to crack this Chrome Web Store, because first it's not legal and my purpose is not to make you hackers.

But from the past I can tell you that extensions that did pass this review used three techniques. The first technique is remote code, loading your code from a remote server. The second technique is dynamic code, loading dynamic code, for example in JavaScript, something like 𝚎𝚟𝚊𝚕. And also using obfuscation. If you don't know, obfuscation is a process of making a code not readable for humans, but readable by machines.

Recent Chrome Security Updates and User Controls20:03

So also Google launched some new update last year. So this is like trying to also close more gaps of security in malicious extensions. So the first thing that they released is more user controls, moving more responsibility to the users. So now you can right-click an extension from Chrome 70. You can right-click an extension and limit it to work only on specific site, or to never run in the background, for example. They also from now require you to only use narrowly scoped permission and not use more permission that you really need.

They also restricted any use of obfuscation,

as we saw before. So you can't use any more obfuscation. You can still use minify or things that will make your code more efficient, but nothing that deliberately make your code unreadable. They also require you to use two-step verification, just to make sure that your extension is not hijacked by malicious hackers and then they can push their malicious code.

And also they added the manifest V3, which should make a huge revolution on the way permissions are built. So I'm not going to talk more about that, it's like a huge subject, you can go and read about it more. So this is not going to end any soon, like it's going to be like an endless race of a cat and mouse.

So the hackers will try and find more ways

to hack the extensions and find more ways to push malicious code, and Google will find more ways to close these gaps. So it's not going to end in the near future.

User Responsibility and Rethinking Extension Security22:02

So this moved the responsibility towards us, the users.

And maybe we can stop thinking extensions are these cute tools that we add to the browser and start thinking about them as programs. Instead of thinking about them as we're adding an extension, think about installing an extension. So once you install program, all the world of the software that we know today is relevant.

So how can you protect yourself? Same as you protect from every software.

Before you install anything, make sure that you absolutely need it. Don't install something if you don't really need it.

Also, before you install something, review, check for stars, users, check for the publisher, if it's a company you know or not.

Remove every extension that you don't use anymore.

Turn off extension that you temporarily don't use. Limit, as we saw few slides before, if you need an extension to a specific site, only limit the extension to work on this site. And you can also use multiple profiles in Chrome. For example, you can use one profile for all the development and then have all the crazy extensions, but don't load any private data there. And then have one profile for all your private data, but don't have any extension there. So you can always play with multiple profiles.

Bonus for Developers: Reading Code and Reporting Malicious Extensions23:46

And also most of you are probably developers, so you have a bonus part. You can read the code and report malicious extensions

when you see them.

Conclusion and Call to Action: Build, Rethink, and Be Good24:00

So that's all. But what's next? So, as you see, go and build your extension. It's just a zip file with a manifest, one required file with the manifest. And also the rest of the extension is HTML and JavaScript, as you know it. Second thing, rethink extensions. Stop thinking about them as these cute tools that you add to your browser. Once this talk is over, I'd be happy if you take a few minutes, look on the extension that you have, remove the ones you can, and next time, before you add extension, think twice. The most important thing, be good. Take everything that you saw today, play with it locally, but don't distribute it to anyone. And if you're not sure if it's legit or not, you can always read the policies.

They're very clear.

This was just the tip of the iceberg. There are much to read here, so you can read more about permissions model, all the mitigation, how Google finds the malicious extensions. You have tons of information about it.

So that was me. alon3030 at gmail, akiriati at LinkedIn, akiriati at GitHub, and alon at freecodecamp. And I really would like if you have some questions, I'll be near the Q&A for the next few minutes. I really welcome any questions or in one of these means. Well, that's all. Thank you very much. Thank you.

Thank you so much, Mr. Kiriati. So he's going to stand by at the Q&A room. The Q&A room is just out of this theater and turn right, you'll see the Q&A room.