Google Visualization API - error calling method on NPObject - javascript

I've been playing with the visualization API aka dynamic charts and I've found that the example at http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html does not really work on localhost. That is, Error calling method on NPObject is thrown when a event is clicked (points A and B in the example aforementioned). I suppose that is a security issue on the server end (Google's flash base).
There's no API key, authentication or anything similar required - as far as I know. What am I missing?
Thanks
Update:
The very same example on jsFiddle: http://jsfiddle.net/gT5GB/ Localhost seems not to be the issue, it's the non-google domain I guess.
Since that jsFiddle code is hosted on a domain, the note at the very bottom of the documentation should not apply:
Because of Flash security settings,
this (and all Flash-based
visualizations) might not work
correctly when accessed from a file
location in the browser (e.g.,
file:///c:/webhost/myhost/myviz.html)
rather than from a web server URL
(e.g.,
http://www.myhost.com/myviz.html).

I had the same issue today and have solved it. I was not using localhost anywhere, I was hosted on a proper domain, and I too was receiving the NPObject error when clicking on the legends. I was also just using the example directly from http://code.google.com/apis/chart/interactive/docs/gallery/annotatedtimeline.html
The cause was that Google's example uses https://www.google.com/jsapi (note the HTTPS), whereas my site was over plain HTTP. I'm not that familiar with Flash, but I suspect it has similar rules for secure/non-secure as it does for crossdomain requests.
Changing Google's example to use http://www.google.com/jsapi solved the pr

Yes, this is a limitation related to security in Flash. It's covered here: Flash - HTTP requests won't work on localhost
So your best bet is to host this somewhere (it can be a server in the same machine).

Related

Error when using G-Suite Developer console with Google Sites embedded API

I've written some code that retrieves some data from google sheets then updates some content on my google sites. However, while the script works (when run on localhost) I encounter the
"details": "Not a valid origin for the client: https://966655698-atari-embeds.googleusercontent.com has not been whitelisted for client ID MY-ID. Please go to https://console.developers.google.com/ and whitelist this origin for your project's client ID."
However, I enabled this for localhost, cleared my caches. The problem is the 'https://966655698-atari-embeds'. Each time the google site loads it generates a new random number sequence. Does anyone know how to workaround this? The google site uses embedded html which I believe is why the initialization failed.
I have tried to white-list https://googleusercontent.com which didn't work (I didn't think it would because the domain changes) but I'm honestly incredibly stumped.
Google hosts all user content using their somedomain.googleusercontent.com. I do not know for certain, but I'm almost sure that to save space they dynamically host their content, meaning that when the embedded html does not need to be actively hosted, it isn't. I had to find a way to host from a site that would always send the request. For me, I found that github pages was the answer.
I found this on adobe's website which somewhat explains what googleusercontent does. https://helpx.adobe.com/analytics/kb/googleusercontentcom-instances.html
To set up github pages this link will explain how to do so https://guides.github.com/features/pages/
You can add this to the developer Google console relatively easily and any connection will submit from your username.github.io. (I believe it also uses https protocol). It also allows me to implement directly using git version control and implements nicely with WebStorm.

Cross Domain AJAX (Philips Hue Lights)

I am building a web application that uses voice recognition & text-to-speech that performs actions/displays a wide variety of data through an HTML page (built with JS (jQuery for AJAX)/HTML/CSS.) This web application is being hosted on HTTPS server that is not on my local network.
I have set up and configured some smart lights called "Philips HUE Lights" that are equipped with a RESTful API that can only be controlled through the local network (not visible outside of the local network.)
I am able to send commands to the device by visiting the CLIP debugger/API tool (local ip) "http:////debug/clip.html" that is included with their product. I am able to send HTTP commands to the "Philip HUE Bridge" which is the device that issues the commands to the lights. All of the commands work when I use their API tool (GET, "PUT, POST, DELETE) visiting the locally hosted url shown above.
However when I try using a jQuery AJAX request "GET"/"PUT" from my web application that is hosted on my HTTPS server, the command fails. I have tried setting the AJAX function header property with "Access-Control-Allow-Origin: *". I have also tried setting the "crossDomain" property to true in the AJAX function. I also have tried setting the "dataType" property to both "json" and "jsonp" and it still won't work.
I am visiting my HTTPS web application through a computer that is connected to the local network that the "HUE Bridge" is connected to. Given that I am using a computer on the same network, I thought this might work...
I have read a lot of other posts/information on the internet but can't seem to find a definitive answer. I wanted to ask some of you more seasoned people:
Is what I am trying accomplish even possible given the scenario I described above? Or will I have to achieve this in a different manner?
Any help/suggestions are much appreciated. Thanks.
You are running into "Mixed Content" security issues.
Basically when you are hosting a page on a secure URL (https) you cannot access unsecure (http) resources without getting a mixed content error.
This error is visible in the console of your browser (usually accessed by F12), when something is not working during webdevelopment always check the console for errors.
To hack around this you can temporarily disable the security and allow the unsecure request. For example Chrome shows a shield in the addressbar which you can click to temporarily disable the warning. Firefox shows a clickable warning overlay on the lock icon in the addressbar.
This might be a temporary workaround for development, but you cannot expect your users to disable security.
A solution should be to send a Content-Security-Policy header. Based on documentation from http://content-security-policy.com/ the following header should allow XMLHttpRequests to any resource:
Content-Security-Policy: connect-src *
However since I do not have enough control to modify the headers on the webserver where my files are hosted I could not test this.
Before using this method make sure you understand the security implications when you send this header.

Why are HTTP images not appearing in HTTPS application?

I have secured (HTTPS) ASP.Net MVC 4 application that uses unsecured (HTTP) ArcGIS map services. These services are called using JavaScript to get relevant map images.
If I use HTTP for my app, everything works as expected. But if I use HTTPS, IE10 and Chrome do not display the requested map images (IE prompts to display unsecured content) but Safari shows the image, no questions asked.
As an example, say my application is https://app.mydomain.com and my map services are at http://gis.mydomain.com
I run fiddler and see the response as something like (removed some parameters to simplify): http://gis.mydomain.com/arcgis/rest/services/Energy/BaseService/MapServer/export?....&f=image
but the image is not shown. If I enter this URL directly into my address bar, the expected image is shown.
There are no errors reported anywhere, including IIS 7.5 logs. I realize that mixed content is not ideal but I have no option at the moment. I have found lots of references to SilverLight with regard to this type of problem, but I am only using javascript and ASP.Net. I also compared the page source for both https and http - there is no difference.
While browsing a secure site, the browser will not load "nonsecure items" unless you (the visitor) authorize it.
The only way to solve this from server-side is by making the "nonsecure" content secure, by placing it under a https domain aswell.
Update:
By the way, if you don't specify the protocol in the content URLs, for exemple //gis.mydomain.com without specifying if it is http:// or https://, the browser will automatically assume the same protocol that was used to access the website to load this content too.
So if you access with http:// it will load the dependencies using http:// as well, and if you use https:// it will do the same.
Another way of getting around this is to proxy the insecure content via your (https) host. ESRI have some slightly out-of-date docco on this process (including an example ASP.Net proxy page) here, but most/all of it should still hold in the latest versions of the API. From memory, they recently (3.5?) made the proxy configurable on a per-service basis, which is very handy.
You can ignore the token-based authentication stuff in your case, all you're really looking for is to have the insecure content come through a secure host.

Permission error when using Ajax on a protocol other than http

We are using a custom protocol handler to connect to an embedded device across firewalls, NAT etc. The solution is called Nabto.
This works great - a plug-in on the user's computer handles requests to all nabto:// URIs and serves HTML pages with information about the current connections etc.
Now, we would like to access Nabto functionality from a regular web page. This is difficult with browsers enforcing the Same-Origin policy (e.g. our http page cannot communicate with the nabto page).
So far, I am trying to solve this using easyXDM by having a "proxy page" served by the nabto plug-in. This page is then allowed to launch nabto:// requests and can communicate the results back to the http page using easyXDM.
However, same-origin requests fail in Internet Explorer - even when both pages reside in the nabto://self domain. I get this error: image
Is this an error in Internet Explorer? Any idea how to solve it?
Thanks a lot,
Martin
We had huge issues that sound similar to yours when developing the plugin. I must admit that we gave up getting clean Ajax support working through Nabto after spending a lot of time on it. In fact, the final thing that happened was opening a support case with Microsoft about it, the case bounced around and we never heard anything back.
There might be a chance though for a hack: In the meantime we realized that IE allows you to populate images through nabto:// urls on an http / https page. Maybe you can populate an image object through your query and extract the result from there?
On a side note: You are welcome to post in the support forums (forum.nabto.com) about such things. On the other hand, you help spread the word about the product in this way ;-)
Ulrik

How to test an AJAX application that is pulling data from a live website?

I'm working on an AJAX application that pulls data from a live website, I can't replicate the complete application on my local environment at the moment so in order to test if the JavaScript code is working as expected I need to be able to bypass the same domain restriction on the browser (without making changes on the webserver) any suggestion will be greatly appreciated.
So far I have tried modifying the prefs.js in Firefox 2 and Camino including the lines suggested in this link: http://www.zachleat.com/web/2007/08/30/cross-domain-xhr-with-firefox/
Thanks in advance.
Edit 04/29/2009 3:18pm:
I agree the proxy option is definitely a way to go. But would it be possible to have a solution using just Firefox? (maybe an add-on?)
If you can change the endpoint URL you could bounce the requests through your local server, either with mod_rewrite or a simple script.
This has the advantage that you can easily log the requests and responses, and alter them (e.g. send back timeout errors, bad data and the like).
Well, for viewing the requests/stepping through the js try using Firebug.

Categories