Fetch data from protected server content via Chrome Dev tools

Someone recently showed me a protected server that can be accessed using ngrok.com. Ngrok allows you to serve online a server running on your machine. It's pretty cool: you need to install ngrok in your machine and then, running a script like ./ngrok http {{whatever the port}} (i.e. ./ngrok http 5000) in your terminal (you need to be in the folder where the executable ngrok downloaded file has been unzipped to), generates a random url that can be used to access your server. Once you turn the server off in your machine, the URL stops working as there is nothing in the localhost port any longer. Please note that ./ngrok I think it is because I am on a Windows machine.

You can protect it by running the script ./ngrok http --auth=username:password {{whatever the port your localhost server is running in}}. If you head to the provided url, you will get:

Once you enter the determined username and password, you will access the content.

Now, how to access the content using the fetch API and Chrome Dev Tools:

1. Head to the console tab
2. Write:

const res = await fetch('{{ngrok URL}}', {headers: {'Authorization': `Basic ${btoa("username:password")}`}})

console.log(await res.json())

1. The username and password have to be base64 encoded, and btoa() is the method to do so. Remember it needs to be a string, so write "username:password".

2. The Basic Authorization is what is needed when the endpoint is HTTP protected. To pass on the credentials, the 'Authorization' header (the quotes are needed) value should be a string too: Basic ${btoa("username:password")}.

3. Do it from a tab in your browser where you have opened the ngrok url, otherwise you will bump into the same site policy, which prevents serving content if request does not come from the same domain.

I hope it was useful.