Petergtzz's avatar

This content was blocked and must be served over HTTPS.

I want to test some web hooks so I tried to use Ngrok but can't seem to make it work. I'm pasting the url like the docs example: Forwarding https://<mydomain>.ngrok-free.app -> http://localhost:8000

But all I see is a black page.

The console prints:

[Warning] [blocked] The page at https://<mydomain>.ngrok-free.app/login requested insecure content from http://[::1]:5173/@vite/client. This content was blocked and must be served over HTTPS.

[Warning] [blocked] The page at https://<mydomain>.ngrok-free.app/login requested insecure content from http://[::1]:5173/resources/js/app.tsx. This content was blocked and must be served over HTTPS.

[Warning] [blocked] The page at https://<mydomain>.ngrok-free.app/login requested insecure content from http://[::1]:5173/resources/js/pages/auth/login.tsx. This content was blocked and must be served over HTTPS.

I think this has to do with Ngrok being https and the app being http? I just can't seem to find a solution in google. Thanks in advance.

0 likes
6 replies
martinbean's avatar

@petergtzz I think there’s two issues here.

  1. First, the actual issue is coming from running the Vite dev server (i.e. npm run dev). Build the assets using npm run build instead before starting ngrok.
  2. However, why is a webhook endpoint trying to load assets in the first place? A webhook endpoint should just be a simple endpoint that accepts a request and returns a simple response (i.e. a HTTP 204 No Content response) rather than returning a web page. It’s an automated request, so there’s no user to “see” the response, therefore a full web page response is unnecessary.
Petergtzz's avatar

@martinbean

I probably don't understand how all this works. But answering your first point, it built with no issues yet again when running ngrok I get the same warnings. Answering the second point, I'm trying to build a telegram bot so I think exposing my app using ngrok gives me the ability to receive messages using a controller?

martinbean's avatar

@Petergtzz But it’s a webhook. It exists solely to receive a message from a third party. That third party sending a message to your website doesn’t care about a pretty web page, so no CSS or JavaScript should be getting sent in the response (and triggered mixed content errors).

Petergtzz's avatar

My changes look like this:

APP_ENV=production
APP_URL=https://<mydomain>.ngrok-free.app

// This lives in the boot method in AppServiceProvider.php
if($this->app->environment('production')) 
{
	URL::forceScheme('https');
}

Please or to participate in this conversation.