Js and Css assets are not loading - ERR_BLOCKED_BY_CLIENT / Referrer Policy: strict-origin-when-cross-origin

[fylzero]

• Laravel Vite Plugin Version: 0.2.4
• Laravel Version: 9.19.0
• Node Version: 17.8.0
• NPM Version: 8.5.5

Description:

Ran VIte shift on a couple small applications and both apps are not loading the front end (just a blank white page). app.css and app.js are not loading due to ERR_BLOCKED_BY_CLIENT / Referrer Policy: strict-origin-when-cross-origin. Also worth noting I am running Valet to serve locally.

Steps To Reproduce:

• Upgrade Laravel Jetstream/Inertia app to use Vite

[fylzero]

@timacdonald I added that to my vite.config.js and it did not resolve the issue. I'm visiting the Valet URL and it is requesting assets via https://localhost:3000/ and throwing a strict-origin-when-cross-origin / GET https://localhost:3000/resources/css/app.css net::ERR_BLOCKED_BY_CLIENT error.

Here is my vite.config.js

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    server: {
        https: true,
        host: 'localhost',
    },
    plugins: [
        laravel(['resources/css/app.css', 'resources/js/app.js']),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
})

[timacdonald]

@fylzero we are gonna look into this for you today. I misread the issue initially I'm sorry.

[fylzero]

@timacdonald No problem, thanks for assisting. Not sure this is necessarily an issue with the plugin but I ran into this with two apps so I'd like to know what is causing it. Excited to switch these to Vite.

[fylzero]

I've also walked through the documentation and moved my CSS import to javascript and replaced my resolve/require statement with resolvePageComponent. Still having the same resulting error on my javascript. strict-origin-when-cross-origin / ERR_BLOCKED_BY_CLIENT

[timacdonald]

Hey @fylzero, we've tried to replicate this but haven't been able to locally.

Are you able to create a new Laravel project and replicate the issue? If so, could you do that and create a GitHub repository that we could pull down and test.

A few other things that might be useful to know:

1. When you initially hit the issue, was the site running as "secured"?
2. What version of Valet are you running (valet --version)?
3. What web browser are you running?
4. What happens when you access the CSS directly via https://localhost:3000/resources/css/app.css?
5. What operating system are you running on?
6. Are you running anything in Docker?

[fylzero]

@timacdonald

The repo I'm attempting this on is public: https://github.com/fylzero/simran-hates-meetings - The Shift branch is shift-64898

1. The site is running secured in Valet.
2. Valet v3.1.7
3. Brave v1.40.107 Chromium: 103.0.5060.53 (Official Build) (arm64)
4. When I go to https://localhost:3000/resources/css/app.css it returns the CSS file.
5. Mac OS Monterey v12.4
6. Nope (No Docker), using Valet

[timacdonald]

haha. I hate meetings as well 🤣

[fylzero]

@timacdonald We started this a couple years ago. No one loves this project more than the person we joke about with this. Also, this is my favorite app to try bleeding edge things on, so this is perfect! 😂

[timacdonald]

Because I can tell how extremely critical this application is, I sent through a PR which makes the final tweaks to work with Vite. I believe it was just a few missing steps and the fact that Vite doesn't give great errors that this was a problem

https://github.com/fylzero/simran-hates-meetings/pull/5

[timacdonald]

If it is still an issues after you merge and have a play, please let us know.

[fylzero]

@timacdonald Oh man! Excellent shirt! I hope you've seen "Unbearable Weight of Massive Talent" (very much worth seeing). We actually have a Cage club at work and watch all his movies together and have meetings (on company time) to discuss.

UGH! So, I merged your PR into the shift-64898 branch. Pulled the changes. I'm still getting the same blank page/error. 😭 I did composer dump-autoload, composer update, npm update, npm run dev. Same 💩 sadly. Any other thoughts on this? Sorry to be a pest.

[timacdonald]

That is gold! I have seen it - loved the movie heaps!!!

[timacdonald]

let me test some more.

[timacdonald]

@fylzero can you test in Firefox and confirm the issue exists there as well on your machine?

[fylzero]

Thank you so much for helping with this. Yeah, I don't know what is going on...

[timacdonald]

ahhh, i think I can replicate the issue now @fylzero

[fylzero]

@timacdonald It happens in FF as well.

[timacdonald]

Looks like the browser thinks Vite is a ad or something. I can replicate the issue and fix the issue by turning off the shields up stuff.

Might need to put localhost on an allow list or something to make this work permanently.

Let me know if that works for you.

https://user-images.githubusercontent.com/24803032/176836549-472af736-eda7-4b26-bfd9-d4b2523010a7.mov

[fylzero]

@timacdonald That gets me a little further! Weird it is saying the site is "not secure" when doing that. I can try to dig into that. Thanks again for your help!

[timacdonald]

no troubles. Hope you enjoy Vite once you get it kicking smoothly on your end!

[fylzero]

@timacdonald I'm still struggling with this but have a little more information.

I tried installing a fresh copy of Laravel (composer global version and packages are up to date), running Valet (Valet is working for other apps), installed Jetstream w/ Inertia (no teams), and I'm still getting this error with no interface loading / blocked assets.

This issue is only occurring on my personal machine, not on my work machine... so something is wonky on this system. Might have to just burn my OS to the ground and start fresh. I can't think of what would cause this. Maybe it's time I switch from Valet to Sail. idk

Update: Oh wow! Even running Sail I get the same error.

Update update: Didn't realize I was not running Brave on my work machine and this stopped presenting as an issue in FF on my personal machine. So I guess the bottom line is this is weirdness with Brave and the Vite setup. That's at least super useful to know!

[timacdonald]

Thanks for the update @fylzero. Seems like Brave might really bring the hammer down on cross domain stuff. I'm gonna try and put some time aside to dig deeper on what we can do to make Brave play nicer with things.

[timacdonald]

@fylzero I've spent some time on this today and from what I can see, this is a problem in Brave and it is just how it works.

However, you can do the following.

Warning I am providing this solution, however you should fully understand what this solution is doing as it may have further security consequences / side-effects for you. I'll give you a quick walk-through, but you should visit the docs for Brave and AdBlockPro to understand if this solution is right for you.

Open brave://adblock/ in the Brave browser. Then add the following to the "Custom Filters"...

@@||127.0.0.1^$domain=my-app.test

but replacing my-app.test with the Valet domain of your application. This should allow requests to 127.0.0.1 (the Vite server) when you visit the domain my-app.test (your valet served domain).

This rule could probably be improved to allow on all .test TLDs, but I'm not sure how to do this at this time. Happy for others to contribute to this solution to make it more well rounded.

• AdBlockPro rule documentation

[dissolvdgrl]

I had to replace 127.0.0.1 with localhost in my case in my brave://adblock/ Custom Filters.

[Tedderouni]

In my case (using Vite 3.1.8), the resource URLs are under http://[::1]:5173/, so I added this rule in my brave://adblock/ Custom Filters:

@@||[::1]^$domain=my-app.test

According to the docs, multiple domains can be specified using | as the separator, so you could do something like:

@@||[::1]^$domain=my-app.test|my-other-app.test

Or, just specifying a domain of test works for me to allow any domains ending in .test. As @timacdonald mentions above, make sure to understand all security implications that may apply to you before allowing all .test domains.

@@||[::1]^$domain=test

[zaynekomichi]

Had Ad blocker installed apperently it was causing the site not to load the source files, use another browser and see if it works.

[cariboufute]

In case you haven't found it already, in Brave, you should check the URL form and click on the circled Brave ad button, as shown in screenshot. In the modal, turn the switch off. This removes the ERR_BLOCKED_BY_CLIENT error for Vite and normally, Vite works as usual.

You have to make it once for each new URL you use.

[jesseleite]

Open brave://adblock/ in the Brave browser. Then add the following to the "Custom Filters"...

@@||127.0.0.1^$domain=my-app.test

This rule could probably be improved to allow on all .test TLDs, but I'm not sure how to do this at this time.

@timacdonald, This seems to work well on all my valet parked .test domains...

@@||127.0.0.1^$domain=test

PS. @Tedderouni, I'm confused what your [::1] is about, but thank you for that $domain=test tip 🔥

[evanstinger]

In case you haven't found it already, in Brave, you should check the URL form and click on the circled Brave ad button, as shown in screenshot. In the modal, turn the switch off. This removes the ERR_BLOCKED_BY_CLIENT error for Vite and normally, Vite works as usual.

You have to make it once for each new URL you use.

Thank you, in my case, disabling Brave Shield on that .test domain solved this problem

[cotiga]

This is what I added in the adblock filter and it works for all sites in .test @@||[::1]^$domain=~^.*\.test

[rick-nataniel-walker]

I am having this very same problem GET http://[::1]:5173/@vite/client net::ERR_BLOCKED_BY_CLIENT. This is happening in production machine (a shared host). Now, I could notice something: the http schema isn't welcome in secure site, that's why is getting blocked.

I guess if there were a way to configure (I don't know where) vite to know the schema the app is under. I mean locally it runs http and live it runs https.

I've tried some recommendations: server: { https: true, host: 'https://my-site.com/', }, to append in vite.config.js yet it is still failing

[timacdonald]

@rick-nataniel-walker you should not be running the dev server in production.

You need to:

1. Ensure that the public/hot file has not been committed to your projects repository (it should be git ignored)
2. Run npm run build to create a build.

If you see references to @vite/client at all in your generated HTML on production, you have a "hot" file.

[Priyank57]

Thanks @timacdonald, I got the same issue on live server, your first point of removing hot from public folder resolved my issue, Now it's working fine with command

npm run build

[Durace]

hello you are well I hope,
I have the same problem I have a project in laravel inertia vue.js. locally everything works perfectly well when I run php artisan serve and npm run dev, but when I npm run build, I archive to send to my host that's where it gets complicated. after extracting the archive I point my subdomain in the public folder. but my site does not open online, I use 3 browsers, brave, opera and edge. on opera and edge the site opens, but on brave it does not open I have a blank page. I have to deactivate the ad blockers. But on mobile it does not open at all, yet it is precisely on this platform that the site should be consulted. here is the error I get this if due to the @vite line in my app.blade.php to call the app.css and app.js

[::1]:5173/@vite/client:1 Failed to load resource:

net::ERR_BLOCKED_BY_CLIENT [::1]:5173/resources/css/app.css:1 Failed to load resource:

net::ERR_BLOCKED_BY_CLI ENT ​​[::1]:5173/resources/js/app.js:1 Failed to load resource:

net::ERR_BLOCKED_BY_CLIENT due to these lines appearing in the source directory of the design tool

please help me.

[fylzero]

In Brave you just have to click the lion icon to the right of the url bar and flip the switch to turn off shields. This is just something you have to do for local Vite development with Brave in order to resolve this.

[Durace]

Thank you for your answer. yes I know that locally I don't even need to make him brave li my application. my problem is in production, how to avoid this inconvenience, will all my users deactivate their ad blockers? and when I open on other devices that have edge and opera that open at home it no longer opens. and the site is supposed to be viewed on mobile on mobile either it does not open

[Durace]

I can give you the git link and access to the o2switch cPanel you look at that, for 4 days I am already 😵😵😵

[fylzero]

That's really strange. I can't imagine you'd be getting the same cross origin issues Vite presents in prod assuming the js and css bundle is already built out at that point. What does your deploy script look like?

[Durace]

my deployment script? I don't understand

[fylzero]

If you deploy a Laravel application, you need to run things like composer install, npm ci, npm run build. What are you running when you deploy to production?

[Vimiso]

my deployment script? I don't understand

Typically you npm run build and switch your Laravel application env to production. Laravel will serve the assets differently and automatically when using syntax like @vite('resources/css/app.css'). The way in which this fails locally, on brave (having to disable the shields), should not apply to a production setup.

[Durace]

locally on brave it works, I don't need to remove the shield, it's in production on the server that it poses a problem. is it a configuration problem of the .env file or vite.config I don't know

[fylzero]

What npm command are you running in production?

[Durace]

npm run build

[fylzero]

Something is likely off with your deploy process. The way Vite works locally, is if you run npm run dev it sets a local and a network URL. This, I believe, is why you get these ERR_BLOCKED_BY_CLIENT errors because it is essentially a CORS-type error blocking cross-URL access by the browser. When you run npm run build this simply uses Vite to compile your JS and CSS and if you are hosting your application using something like Forge, or whatever web server, it will just access everything from the domain URL. So my assumption, if you are seeing this error in production, is that maybe you have a npm run dev process running somehow. Either you're running that before or after the build command or it's running in the background. This is a complete guess.

[Vimiso]

Yeah man, just set your APP_ENV to production and then monitor in the developer console how the asset network requests are not getting loaded. Sounds like a hosting/production config issue. I feel this is no longer relevant to this issue, just paying back my two-cents, given I experienced the original issue with brave in a local environment. This is off-topic. Good-luck.

[Durace]

Thank you for your help, I found the solution, solution that caused other errors but I was able to solve them all one after the other. I put these errors that we could encounter in a word doc that I attached to the git repository to help those who could encounter this same problem. really thank you again. finally my days of torture are over