Google Maps API Not Loading On iPad - javascript

I have a webpage that uses the Google Maps API to load a custom map. The map works on Windows and Mac in all major browsers, however it does not work on an iPad. I have tested it on Safari Mobile and Chrome Mobile and the same issue is happening. Nothing shows up and I get the following error in the console:
[Error] Failed to load resource: The certificate for this server is invalid.
You might be connecting to a server that is pretending to be “maps.gstatic.com”
which could put your confidential information at risk. (main.js, line 0)
Any help on what this means would be greatly appreciated. Thanks.

I figured out the issue was that we were using the HTTP protocol. Using HTTPS protocol when issuing requests to the API fixed the issue on the iPad.

I had very same issue. But my case is just opposite to #dcod, where the development version of my app is http:// and hence I need to use http:// of maps.google.com.
I will update the behavior in the production where the app is going to be https://

Related

Chrome not supporting getUserMedia

I have a form in my laravel webapp where the user needs to add a profile picture through webcam. While developing in localhost(secure origin), it was working fine but now when i am trying to access it using my IP address, it doesn't seem to work.
I used "navigator.mediaDevices.getUserMedia" for accessing webcam while developing my project but now when the website is made live(or testing through my IP), chrome says that "getUserMedia() no longer works on insecure origins". I also tried Webcam.js but same came across the same error.
navigator.mediaDevices.getUserMedia(constraints).
then(handleSuccess).catch(handleError);
Error output in console:
[Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins for more details.
Starting with Chrome 47, getUserMedia() requests are only allowed from secure origins: HTTPS or localhost.
did you check this page? I think you're using HTTP. I'd like to switch to HTTPS and test it.
https://developers.google.com/web/updates/2015/10/chrome-47-webrtc?hl=en
As you can see from the doc, chrome requires a secure context for using it:
So you must switch to https for testing it in chrome

Google WebSpeech API is throwing 'not-allowed' error for microphone permission

I am using Google's WebSpeech API found on this site:
https://developers.google.com/web/updates/2013/01/Voice-Driven-Web-Apps-Introduction-to-the-Web-Speech-API
With Python's http.server on my Windows machine,
it works without any problem:
I upload exactly same files, same API but it does not work in my CentOS remote server throwing a 'not-allowed' error for the microphone permission:
I thought that problem could be http server related. So I tried with Apache Httpd, Python http.server and Nginx. None of them worked.
Any idea about what's blocking the microphone?
Thanks!
I couldn't find documentation backing this up, but from my own experience I can confirm that only after installing an SSL certificate on a website, chrome stopped blocking it from requesting microphone access.
I experienced not-allowed also - trying to access mic from Chrome inside cross-origin iframe. Resolved by adding allow="microphone;" to the iframe:
<iframe src="mysrc" allow="microphone;"></iframe>
Note: Also required using HTTPS for parent page & iframe page
Reference: https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-permissions-in-cross-origin-iframes
I've encountered the same issue (throws not-allowed), but I was using HTTPS.
In my case, it turned out that you can't obtain speech or enable microphone access from an iframe. The same code works normally when not shown in an iframe.

Google App Script postMessage does not match recipient window's origin

I have a Google App Script deployed as a Web application.
It was working normally, until this evening I discovered it would not load in Firefox or Chrome.
In Firefox I am getting this message;
Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://n-...-0lu-script.googleusercontent.com’) does not match the recipient window’s origin (‘https://script.google.com’).
Removed part of URL
The app is deployed: (Executing as myself, and is Accessible for anyone, even anonymous).
I thought the issue might be with LastPass as mentioned here, but I have disabled LastPass in both browsers and the issue persists.
I'm not sure if this is a bug or a feature, but web apps starting in Chrome 60 may need to be set to XFameOptionsMode.ALLOWALL. I have a long running web app that just broke. Setting this worked.
XFrame Options Docs

Google Maps on site HTTP/HTTPS error

I'm requesting Google Maps (latest API, AFAIK) on my site, but I'm getting an error in the console and some googl'n didn't do the trick.
I'm requesting the maps via
<iframe src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBQ-4VHuS8q6AzOD5g0Cbjxx1OpB3fus1w&q=Achterom+93,3311KB,Dordrecht+Nederland&zoom=13"></iframe>
and the error is seen in the image below.
Note: "Anonieme functie" means "Anonymous function" in regular English.
All I can think of which my cause the error is that my site runs on HTTP (non-SSL) and the maps can't run on HTTP and needs HTTPS -> HTTP vs HTTPS.
I hope someone can help me solve this issue. Thanks!
Update: I've just noticed the problem only appears in Safari.
Link to my site
I think the link to your site is not correct atm. At first sight the implementation code looks alright.

Chrome blocking iframe requests as cross-origin request even when origins are the same

This one has me stumped.
I have a web app that has a file upload/download area. Files are downloaded in the background via a temporary iFrame element. This is a single-paged AJAX application and the UI is written in Javascript, jQuery and uses the jQuery.FileDownloader.js to manage the iFrame. The application runs over HTTPS and the site and download URL are on the same exact domain. The back-end is a RESTful application. This has worked great for months. Until today.
All of a sudden, when attempting to download a file in Chrome, the browser reports an error of "Blocked a frame with origin https://example.com from accessing a cross-origin frame."
The problem is that the origin of the main site and that of the iframe are the exact same domain. I have ensured that the domains are the same as well as the protocol. Chrome is the only browser that throws up the cross-origin error. IE, Firefox, Opera, Safari... all work as expected. It's only in Chrome and it's only as of today. To make things worse, no updates were made to the browser. It truly is spontaneous. I've also ruled out plugins as the cause by running in Incognito mode, where none are allowed to run by my settings, as well as disabling my anti-virus software. This problem is being exhibited on other computers, in other locations (not on our LAN or subnet), all running Chrome.
And, again, both domains of the parent frame and the embedded iframe are identical. This only happens against the production server which runs over HTTPS. Other non-HTTPS sites (e.g. our dev environment, localhost) don't have the problem. Our SSL is valid. Since this is a single-paged AJAX application, we're trying to avoid popping up another window for the download.
Hopefully, someone can offer some advice. Thanks in advance.
Update: After additional research, I have found the solution to this problem is to enclose the filename in the response header in double-quotes.
I have found the cause of the problem. It turns out that Google Chrome has problems with files that have commas in their filename. When downloading the file via a direct link, Chrome will report that duplicate headers were reported from the server. This has been a long-standing problem with Chrome that has gone un-addressed. Other browsers are not susceptible to this problem. Still, it's a fairly easy problem to troubleshoot and, indeed, when I searched on this error, the first search result had the solution: remove commas from filenames when handling a request from Google Chrome.
However, this wasn't a direct link, it was an AJAX-request, which results in a different exception. In this case, the error provided by Chrome is the cross-origin request exception and this is what made it so difficult to troubleshoot.
So, the tl;dr of it all is to strip out commas in the names of uploaded files.
Another instance I found where this issue occurred is after executing code similar to:
document.domain = '[the exact same domain that the iframe originally had]'
Removing this line of code got rid of this error for me.

Categories