So ran into this issue today, where I have a website that needs the geolocation of the user. It was working fine when running locally on localhost, but now I get an error saying "Access to geolocation was blocked over insecure connection to http://localhost:4200". WTF Apple? I also tried 127.0.0.1 but got the same result. Am I missing something in the dev settings or did Apple just break everything?
Safari Version: 9.1.3 (11601.7.8)
Maybe it's possible to use https ( How to get angular-cli to ng serve over HTTPS ) and if not is possible directly for some reason maybe you can use a transparent proxy that offers https.
Many HTML5 new features like access to webcam, geolocation and others are now allowed only on pages served thru https scheme, so probably using https will work again. If not, maybe is possible to modify hosts file to workaround the problem.
I found a sort of solution but it is a bit tedious. I use ngrok to route my server and then the geolocation works fine. The only thing I don't like is that it has limits (if you are using free account), like you can't refresh a lot of times.
edit:
To Use ngrok download it first, then on terminal type
./ngrok http <port number>
ngrok example.
It will then show you the url routes. I used https. Go to to that address.
More ngrok instructions and download
Related
Am working on a API with Wix, and ive been able to get everything working, But there is one eliment i cannot automate or account for because i have no idea how its working or understand it properly.
I have been following: https://dev.wix.com/api/rest/tutorials/create-your-wix-app
It advises me to use Ngrok and also Npm after downloading some sample skd.
WHen setting up the App, it asks for a Redirect URL (When users authorize your app, we’ll redirect them to this URL with a temporary authorization code.)
It also asks for: App URL (When users start to add your app from the Wix App Market, we’ll redirect them to this URL.)
What i cannot understand is how Ngrok allows and uses the urls in the tutorial
As there is no physical files for these calls?
https://<NGROK_STRING>.ngrok.io/login and https://<NGROK_STRING>.ngrok.io/signup
I peronsally thought it was just a URL it called and passed back the Auth code, So i created a PHP page that fetched the string behind code: in the url so it can email me or save to file,
But this just does not work.
(I have it working in ngrok and npm, but i cannot have these running every time a user wants to download the app and link into our system)
I cannot understand the use of npm and ngrok, am presuming there is some sort of handshake somewhere.
Is this the correct way, do i have to install these programs on the a dedicated server and have them running at all time incase someone installs the app?
Is it not possible to just have the AUth code sent to me so i can finish the setup, generate a refresh token and be done with all the ngrok and npm
I'm not sure if I understand you correctly. So I'm gonna explain NPM and NGROK quickly.
NPM = node package manager -
npm is simply a package manager, so you can use it if you like to. Especially with node.js you are most likely gonna be using it. But with PHP npm might be used in your development enviroment so for example PHPStorm to get the packages you need. So no direct connection to WIX.
NGROK -
Is used to redirect traffic from a semi-permanent ngrok URL to a likely dynamic IP like from your Computer. In my case I work on localhost, and NGROK just relays the calls from wix to my localhost where the application is running. This is needed, since stuff from the internet can not simply access a computer. That's what NGROK is for.
If you have a ready application, you should not need ngrok, aslong as you have it running on a server somewhere. "Just" replace your NGROK urls with the actual URLs of your server.
I hope this helped =)
I'm making a web app that uses WebRTC but it requires https. Is there any way to turn off SSL check on Chrome and Firefox for localhost only or is there any way to make use of WebRTC without https? Thanks.
Chrome has chrome://flags/#allow-insecure-localhost which will ignore certificate errors on localhost. This makes development much easier.
As #vcsjones said
Both Chrome and Firefox treat localhost as a secure context, so localhost should have access to secure context only features like webcam, geolocation, and WebRTC.
It is correct. However, Firefox changed (since Firefox 42) mozSrcObject to srcObject. I changed it to that and it worked.
Since chrome://flags/#allow-insecure-localhost feature is removed from Chrome 88 disable security settings completely helped me to send requests from localhost to server.
Google Security Settings
The way to continue and access the server will be by clicking on an empty location at the background with the browser's error page and type:
thisisunsafe
I was working on a website on my local computer (mac OS High Sierra) and had put some redirects in the websites .htaccess file (in order to get images from the remote server instead of downloading them). After this it seemed that I could no longer access the website from my Chrome browser. Chrome would answer to any URL leading to the remote server with ERR_CONNECTION_REFUSED.
I tried other browsers on my computer such as Firefox, Chrome Canary, Chromium and Opera. None of them could provide a connection.
Next I checked with a different internet access via TOR-Browser on the same computer whether I could access the website, and it worked.
Next I checked via Terminal whether I could connect to the remote server with ping, nslookup and traceroute. All connecting to the server as expected.
I googled up possible solutions to this problem but could not find one so far. I had read that resetting the DNS cache could help and tried sudo killall -HUP mDNSResponder but it did not.
I did not edit the /etc/hosts file; a restart of the computer did not help; a reset of the .htaccess to the previous state did not help; resetting the caches in the browsers did not help.
How can I access the remote website from my browsers normally again?
EDIT1: Related question: Failed to load resource: net::ERR_CONNECTION_REFUSED for only selective images from instagram API
EDIT2: After about one day I was able to access the remote website again with no further incidents of ERR_CONNECTION_REFUSED even after putting the redirects into the .htaccess file. So it seems to me of being some sort of caching on my computer which prevents the browsers from accessing the remote website. However I have no clue what caused the error message in the first place and what kind of cache it might be.
Shortly after EDIT2 when I was able to access the remote website again, the ERR_CONNECTION_REFUSED appeared again - this time I tested another device with the same internet connection and I had encountered the connection error too. Now I believe it has something to do with the router and/or it's firewall - not the ISP since I could connect to the remote website with shell commands (named above). The image requests to the remote website seem to cause the router to block further access from browsers, probably as a security measure similar to the situation in this article https://www.cnet.com/forums/discussions/can-t-access-a-specific-website-going-thru-my-router-274637/
I have been trying to come up with a solution for my website to play nicely with socket.io. Right now I have apache serving my website (mostly in php) and I am trying to implement a live chat support feature using socket.io (node). I am able to get the chat functionality working separately (using express and going to wundertutor.com:8000) but when I just go to wundertutor.com (where the chat functionality is included as well), I am getting issues with CORS (Cross-origin resource sharing). Here is my error (on the client side):
XMLHttpRequest cannot load http://chat.wundertutor.com/socket.io/1/?t=1356421805823. Origin http://wundertutor.com is not allowed by Access-Control-Allow-Origin.
OR
XMLHttpRequest cannot load http://chat.wundertutor.com/socket.io/1/?t=1356422229000. Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true.
depending on wether I include this line of code in my app.js
io.set("origins","http://wundertutor.com");
Basically, I just want my node app to be a suppliment to my main site, but I really don't know where to specify the CORS parameters. I have tried doing this in my .htaccess file, in app.js, as well as in the client javascript, none of which have proved successful.
(Also, another thing I find strange is that when I go to wundertutor.com:8000, my node app correctly opens up a websocket, but when I try to go to wundertutor.com, it tries to use XHR polling which ends up causing this CORS mess)
Any suggestions would really be appreciated!
I figured out my problem if anyone else is experiencing the same issue. While I still think that what I am trying to do is using CORS, I didn't have to do any specific setting of Access-Allow-Origin-Control on either the Apache or node.js side. What I did to fix my problem was to serve the socket.io javascript file from the node.js server as opposed to the apache server. This made the requests coming from the socket.io javascript file have the same origin as where the javascript file was loaded. Here is an example:
<script src="http://wundertutor.com:8000/socket.io/socket.io.js"> </script>
(node server - correct)
vs
<script src="/javascripts/socket.io.js"></script>
(apache server - wrong)
I've done a lot of research and haven't found a definitive answer to this. Is there anyway to test the open graph on localhost? I don't haven any issues using the graph api on locahost.
I've changed my website url in the app settings and have even tried setting up a domain in my hosts file but the debugger linter for open graph tries to use the actual domain instead of my localhost and when using locahost directly the linter completely fails connecting.
Does anybody have any workarounds for this?
Using a local proxy is the right solution. ngrok didn't work for me neither.
A similar tool that did work with facebook debugger is localtunnel ✅
npm install -g localtunnel
lt --port 8000
# or using npx without installing localtunnel
npx lt --port 8000
Generates a url that looks something like https://<random_hash>.localtunnel.me/. Using this url in facebook open graph debugger worked for me as of October 18th 2017. I only had to hit Fetch new scrape information button. 🍻
Cool thing about localtunnel is that you can easily host your own localtunnel server with github.com/localtunnel/server so if it ever stops working with localtunnel.me, you can run your own somewhere in the cloud ⛅
You can use ngrok to create a random public subdomain that routes to your local webserver very easily, even through NAT or firewalls.
Just download ngrok and run ./ngrok http 8080 (assuming 8080 is your local webserver http port).
This will create a random subdomain like http://38a84a97.ngrok.io/ that routes to your local webserver and that you can use with Facebook to test your open graph tags.
Its very simple to test Open Graph in any local environment using Chrome or Firefox using plugins. I have used one to quickly show in chrome how the Open Graph looks to the viewer to test results. Here is a quote of what it does.
This extension shows how people will see your site in the most popular
social networks This extension is for professionals who creates a
media content.
To check meta-information of your site or article just open it in a
Chrome and click extension's icon. Also you could add an URL manually.
Here is a direct link to the plugin (Chrome)
Firefox add-on
As a bit simpler approach you can use a browser extension like https://socialsharepreview.com/browser-extensions - which will show your Social Cards directly in the Browser (which of course might fail, if you wrongly didn't set them serverside :))
To test open graph (and Twitter cards) I also had to expose localhost (Docker) to Facebook and Twitter. I used Serveo
It works very well for this, no need to install anything as it works with ssh port forwarding.
$ ssh -R 80:localhost:3000 serveo.net
Then navigate to the url given, and there you go.
You have to setup a public domain which points to your public ip address.
Use dynes.org or a similar service and setup your router to forward your port 80.
There are several tools you can use for serving something up over your localhost, each with varying degrees of functionality.
I prefer (obviously) http://forwardhq.com
Other great options here: http://devblog.avdi.org/2012/04/27/http-forwarding-services-for-local-facebook-development/
If anyone is looking to preview the :og tags on while developing on subdomains (using lvh.me) in localhost. You can use https://serveo.net.
Simply use following command to forward your local server requests. No installation required.
ssh -R yoursubdomain.serveo.net:80:yoursubdomain.lvh.me:3000 serveo.net
you can put your desired port in place of 3000.
Reference: https://blog.aarvy.me/2019/09/20/expose-local-apps-having-subdomains-to-web/