Rapid Prototyping of a Chrome Browser Using Cloudflare’s Argo Tunnel

How to set up and use a tunnel to privately share information

Jeremy Bernick
Jul 30, 2019 · 6 min read
Photo by Daniel Jerez on Unsplash

I’m a product management intern that sits amongst a team of engineering interns daily. Why? We get a chance to chat — about work, about personal projects, and about how those overlap. The best ideas in the intern pod start as silly conversations in our section. They then evolve into building real solutions to problems we encounter and want to fix.

A fellow intern and I were discussing collaborating on hobby projects. We also talked about the difficulty of working together when not sitting next to each other like we are this summer. The real difficulty has always been sharing iterative services that only exist on a local machine — screen share really falls short here in so many ways. A better solution would be to expose that locally running service to the internet, secured in some way to just my friends if needed, without going through the process of deploying a production-grade service.

For ages, I had been looking for a free tunneling software to solve my sharing dilemma. In this blog post, I’m going to cover how a team can use tunneling software to quickly iterate on a new project — in this example, a Chrome extension.

A Quick Dig Into Tunnels

Tunnels are one of the most useful tools in networking. In any networking event, a private network connection needs to transfer its information to another private party or network. But how is this possible?

One way is through a tunnel. Unlike tunnels in the real world, internet tunnels act more like wormholes in internet space. They can arbitrarily connect to random spaces or endpoints on the internet via a private gateway set by one of the users. These types of tunnels are known as tunneling protocols.

Famous ones include GRE, or General Route Encapsulation, whereby transmission is established via end to end, point to point connection. In GRE connections, the transmission payload (the data you are intending to send) is not encrypted because there is no threat or fear of an outside actor peering into your connection.

Another popular tunneling protocol is IPSec. On IPSec, data integrity and security takes top priority. Over IPSec, each payload is encrypted before and during transit. Then, it’s decrypted after arrival. This ensures that the data being sent is protected from any potential monster attacks in the middle.

Both of these tunneling tools could help me share my localhost environment, my first objective. However, they were both super slow and difficult to set up.

The set up for a GRE tunnel is:

This is a clearly overwhelming first step. So what’s an easier tunneling alternative?

Cloudflare’s Argo Tunnel

Argo Tunnel is a free tunnel product from Cloudflare. Argo Tunnel acts as a way to securely connect between you and any selected party through no specialty configurations and simple installation. It’s a daemon, running on a server, that creates an encrypted tunnel between that origin web server and Cloudflare’s nearest data center. It does all of this without opening any public inbound ports.

For this specific project, we’re using Cloudflare’s Argo Tunnel to deploy a Chrome browser extension that communicates with a server running on my friend’s machine.

Building an Extension

After establishing a locally hosted web server, which runs on port 8080, I can send this data via an Ajax post request (AJAX is a programming style where web applications can send and retrieve data from a server asynchronously without interfering with the display and behavior of the existing page) to a local server. Here, we can temporarily host my NodeJS app (back end, server app) pre-deployment.

Setting up A Tunnel Over Cloudflare

Finally, I set up my Cloudflare tunnel. Once configured, an extension should be up and deployable!

Brew command to install Cloudflare daemon

I ran this command and connected it to my localhost for a private link between my hostname and the Cloudflare data center nearest me.

Spinning up a tunnel

The results of this are a fast and secure connection over a private Internet connection. No public IP or peering to fear.

Testing Over a Tunnel

For testing, I used Argo Tunnel to expose my local server to the world. After setting up my tunnel, I deployed it to friends via a zip file. They later were able to unpack it on Chrome’s developer mode in their own browser.

Sharing the Extension

To get our Chrome extension in the wild and tested, we needed our friends to be able to access and implement it on their own browsers.

On Chrome, it’s really easy to share extensions with just a few steps.

3. Use a CRX Extractor app (CRX Extractor is a good one!) to unpack the extension and convert it to a compressed Zip file.

4. Go back to the Chrome Extensions page, click on unpack, and select your unzipped file folder.

Congratulations, you’re now able to operate your extension on other machines!

Final Results

When in action, the Chrome extension will run through every request made to your web apps or websites to ensure the correct traffic attempting entry is being allowed access. If a request is made from an unusual geo-location, a much easier search can be done to ensure it’s from a known friend or peer.

Cloudflare’s tunnel software was also a breeze in comparison to past projects. No longer do I have to constantly keep inbound ports open, running, and simultaneously maintained. This solved both our need to share my localhost securely and eased the control of sorting through inbound requests.

Now, through a simple extension implemented in my browser, we can more effectively secure my own web apps and, as a result, that traffic is checked based on that connecting device’s posture (geolocation, device ID, etc.).

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store