Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Developer
splatterb0y
Posts: 18
Registered: ‎12-15-2012
My Device: Z10 LE, Playbook and Dev Alpha C
My Carrier: BASE
Accepted Solution

CORS for Webview in Cascades

The Webview is not able to make ajax requests to websites or api's that not have the same origin policy disabled. This is no problem with phonegap or webworks but with cascades. 

 

Here is an article with a workaround that sadly is no longer working, maybe one of you guys out the can help me:

http://wesquire.ca/blog/2013/03/blackberry-10-cascades-webview-cors

 

 

Please use plain text.
Developer
greenmr
Posts: 871
Registered: ‎03-20-2013
My Device: Red LE Developer Z10
My Carrier: Fido

Re: CORS for Webview in Cascades

[ Edited ]

I am not currently doing AJAX in a WebView, but looking at the link you posted, can you not reverse engineer a current build of WebWorks code to see what platform:///webplatform.js is doing now?



Developer of Built for BlackBerry certified multiFEED RSS/Atom feed reader and aggregator.
Please use plain text.
BlackBerry Development Advisor
Kareem_ELSayed
Posts: 81
Registered: ‎09-09-2013
My Device: BlackBerry Z10
My Carrier: Etisalat UAE

Re: CORS for Webview in Cascades

FYI this thread as well.

 

http://supportforums.blackberry.com/t5/Native-Development/AJAX-call-from-javascript/td-p/2633529/pag...

 

The solution seemed to be working is to do the ajax part in QML/Native side and pass the data from/to the webview.

 

this article( in frensh but chrome can translate it)  http://www.haploid.fr/blog/2013/09/10/blackberry10-et-ajax/  include sample https://gist.github.com/ggendre/6507448/download

 

Thanks,

Kareem.

Kareem ELSayed | Application Development Consultant | Developer Relations | BlackBerry | Twitter:@kemobyte
Please use plain text.
BlackBerry Development Advisor
anzor_b
Posts: 164
Registered: ‎09-24-2012
My Device: White BlackBerry 10
My Carrier: Bell

Re: CORS for Webview in Cascades

Hi slpatterb0y,

 

Can you give me an example API that has the same origin policy disabled? 

 

I use the beatport API (api.beatport.com) inside the WebView and it works without issues, but I am guessing they disable same origin policy.

Please use plain text.
Developer
splatterb0y
Posts: 18
Registered: ‎12-15-2012
My Device: Z10 LE, Playbook and Dev Alpha C
My Carrier: BASE

Re: CORS for Webview in Cascades

[ Edited ]

Here is an example with security enabled: 

http(s)://a.4cdn.org/boards.json

 

Please use plain text.
BlackBerry Development Advisor
anzor_b
Posts: 164
Registered: ‎09-24-2012
My Device: White BlackBerry 10
My Carrier: Bell

Re: CORS for Webview in Cascades

Looks like the API domain is too restrictive. This tells me it was never provided to be used for building mobile apps (I've tried a local web server, still doesnt work).

 

I will do some digging into the magic that WebWorks does - it uses a modified webView, while the Cascades WebView is more like the browser on the device.

 

Having said that, I've used "good" APIs, that provide an API key and allow mobile applications to connect without issues (for example beatport.com). At the end of the day, WebView != WebWorks and good APIs != bad APIs

 

Cheers,

A.

Please use plain text.
Developer
splatterb0y
Posts: 18
Registered: ‎12-15-2012
My Device: Z10 LE, Playbook and Dev Alpha C
My Carrier: BASE

Re: CORS for Webview in Cascades

[ Edited ]

@anzor_b you are right. There is a second version of the API that supports CORS. (Try: https://boards.4chan.org/boards.json)

 

I try to access this API with jQuery, but I get some strange errors: (The first one is not occuring now I have found the URL with CORS support) but the second which says something about synchronous requests bothers me. 

error.jpg

@Kareem_ELSayed

I tried the workaround you provided but it only gives me the following error:

"Native Ajax Error 0, 0"

Please use plain text.
BlackBerry Development Advisor
anzor_b
Posts: 164
Registered: ‎09-24-2012
My Device: White BlackBerry 10
My Carrier: Bell

Re: CORS for Webview in Cascades

Hi splatterb0y,

 

Different error from before, this time, the WebView doesn't complain, but the server is still rejecting the request.

 

 

This tells me the authors of the resource are checking to make sure the requests are coming from the same domain.

 

Here's a function i test ajax with, without jQuery (easier to diagnose):

 

var ajaxLoadFile = function ajaxLoadFile(path, callback) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = function(data) {
	if (httpRequest.readyState === 4) {
		console.log(httpRequest.status); //outputs 0
		if (httpRequest.status === 200) {
			callback(data);
	        }
	}
    };
    httpRequest.open('GET', path);
    httpRequest.send();
};

ajaxLoadFile("https://boards.4chan.org/boards.json", function(data){
console.log(data);
});

 After doing some reading, status of 0 typically indicates that the server rejected the request because it's not happy where it's coming from.

 

Also, in Chrome, I get the following:

 

XMLHttpRequest cannot load https://boards.4chan.org/boards.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

 

I've tried many APIs that work without issues. Their authors intend people on using their content (they give you an API key and everything), movieDB, beatport, IMDB and others. Unfortunately even the second URL you found doesn't circumvent this.

Please use plain text.
Developer
Pumano-
Posts: 215
Registered: ‎11-05-2011
My Device: Z10
My Carrier: Beeline

Re: CORS for Webview in Cascades

I found solution for it:

 

I'm make AJAX request via pure Cascades QML Javascript (it's works perfectly, and you don't need to whitelist domains), after it I send result to webview via postMessage API. Webview got message with Object and then I parse request...

 

You can also parse it via C++.

Please use plain text.
Developer
splatterb0y
Posts: 18
Registered: ‎12-15-2012
My Device: Z10 LE, Playbook and Dev Alpha C
My Carrier: BASE

Re: CORS for Webview in Cascades

[ Edited ]

@anzor_b @Kareem_ELSayed @Pumano

Thanks for your time and helping me with this issue. You both are right it looks like the api is not realy CORS compatible. The funny thing is that I can consume the API with XmlHttpRequest from within cascades but not from the webview. Dont know why. 

 

There is a pretty simple solutions for all the API's that dont support CORS, there is a small proxy site over here: http://jsonp.jit.su which you can use to access the 4chan-API and other apis without any problems directly from the WebView with jQuery. 

Please use plain text.