Geolocation being blocked because of permissions policy

[shawn]

Hi

Sorry I raised under general by mistake - can someone move across thanks.

geolocation-access-being-blocked-because-of-a-permissions-policy

[tobi]

Hi, just saw this comment from @leex279:

Importing from Bolt.new - COEP and CORS policy management

FYI - its merged to the main branch now. [image] @shawn yes the geolocation service is another topic/problem. Dont know if this can be fixed at all by this team or if it is a problem/missing feature with the webcontainer => I close this topic. Feel free to open another for the geo location

So the only way right now is to try it yourself somehow… maybe with CLINE and Gemini in VS. Great no code tool.

[shawn]

Tried to find a work-around for over a week now. That’s why I’m raising as Thomas suggested as a new item. There is a configuration difference between Bolt.new and Bolt.diy that I’ve identified in that post.

Yes Cline with VSCode is a nice solution to get things moving again. I would like to see Bolt.diy progress all the same. I can see it being a great platform going forward - just needs to get some more maturity.

[aliasfox]

@shawn

Dumb question but have you tried this behind HTTPS? Or are you just doing it through Localhost? Because there are likely two different issues you are dealing with: mixed-content and CORS issues. Mixed context errors occur when trying to access HTTP and HTTPS data. But I can’t tell from the screenshots you provided.

[shawn]

Yep. HTTPS…

I even did a simple unit test using Bolt.new and Bolt.diy with the same code and function. I’ll repeat it now.

Prompt - Make a simple single page using react. Display a map using openstreetmap leaflet and showing current location with high accuracy.

Getting Geolocation error…

And still getting CORS issue - thought that was resolved with credentialess update yesterday. Was it tested after update ?

Git - update for credentialless header

Actually my URL isn’t showing “credentialless”.

I’m on…Version 5c41ed9
But looks like latest is - 85d864f

I checked and my deployments are manual.
I’ve just sync’d my fork on GIT…

But have some issue with deployment on Cloudflare - I’ll work it out then take another look at this Geolocation.

Haha - fixed my version now - even forgot to delete .tool-versions & wrangler.toml

And yes I’ve lost all my keys. Will have to manually update.

So now I’ve picked up the new release as below displays.

And the CORS issue has been fixed without needing crossorigin work around.

Geolocation error current.

I’m hoping Stackblitz guys are able to provide a hint or the code to supply the ‘relay request’ that’s apparently required.

Looking into this still. Added a permissions policy as below and still persists.

I’ll repeat this now on Bolt.new and see the difference - plus I will deploy to Netlify and it works to within 3 to 4m accuracy.

Works out of the box - no Geolocation issues.

This is with the Network request relay ON

Netlify’d…

Check the URL
Simple one page location Unit Test. Geolocation accuracy.

I even tried switching off the Network relay request and it still works - but could have cached my position from the session. I would only know if I rerun the test and switch the network relay off before building. I will - just can’t be stuffed now.

Actually - I thought I was being lazy. So did a new build of the Unit Test and with the Network relay off - yeah, it made no difference.

So - you can see Geolocation is available in Bolt.new and I’m sure they can supply the code or enhancement required to make it work in Bolt.diy.

@aliasfox Michael - Do you attend the build meetings and are you able to help prioritise this one…?

[aliasfox]

I looked up some forum posts and this and it appears to be more of a sever config issue.

• Permissions-Policy: geolocation - HTTP | MDN
• iframe - Geolocation denied for HTML embedded site - anchor tag feature policy - Stack Overflow
• javascript - Having feature policy issue with geolocation using ionic - Stack Overflow

This is what ChatGPT Recommended (add “permissionsPolicy” logic to your server config):

Using Helmet Middleware

helmet is a popular Node.js package that simplifies setting security headers.

npm install helmet

const express = require('express');
const helmet = require('helmet');

const app = express();

// Set Permissions-Policy for geolocation
app.use(
  helmet({
    permissionsPolicy: {
      features: {
        geolocation: ['self', 'https://example.com'], // Adjust domains as needed
      },
    },
  })
);

app.get('/', (req, res) => {
  res.send('Geolocation Permissions-Policy configured!');
});

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

Or maybe ask Bolt.diy to add it…

I’ve never had to deal with this issue, so please let me know if it helps at all.

[shawn]

If you read a little further up, I already added the policy. And the app doesn’t use iframes either.

There’s a difference between Bolt.new and Bolt.diy in how it’s exposed to the world. I’ve seen PR’s relating to this with Stackblitz. See if I can dig this out but I’m sure if you’re having a session with Stackblitz this week, someone could bring this up…?

@ColeMedin - any chance it could be added to an agenda ?

[leex279]

@shawn thanks, added it to our agenda for next meeting