CODEWITHSUNDEEP
ngrok
Noobie Cooder
Noobie Cooder

Reputation: 401

How to Bypass Ngrok Browser Warning

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?

Browser Warning

Upvotes: 36

Views: 133491

Answers (6)

Chris Rogers
Chris Rogers

Reputation: 1522

Additional to these answers, NGROK also allows you to change the user agent string:

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

Or, set and send a custom/non-standard browser User-Agent request header.

Or, please upgrade to any paid ngrok account.

For me, I was using a Core Web Vitals service which used it's own servers to run it's tests on my NGROK host. That therefore limited the control I had over sending custom headers. I was however able to change the Browser / User agent string which was my saving grace.

Hope this helps out those in similar situations.

Upvotes: 0

Jayanth MKV
Jayanth MKV

Reputation: 323

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

enter image description here

  1. Add request header and start the tunnel

enter image description here

  1. Start a tunnel enter image description here

  2. Finally you can now access the without the warning page enter image description here

(feature may be switched off, if so you have other answers)

Upvotes: 8

Vasiliy Fofanov
Vasiliy Fofanov

Reputation: 141

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

enter image description here

Upvotes: 4

M. Muhammadsodiq
M. Muhammadsodiq

Reputation: 155

Add following to the header

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

Upvotes: 8

igops
igops

Reputation: 761

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.

Upvotes: 6

Deb
Deb

Reputation: 675

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));

Upvotes: 41

Related Questions