How to Bypass Ngrok Browser Warning

Question

I'm pretty new in Ngrok. I always got warning about abuse. It's just annoying, that I wanted to test measure of my site but the endpoint it's get into the browser warning.

How to send an [ngrok-skip-browser-warning] request header to bypass this warning?

Ishmael

What browser are you using? For Chrome, there are plugins that allow you to set headers. I haven't used this one so I can't vouch for it, but it seems like it should do the trick: chrome.google.com/webstore/detail/modheader/… – Homan

To add headers from any browser you can use Modify Headers Rule of Requestly. (Disclaimer: I am associated with the company) – Miseno

Answer 1

Set and send an [ngrok-skip-browser-warning] request header with any value

This is what you have to do to bypass the browser warning: You have to include the request header ngrok-skip-browser-warning with any value in the request header.
The exact syntax of what is to be included depends on the type of the api call you're making.
For instance for a fetch request in javascript, this is what has to be included to bypass the warning:

fetch(url, {
      method: "get",
      headers: new Headers({
        "ngrok-skip-browser-warning": "69420",
      }),
    })
      .then((response) => response.json())
      .then((data) => console.log(data))
      .catch((err) => console.log(err));

Serrate

I want to add my URL as webhook in Facebook. But we cann't configure the custom header there. Any other solution? – Mamoun

@AnkurRaiyani if you are able to run ngrok behind a proxy, check out my answer. In your case, you need the simplest VM with the static IP, which will proxy the traffic to ngrok. – Task

Answer 2

I have the same problem and this can be solved much easily through the ngrok dashboard only.

Create a tunnel with a request header having key: ngrok-skip-browser-warning and value:true

1. Go to edges

2. Add request header and start the tunnel

3. Start a tunnel

4. Finally you can now access the without the warning page

Krilov

It's also working with "Start a tunnel from the command line". Thanks for the workaround – Maighdlin

Yes that can be done in either of the 3 ways – Krilov

Only problem is when I try to save the edge it says I need to upgrade. But it works without saving, so I'm okay for now. "ERR_NGROK_7028 There were validation errors while saving the edge: Your account is not authorized to use request headers. Upgrade to a Pro or Enterprise plan at: dashboard.ngrok.com/billing/subscription (ERR_NGROK_7096)" – Icbm

PS ngrok has now switched off this feature (adding request headers) for free accounts – Icbm

PM from ngrok here. You cannot use ngrok to add the ngrok-skip-browser-warning header to the request. This header must be added by your application making the request to the upstream fronted by ngrok. – Homan

Answer 3

TL;DR; For those still curious about how to automate a workaround, I've created a docker image which runs a simple HTTPS proxy locally and adds ngrok-skip-browser-warning header to each request.

Run:

$ docker run -d --rm \
  -p 8443:443 \
  -p 8080:80 \
  -e NGROK_HOST=https://your-ngrok-domain.ngrok.io \
  igops/ngrok-skip-browser-warning:latest

From now, use https://ngrok.localhost.direct:8443 as your API webroot.

E.g., you were told to call GET https://your-ngrok-domain.ngrok.io/api/v1/whatever. Now you just call GET https://ngrok.localhost.direct:8443/api/v1/whatever instead, and get the response without the warning page!

*.localhost.direct is a wildcard record of the public DNS pointing to 127.0.0.1.

Read more

---

The main idea under the hood is running Nginx with the following config:

server {
    server_name localhost ngrok.localhost.direct;

    listen 80;
    listen 443 ssl;

    ssl_certificate /etc/nginx/certs/localhost.direct.crt;
    ssl_certificate_key /etc/nginx/certs/localhost.direct.key;

    location / {
        # regular forwarding headers
        proxy_set_header X-Forwarded-For $proxy_protocol_addr;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Host your-ngrok-domain.ngrok.io;

        # this line does the actual trick
        proxy_set_header ngrok-skip-browser-warning 1;

        # forward!
        proxy_pass https://your-ngrok-domain.ngrok.io;
    }
}

Feel free to use.

Task

Answer 4

Add following to the header

headers.set("ngrok-skip-browser-warning", true);

Lingual

Answer 5

If you just need to test your app from Chrome you can use the Chrome extension Requestly for it.

• Add extension
• Create an rule ngrok-skip-browser-warning
• Add Condition 1(Wildcard): https://*.ngrok-free.app/*
• Add Condition 2(Wildcard): https://*.ngrok-free.app
• Add Request header to both conditions ngrok-skip-browser-warning=true

If you need to use it in Incognito: go to Extension settings set allow incognito If you need you can specify Site access in Extension settings eather

Urbanize