itsgoingd / clockwork

Clockwork - php dev tools in your browser - server-side component
https://underground.works/clockwork
MIT License
5.69k stars 321 forks source link

chrome extension stuck on waiting #717

Closed s4muel closed 1 month ago

s4muel commented 2 months ago

hi, i dont think this is an issue of clockwork itself, but some of you might give me a hint to prevent it from happening.

couple of weeks ago i noticed the clockwork extension (5.1.1) stopped working in my chrome. the requests are stuck in "waiting" state. i dug a bit and i suppose it is something on the "chrome" side (not really a problem, i think they hardened some security policy for extensions or whatever). here is my setup - i use clockwork in my local project, that is using self-signed certificate. site works, of course there is sometimes the warning about connection is not secure and strikethrough https...you know. but the clockwork extension doesnt. when i inspect the extension, i see (failed)net::ERR_CERT_AUTHORITY_INVALID in the network tab

image

seems like this guy had the same issue https://github.com/itsgoingd/clockwork/issues/714 and there is a brief discussion on laracasts forum about this: https://laracasts.com/discuss/channels/laravel/clockwork-doesnt-work-in-chrome-debug-tools-but-works-in-firefox

it might be a problem for more extensions (if it is true that chrome changed some security behaviour), tried to google around, but couldnt find a solution or workaround. only thing i've found is chrome://flags/#allow-insecure-localhost that looked promisinf, but my project(s) sit on project.test and not localhost, so the flag seems to be not applied

as i mention in the forum, i could make it work (i hope) if i just use "better" certificates and import the CA to my chrome etc... but since it is a docker environment, it is a bit of a pain.

just letting you know, if you could possibly catch the error and display some meaningful error message or something instead of the infinite "waiting", that would be cool. and if someone comes up with a hint to solve it easily, that would be much cooler:D

ps: the web version of clockwork works fine, i am using that instead.

freestyledork commented 1 month ago

This is affecting me as well, it's nice to have dev tools open on the same page vs switching to the clockwork route. Looking forward to any updates/suggestions to fix this.

itsgoingd commented 1 month ago

Hey, I've responded on Discord, so let me respond here as well.

We recently switched to Manifest v3 in Clockwork, this is required change by Google. Looks like for v3 extensions, the SSL validation is done differently and requires a valid certificate. This is reported as a bug in Chrome bug tracker - https://issues.chromium.org/issues/40882068

So your options are:

Also you can +1 the Chrome bug if you want to see it fixed, but since it's open for 2 years with no progress, I wouldn't count on it getting fixed/changed.

longkhan786 commented 1 month ago

same issue for me on brave

longkhan786 commented 1 month ago

I didn't find any solutions, which is why I switched to Firefox.

m-develops commented 1 month ago

On both Firefox and Chrome I still have this issue.

I am running Laravel in a docker container on http://localhost:4200/api

I have set CLOCKWORK_ENABLE to true in my .env

The files are created in /storage/clockwork

And are for example: -rw-r--r-- 1 root root 4539 Oct 19 14:01 1729346501-8725-1501213603.json

Anything that should be changed to make this work on Docker?

longkhan786 commented 1 month ago

Did you used clockwork before Manifest v3 in docker ?

m-develops commented 1 month ago

I found out the issue.

It was caused because the API was only available on the http://localhost:4200/api routes and Clockwork tries to send requests to for example http://localhost:4200/__clockwork/{id}

I needed to overwrite the registerRoutes method in the Laravel ClockworkServiceProvider to include the /api part. So for example from: image

To something like: image

Also the X-Clockwork-Path header was not properly set. So I added a middleware with: image

itsgoingd commented 1 month ago

Clockwork should auto-detect the path, maybe there is something atypical in your setup.

itsgoingd commented 1 month ago

Clockwork 5.3 will include improved error messaging for network errors. Unfortunately we can't detect exactly what kind of network error happened (like SSL certificate validation). The "More info" link leads to - https://underground.works/clockwork/#faq-error-loading-metadata

Screenshot 2024-10-21 at 21 19 32
thosky commented 2 weeks ago

I have the same problem on Chrome and Brave. But it works on Firefox. It stopped working some month ago - probably because chromium has upgraded ssl security. As I see it the problem is that self signed certificates are considered unsafe and are blocked when loading as a browser extension. Of some reason this is not the case with Firefox which accepts it after the browser has approved the certificate. It's not a problem loading clockwork with fx /clockwork as a page - it's only the extension part not working. It's wird that the exension cannot be loaded even though the unsafe certificate has been accepted in the browser.

It would mean a lot to me - and probable a lot of other Laravel developers - if this can be fixed. So I really hope you will try to fix it soon.

itsgoingd commented 2 weeks ago

@thosky Unfortunately there is nothing we can do about this, it's a Chrome issue, you can +1 it here - https://issues.chromium.org/issues/40882068