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
Posts: 216
Registered: ‎11-05-2011
My Device: Z10

How to whitelist sites for XHR in WebView?

How to whitelist sites for XHR in WebView?

Developer
Posts: 216
Registered: ‎11-05-2011
My Device: Z10

Re: How to whitelist sites for XHR in WebView?

I use local html files and need XHR from that files to external sources. But found error:

 

Thread 13 (info): JS Console: :0: XMLHttpRequest cannot load http://www.example.com. Origin local:// is not allowed by Access-Control-Allow-Origin.

Contributor
Posts: 16
Registered: ‎05-17-2011
My Device: 9700

Re: How to whitelist sites for XHR in WebView?

My XHR requests from javascript also arent going through, I've been wondering as well if there was a whitelist

Developer
Posts: 669
Registered: ‎02-19-2011
My Device: BlackBerry PlayBook 32GB

Re: How to whitelist sites for XHR in WebView?

Has anyone ever figured this out?

Staff UI Prototyper (read: full-time hacker)


My BB10 apps: Screamager | Scientific RPN Calculator | The Last Weather App

New Developer
Posts: 5
Registered: ‎05-30-2012
My Device: Z10

Re: How to whitelist sites for XHR in WebView?

How is this still pending from last year? This is a pretty huge issue.

 

I started throwing my project together with cascades with the aim of providing a fluid navigation experience to my app which will be mostly powered by a webview (as opposed to doing a webworks app using the recommended bbUI library which obviously doesn't provide the same fluid navigation experience). Ie: a tabbed pane that sends signals to the webview to update content... part native / part web. Better than webworks IMO.

 

This cross domain issue is obviously a major roadblock... anyone find a resolution to this?

Developer
Posts: 1,004
Registered: ‎12-12-2010
My Device: Z10 (red Limited Edition)

Re: How to whitelist sites for XHR in WebView?

I know that in WebWorks you need to specify the required domains in the config.xml file. Maybe there is a similar option in the bar-descriptor.xml?

-------------------------------------------
BlackBerry Certified Builder for Native Application Development -- Proud member of the Belgian BlackBerry Developer group
Samples: Park in Ghent
Feeling generous? Nominate me for BB Elite member!
New Developer
Posts: 5
Registered: ‎05-30-2012
My Device: Z10

Re: How to whitelist sites for XHR in WebView?

Found the solution... it just took a little hacking around the WebWorks source code. Much more painful than it needed to be. Use with caution as it's an undocumented api.

 

I posted an explanation here: http://wesquire.ca/-/x

 

<script type="text/javascript" src="platform:///webplatform.js"></script>
<script>
    var wv = qnx.webplatform.getWebViews()[0];
    wv.addOriginAccessWhitelistEntry('local://', 'https://example.com', true);
    wv.addOriginAccessWhitelistEntry('local://', 'http://example.com', true);
    wv.addOriginAccessWhitelistEntry('local://', 'ws://example.com', true);
    wv.addOriginAccessWhitelistEntry('local://', 'wss://example.com', true);
</script
Developer
Posts: 669
Registered: ‎02-19-2011
My Device: BlackBerry PlayBook 32GB

Re: How to whitelist sites for XHR in WebView?

Your link doesn't work.
But... Wow... Wait. Is this how you can get WebWorks functionality available inside a cascades webview? Being able to call more WebWorks API stuff would open a LOT of interesting possibilities....

Staff UI Prototyper (read: full-time hacker)


My BB10 apps: Screamager | Scientific RPN Calculator | The Last Weather App

New Contributor
Posts: 5
Registered: ‎07-12-2013
My Device: BB Z10

Re: How to whitelist sites for XHR in WebView?

Hi,

 

I found another link (here) talking about the same solution.

It does not work for me.

 

Anybody did make it work?

 

thanks

New Contributor
Posts: 5
Registered: ‎07-12-2013
My Device: BB Z10

Re: How to whitelist sites for XHR in WebView?

[ Edited ]

Hi all,

I made a workaround by using javascript ability of QML files.
I send the jquery (or whatever) ajax options to the native side and made the ajax call on the native side.

Here is the function I used on the nativeSide to handle XHR based on jquery $.ajax method.

 

function handleAjaxCall(options,callback){
	var url= options.url;
    var type= (options.type in [ 'POST', 'GET' ]) ? options.type : "GET"; //default to GET
    var data = options.data ? options.data &colon; { }; //default to empty params
    
    var request = new XMLHttpRequest();
    request.onreadystatechange=function() {
        if(request.readyState === XMLHttpRequest.DONE) {
            if (request.status === 200) {
                console.log("Response = " + request.responseText);
                try{
                	var response = JSON.parse(request.responseText);
                }catch(e){
                	var response = request.responseText;
                }
                var params={
                    success : true,
                    data &colon; response
                }
                callback(params);
            }
            else {
                // This is very handy for finding out why your web service won't talk to you
                console.log("Status: " + request.status + ", Status Text: " + request.statusText);
                var params = {
                    error: true,
                    req: request,
                    err : request.statusText
                }
                callback(params);
            }
        }
    }
    var encodedString = encodeURIComponent(data);
    request.open(type, url, true); // only async supported
    // You might not need an auth header, or might need to modify - check web service docs
    //request.setRequestHeader("Authorization", "Bearer " + yourAccessToken);
    // Post types other than forms should work fine too but I've not tried
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    // Form data is web service dependent - check parameter format
    var requestString = "text=" + encodedString;
    request.send(requestString);
}

 

warning : this does not handle all $.ajax options, just url, type, data and success and error handlers.

All you have to do is send the options to the native side and send back the result (with navigator.cascades.postMessage & onmessage)
Once you have the result you can check if success or error is true.


I made a hook to replace jQuery $.ajax by a function that sends to the native side. Here is how to do it :

 

//fix BB10 ajax calls with a native patch
	var lib=window.Zepto || window.jQuery;
	lib.ajax=function(options){
		navigator.cascades.postMessage(JSON.stringify({ action:"ajax", options:options }));
		
		navigator.cascades.onmessage = function(message){
			var params=JSON.parse(message);
			if (params.action=="ajaxCallback"){
				if (params.success && options.success){
	  				options.success(params.data);
	  			}else if (params.error){
	  				options.error(params.req, params.err);
	  			}
			}
			
		}
	}

 

warning : I made a kind of lib to discuss with native side and this code was adapted from it to be more "raw". 

it may not fully work but it should give you the idea.

 

hope this help!