clockwork icon indicating copy to clipboard operation
clockwork copied to clipboard

chrome extension stuck on waiting

Open s4muel opened this issue 1 year ago • 7 comments

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.

s4muel avatar Sep 18 '24 08:09 s4muel

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.

freestyledork avatar Oct 08 '24 14:10 freestyledork

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:

  • Use proper HTTPS certificates (eg. Laravel Herd does this for you).
  • Just use HTTP for local development if you can.
  • Use the Web version of Clockwork (honestly I like it way more than the browser one).

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.

itsgoingd avatar Oct 08 '24 17:10 itsgoingd

same issue for me on brave

longkhan786 avatar Oct 16 '24 04:10 longkhan786

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

longkhan786 avatar Oct 16 '24 04:10 longkhan786

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?

m-develops avatar Oct 19 '24 14:10 m-develops

Did you used clockwork before Manifest v3 in docker ?

longkhan786 avatar Oct 19 '24 14:10 longkhan786

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

m-develops avatar Oct 20 '24 07:10 m-develops

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

itsgoingd avatar Oct 20 '24 10:10 itsgoingd

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

itsgoingd avatar Oct 21 '24 19:10 itsgoingd

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.

thosky avatar Nov 02 '24 10:11 thosky

@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

itsgoingd avatar Nov 02 '24 19:11 itsgoingd

@itsgoingd for me its stuck on "waiting" too and when i check the chrome extension console log

UPDATE: seems issue was the route return 404 because i use sub-domain for api request api.my-site and my route for fetching the api data was like www.my-site/clockwork

also for sub requests for vanilla apps this is needed in sendHeaders

        $subrequestHeader = [];
        foreach ($this->clockwork->request()->subrequests as $subrequest) {
            $id = $subrequest['id'];
            $url = urlencode($subrequest['url']);
            $path = urlencode($subrequest['path']);

            $subrequestHeader[] = "{$id};{$url};{$path}";
        }

        if (!empty($subrequestHeader)) {
            $this->setHeader('X-Clockwork-Subrequest', implode(',', $subrequestHeader));
        }

Image

Ahmed-Aboud avatar Jul 23 '25 15:07 Ahmed-Aboud