[Fixed] Ngrok - Access to *.ngrok.io has been denied

Introduction

Ngrok (https://ngrok.com/) is a great service to tunnel your localhost application to be accessible on the internet.

This pretty much allows your current development web service/ or application runnin on localhost to be accessible publicly. This is awesome for demoing applications or testing things like webhooks - where a public address is needed.

This is common for services like Twillio, SendGrid, etc!

A common problem when we first start playing around with ngrok is the dreaded “Access to XXXX.ngrok.io has been denied”

To fix this issue, we can do the following steps to resolve it:

1. Make sure you have installed ngrok correctly
2. Check firewalls, internet connection and try a different browser
3. Check Ngrok is running correctly
4. Fix for Access to *.ngrok.io has been denied on Mac
5. Reset everything
6. Consider using --host-header rewrite
7. IIS only - Check SSL is enabled

1. Make sure you have installed ngrok correctly

Firstly we have to make sure that we have installed and setup ngrok correctly!

Before doing anything else, make sure to get account with ngrok - previous they did not require accounts, but recently introduced this to fight things off like abuse of the service.

Make sure that you got your localhost application RUNNING correctly first before doing the following steps!

Step 1: Install

If you are on windows, use the following steps to install ngrok:

1. Download from (https://ngrok.com/download)
2. Extract the download .msi file and follow the prompts.
3. Make sure that ngrok is in your system’s PATH environment variable. Open up a terminal and type ngrok. If this returns a response then you have installed correctly.

We can also use chololatey to install ngrok:

choco install ngrok

If you are on a Mac (OSX), you can use brew to install brew install ngrok/ngrok/ngrok

For linux people, APT should be good to install ngrok:

curl -s https://ngrok-agent.s3.amazonaws.com/ngrok.asc | \
  sudo tee /etc/apt/trusted.gpg.d/ngrok.asc >/dev/null && \
  echo "deb https://ngrok-agent.s3.amazonaws.com buster main" | \
  sudo tee /etc/apt/sources.list.d/ngrok.list && \
  sudo apt update && sudo apt install ngrok

Step 2: Configure

After we have installed ngrok on our machine, we have to set it up.

Go to your ngrok account and grab the Auth Token.

Then open up the terminal and run (replacing TOKEN with your Auth Token):

ngrok config add-authtoken TOKEN

Step 3: Start ngrok

For example, if your site is served on http://localhost:8000, enter the following command to start ngrok

ngrok http 8000

Now make sure that your local application is running in localhost:8000

2. Check firewalls, internet connection and try a different browser

One reason why the access denied error comes up with ngrok is because your machine got some firewalls setup.

Ngrok works by having the agent make outbound internet calls. Now some firewalls block this, so you will need to change the outbound rules to allow ngrok.

We can quickly check our connectivity with the ngrok diagnose command:

    $ ngrok diagnose
    Testing ngrok connectivity...

    Internet Connectivity
      Name Resolution                           [ OK ]
      TCP                                       [ OK ]
      TLS                                       [ OK ]
    Ngrok Connectivity
      Name Resolution                           [ OK ]
      TCP                                       [ OK ]
      TLS                                       [ OK ]
    Tunnel Protocol                             [ OK ]

  Successfully established ngrok connection! (region: 'us', latency: 54.895145ms)

3. Check Ngrok is running correctly

The magic happens when we have ngrok running correctly. This sometimes this is due to permission errors on your machine.

If you go the terminal and type in ngrok it should display a “Session Status” of online:

    ngrok                                                                 (Ctrl+C to quit)
    
    Session Status                online
    Account                       inconshreveable (Plan: Free)
    Version                       3.0.0
    Region                        United States (us)
    Latency                       78.006541ms
    Web Interface                 http://127.0.0.1:4040
    Forwarding                    https://84c5df439d74.ngrok.io -> http://localhost:8000
    
    Connections                   ttl     opn     rt1     rt5     p50     p90
                                  0       0       0.00    0.00    0.00    0.00

Now if you are not seeing “online” that means your agent has not started!

If you are seeing the Permission denied error, it means you have made some changes that block the agent from running:

./ngrok: Permission denied

To fix this, make sure you ngrok has permssions to execute with (eg for Linux):

chmod +x ngrok

4. Fix for Access to *.ngrok.io has been denied on Mac

There is an issue where the latest mac os mojave uses conflicting ports with the AirPlay Receiver.

To resolve this issue, we can do the following:

1. Go to System Preferences > Sharing and unselect the AirPlay Receiver.

If that does not work, we can check all applications thats got ports active with:

sudo lsof -i -P | grep LISTEN | grep :$PORT

Go through the list and check the port that you are using is conflicting with any applications.

As an example, it is known that Flask apps use port 5000. You just need to change ngrok/flask to run ports other than that - eg 50001

ngrok http 5001

5. Reset everything!

If the previous solutions are not working for you, we can go the nuke approach and reset everything.

To do so, make sure you have a backup first and then go through the following:

1. Switch your network It may be possible your ISP start blocking ngrok and didn’t allow it ot be accessible from outside your local area network.
2. Uninstall Your ngrok and reinstall it. (I use brew install ngrok to install it and brew uninstall ngrok for removing it).
3. Try restarting your machine.
4. Try changing the IP address assigned to you by your router
5. Try getting a new auth token and reauthenticate ngrok config add-authtoken TOKEN
6. Try using a different port - sometimes there could be conflicts with ports from other applications. For example, instead of using port 5000, try using port 5002!

6. Consider using --host-header=rewrite

With Ngrok, when it forwards requests to your localhost port, it does not modify the HTTP request. What this means is that the HTTP request will go to your server as-is (ie exactly as they are received).

Now this can cause a problem since for some webservers, the host header is what being used to determine which site to be displayed. So if you have multiple sites on a WAMP or MAMP web server, without the host header it would not know what site to serve.

To get around this we use the -host-header=rewrite flag when when spin up ngrok.

If rewrite is specified, the Host header will be rewritten to match the hostname portion of the forwarding address. Any other value will cause the Host header to be rewritten to that value.

As an example, if you want to rewrite your host header to example.com, we can use the command:

ngrok http --host-header=rewrite example.com:80

7. IIS only - Check SSL is enabled

Things can get tricky when you are working with IIS (or IIS Express) with Visual Studio as your localhost. You may encounter a error like this:

Failed to complete tunnel connection

The connection to https://XXXXX.eu.ngrok.io was successfully tunneled to your ngrok client, 
but the client failed to establish a connection to the local address localhost:44320.
Make sure that a web service is running on localhost:44320 and that it is a valid address.
The error encountered was: dial tcp [::1]:44320: connectex: No connection could be made because 
the target machine actively refused it.

Now there are a few ways to fix this. Check the following:

1. Try make your service as http, not https. Somehow IIS does not play well with HTTPS.

For example, turn off SSL like so:

2. The Ngrok doco states that some applications get dont work well when they see no or different host header than expected.

We can fix this by running ngrok with explicitly setting the header:

ngrok http --host-header=localhost 8080

Port 8080 is the expected port your IIS application is running under.

If you must use HTTPS, we can use the command:

ngrok http -host-header=localhost https://localhost:{your_IIS_express_port}

3. If using ASP.NET Core you should also comment out app.UseHttpsRedirection() in your Startup class to avoid a 307 Temporary Redirect

Summary

Ngrok is a great service to allow tunnelling to your local web application or service. Think of it as a way to expose your local development app to a public url thats managed by ngrok.

This is great for demoing applications quickly (since you get a unique url from ngrok) or to setup a public url to test out your webhooks. This reduces time to setup and deploy your application.

However, working with ngrok can be trick with the “Access to *.ngrok.io has been denied” error. This error is usually caused by not setting up ngrok correctly, getting blocked by firewalls, ISPs, or your local network connection.

We also need to check if you using Mac or if you are using IIS, make sure to turn of SSL. If all of the options failed to fix your “Access to *.ngrok.io has been denied” error, we can try to reset everything - account/ tokens, turn off/on machine and if that does not work, then contacting ngrok support!

References

• https://ngrok.com/docs/errors/