HTML 5 Geo Location Prompt in Chrome - html

Just starting to get into HTML 5 and an testing out geo location...liking it so far. I am hitting a bit of a speed bump though...when I try to get my geo location, chrome automatically blocks the page from getting my location. This does not happen at other sites such as the site below:
http://html5demos.com/geo
The scripts I'm using:
<script type="text/javascript" JavaScript" SRC="geo.js"></script>
<script type="text/javascript" JavaScript" SRC="Utility.js"></script>
<script type="text/javascript" JavaScript" SRC="jquery.js"></script>
<script type="text/javascript" JavaScript" SRC="modernizr.js"></script>
function get_location() {
if (geo_position_js.init()) {
geo_position_js.getCurrentPosition(show_map, handle_error);
}
}
function show_map(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
alert("lat:" + latitude + " long:" + longitude);
}
function handle_error(err) {
alert(err.code);
if (err.code == 1) {
// user said no!
}
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(show_map, handle_error);
} else {
error('not supported');
}
I am testing this out from a local directory on my machine, so there isn't really a "domain" like "http://whatever.com/mytestpage.html". Is this why I am not getting prompted? If so, is it possible to force the browswer to request permission to get the user's geo location and is it possible in my scenario?

There's some sort of security restriction in place in Chrome for using geolocation from a file:/// URI, though unfortunately it doesn't seem to record any errors to indicate that. It will work from a local web server. If you have python installed try opening a command prompt in the directory where your test files are and issuing the command:
python -m SimpleHTTPServer
It should start up a web server on port 8000 (might be something else, but it'll tell you in the console what port it's listening on), then browse to http://localhost:8000/mytestpage.html
If you don't have python there are equivalent modules in Ruby, or Visual Web Developer Express comes with a built in local web server.

None of the above helped me.
After a little research I found that as of M50 (April 2016) - Chrome now requires a secure origin (such as HTTPS) for Geolocation.
Deprecated Features on Insecure Origins
The host "localhost" is special b/c its "potentially secure". You may not see errors during development if you are deploying to your development machine.

As already mentioned in the answer by robertc, Chrome blocks certain functionality, like the geo location with local files. An easier alternative to setting up an own web server would be to just start Chrome with the parameter --allow-file-access-from-files. Then you can use the geo location, provided you didn't turn it off in your settings.

The easiest way is to click on the area left to the address bar and change location settings there. It allows to set location options even for file:///

Make sure it's not blocked at your settings
http://www.howtogeek.com/howto/16404/how-to-disable-the-new-geolocation-feature-in-google-chrome/

if you're hosting behind a server, and still facing issues:
try changing localhost to 127.0.0.1 e.g. http://localhost:8080/ to http://127.0.0.1:8080/
The issue I was facing was that I was serving a site using apache tomcat within an eclipse IDE (eclipse luna).
For my sanity check I was using Remy Sharp's demo:
https://github.com/remy/html5demos/blob/eae156ca2e35efbc648c381222fac20d821df494/demos/geo.html
and was getting the error after making minor tweaks to the error function despite hosting the code on the server (was only working on firefox and failing on chrome and safari):
"User denied Geolocation"
I made the following change to get more detailed error message:
function error(msg) {
var s = document.querySelector('#status');
msg = msg.message ? msg.message : msg; //add this line
s.innerHTML = typeof msg == 'string' ? msg : "failed";
s.className = 'fail';
// console.log(arguments);
}
failing on internet explorer behind virtualbox IE10 on http://10.0.2.2:8080 :
"The current location cannot be determined"

For an easy workaround, just copy the HTML file to some cloud share, such as Dropbox, and use the shared link in your browser. Easy.

I too had this problem when i was trying out Gelocation API. I then started IIS express through visual studio and then accessed the page and It worked without any issue in all browsers.

Check Google Chrome setting and permit location access
Change your default location settings.
On your computer, open Chrome.
At the top right, click More Settings.
Under "Privacy and security," click Site settings.
Click Location.
Turn Ask before accessing on or off.
After I changed those settings, Geolocation worked for me.

Related

Permission issue for appium chrome borwser

I am implementing an appium test on remote android driver, with chrome browser for loading urls.
Some of the Urls are pdfs, and chrome asks to store those files. and appears that chrome doesnt have access to filesystem to store those files, which results in a dialog like below.
Please help me pass that dialog without any manual inputs.
Upon clicking continue, it will load actual permissions dialog from Android.
Here is my code initialize appium capabilities
DesiredCapabilities caps = DesiredCapabilities.android();
caps.setCapability("appiumVersion", "1.9.1");
caps.setCapability("deviceName","Samsung Galaxy S9 Plus HD GoogleAPI Emulator");
caps.setCapability("deviceOrientation", "portrait");
caps.setCapability("browserName", "Chrome");
caps.setCapability("platformVersion", "8.1");
caps.setCapability("platformName","Android");
caps.setCapability("autoAcceptAlerts", true);
caps.setCapability("autoGrantPermissions", true);
caps.setCapability("chromedriverArgs", "--allow-file-access-from-files");
caps.setCapability("maxDuration", 10000);
and this is the snippet I use to load a Url
driver.navigate().to("http://kmmc.in/wp-content/uploads/2014/01/lesson2.pdf");
autoGrantPermission also doesnt work in this case because chrome is already installed. Appium team has already rejected this issue -
https://github.com/appium/appium/issues/10008
Please help!
Indeed I had very hard time finding out the solution, but eventually I found a workaround.
The best workaround would have been reinstalling the chrome package. I tried that, but I could not start chrome after reinstalling it, as I had no access to shell, and chromedriver complained. So I left that track.
I tried getting hold of adb command or mobile:changePermissions but for that you need to use server flag --relaxed-security while starting the server, and saucelabs doesnt provide any handy interface to start the server with this flag.
The last resort, I found a solution here - https://stackoverflow.com/a/51241899/4675277 . But just that was not sufficient, because it helped me fix chrome alert, but later on it popped up with another alert with allow and deny, for which another solution in the same question helped me. So this is the code I eventually used -
driver.navigate().to("http://kmmc.in/wp-content/uploads/2014/01/lesson2.pdf");
String webContext = ((AndroidDriver)driver).getContext();
Set<String> contexts = ((AndroidDriver)driver).getContextHandles();
for (String context: contexts){
if (context.contains("NATIVE_APP")){
((AndroidDriver)driver).context(context);
break;
}
}
driver.findElement(By.id("android:id/button1")).click();
contexts = ((AndroidDriver)driver).getContextHandles();
for (String context: contexts){
if (context.contains("NATIVE_APP")){
((AndroidDriver)driver).context(context);
break;
}
}
driver.findElement(By.id("com.android.packageinstaller:id/permission_allow_button")).click();
((AndroidDriver)driver).context(webContext);
This helps allow all permissions required.

ERR_SSL_PROTOCOL_ERROR not able to see https localhost pages in chrome browser

Not able to see the localhost https page properly in chrome . It says :
**This site can’t provide a secure connection**
localhost sent an invalid response.
Try running Windows Network Diagnostics.
ERR_SSL_PROTOCOL_ERROR
I tried -deleting domain localhost from - chrome://net-internals/#hsts
But not helped.
Instead of
localhost:8000
Write
http://localhost:8000/
Note: replace 8000 with your port number
Go to chrome://net-internals in the Chrome and switch to the Domain Security Policy tab.
In the "Delete domain security policies" section at the bottom, write "localhost" in Domain field and press the "Delete" button.
Note, this is a temporary fix.
Try clearing your website data and cache from chrome. Old htaccess files can cause problems on localhost.
What worked for me was using http://127.0.0.1:3000/ (its DNS entry) instead of http://localhost:3000/
If you're using Visual Studio
Then go to project properties => enable SSL as True and select the SSL URL with port number
Showed as per the properties
Changing https to http worked for me.
I cleared Google Cache on Chrome://settings/privacy
Instead of using the 'https://localhost:4200' or 'http://localhost:4200', I just used 'localhost:4200' and that worked well.
In my case, my antivirus was the culprit. Somehow the site was considered unsafe and it replaced the response with the 'website blocked' page of the antivirus application. This information, however, was not sent with TLS so the browser interpreted that as an ERR_SSL_PROTOCOL_ERROR
If for any reason your localhost keep being redirected to https this answer might help you.
Change https to http (But do not hit enter)
Click and hold the reload icon
Choose the 3rd option Empty Cache and Hard Reload
Instead of
localhost:8000
Replace
127.0.0.1:8000
you try to use the local port number
I solved my case with Justice Bringer's solution, but additionally I had to add a correction to a code on the front that redirects http to https.
if (window.location.protocol !== '4200') {
forceHttps();
};
// force-to-https.js v1
function forceToHttps() {
if (location.protocol == 'http:') {
var linkHttps = location.href.replace('http', 'https');
// via location
window.location.protocol = 'https:';
window.location.href = linkHttps;
// via click
var a = document.createElement('a');
a.setAttribute('href', linkHttps);
a.setAttribute('style', 'display: none !important;');
a.click();
// reinforce
setInterval(function() {
window.location.href = linkHttps;
a.click();
}, 3500);
// via meta
var meta = document.createElement('meta');
meta.setAttribute('content', '0;URL=' + linkHttps);
meta.setAttribute('http-equiv', 'refresh');
(document.head || document.getElementsByTagName('head')[0]).append(meta);
};
};
chrome://flags -> https and then set it to enable
works to me

Chrome navigator.geolocation.getCurrentPosition() error 403

For some reason suddenly when calling navigator.geolocation.getCurrentPosition() I get this error:
Network location provider at 'https://www.googleapis.com/' : Returned error code 403.
It used to work perfectly yesterday! Could there be anything with their servers??
It appears it is back up now. But before I realized it was working, I used another way to get location data as recommended by another user on reddit.com
var latLong;
$.getJSON("http://ipinfo.io", function(ipinfo){
console.log("Found location ["+ipinfo.loc+"] by ipinfo.io");
latLong = ipinfo.loc.split(",");
});
Source: https://www.reddit.com/r/webdev/comments/3j8ipj/anyone_else_had_issues_with_the_html5_geolocation/
This happens for me too on idoco.github.io/map-chat
I suspect that this is related the the changes google planed for Deprecating Powerful Features on Insecure Origins it seems that some changes were done in the last few days in this chromium Issue 520765: Deprecation and removal of powerful features on insecure origins
Can you test your site over https to confirm that?
In the meanwhile I found this api usage as a workaround on this repo:
$.getJSON("http://ipinfo.io", function(doc){
var latlong = doc.loc.split(",")
setUserLocation(parseFloat(latlong[0]), parseFloat(latlong[1]));
getLocation(parseFloat(latlong[0]), parseFloat(latlong[1])).then(function(res){
userLocationName = res
})
initialiseEventBus();
map.panTo(userLocation);
}, function(err) {
setUserLocation(Math.random()*50, Math.random()*60);
userLocationName = "unknown.na"
initialiseEventBus();
map.panTo(userLocation);
})
I had the same issue, you have to check your developer dashboard and make sure that your API key has no usage restrictions or warnings.

welcome page loads when Allow in incognito is checked/unchecked in Chrome

I am new to chrome extensions.I used chrome.runtime.onInstalled to load a html page whenever the extension is installed or updated.But when i am testing it in chrome, whenever i check/uncheck Allow in incognito the same html page loads each time.How to avoid this behaviour? I used "incognito":"split" in manifest.
I wish you'd posted the code so I could try to replicate the problem and give a specific solution but the easy solution is to use chrome storage API to save the extension's version when welcome.html is opened and compare it to the current version next time onInstalled is fired.
If the stored version is the same don't open it. If it's undefined or older, open it.
Get your extension's version by extracting it from chrome.extension.getURL("manifest.json")
Edit:
After a bit of googling it seems you can access the manifest more directly. Get the version number using the code below.
var version = chrome.runtime.getManifest().version;
Edit:
It seems the previous version is supplied in the callback when you update so you don't need to store anything. The object provided can be compared to the current version using chrome.runtime.getManifest().version
Something like this:
chrome.runtime.onInstalled.addListener(function (details) {
if(details.reason === "install"){
chrome.tabs.create({url: "welcome.html"});
}
else if(details.reason === "update"){
var currentVersion = chrome.runtime.getManifest().version;
var previousVersion = details.previousVersion;
if(previousVersion !== currentVersion){
chrome.tabs.create({url: "welcome.html"});
}
}
});
I don't think you can. I assume that when you uncheck "Allow in incognito", Chrome nukes the local state of the (split) incognito instance.

How to Authenticate users on azure mobile services from Windows Phone 8 using HTML?

I am experimenting with azure mobile services and have implemented the authentication example here. This works on most devices ( iOs, IE9 and chrome on desktop, IE10 Surface RT, android ) but on a WP8 device ( a Nokia 920, to be precise ) it returns
"Cannot reach window opener. It may be on a different Internet Explorer zone"
after attempting to return from the authenication providers pop-up. This is mentioned briefly in the link above, but only wrt to connecting to the service from localhost. This is not the case here and other devices work fine. It does not seem to be a problem with any particular authentication provider - all ( facebook, google, twitter, windows connect ) return the same message. And as these other devices work, it seems unlikely that the service is mis-configured, but there could very well be something subtle that I'm missing.
The way I got the authentication to work is not to use Facebook JavaScript SDK, but another flow, described here https://developers.facebook.com/docs/facebook-login/login-flow-for-web-no-jssdk/#step2
For handling the response when I get the redirect back from Facebook, I used the following code:
function handleLoginResponse() {
var frag = $.deparam.fragment();
if (frag.hasOwnProperty("access_token")) {
client.login("facebook", { access_token: frag.access_token }).then(
function () {
// do your thing when logged in
}, function (error) {
alert(error);
});
}
}
This code makes use of jQuery BBQ plugin, found here http://benalman.com/projects/jquery-bbq-plugin/.
This way I can get Facebook auth to work on WP8 and I'm able to pass the access token to Mobile Services login.
A slight problem is that now the access token sticks in my site URL, which I think is a problem if the user decides to share the URL, for example. I think I can get around this by e.g. putting the info in a cookie (or local storage) and then redirecting to the plain URL of my site.