You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@flex.apache.org by bilbosax <wa...@comcast.net> on 2018/09/20 04:19:03 UTC
Inject Authorization Header into WebView on Mobile
I am using a RichWebView ANE by MyFlashLabs that is basically a StageWebView
with a few extra features added for a mobile AIR project. I need to be able
to inject a header into a WebView because I need to do HTTP Basic
Authentication on a mobile device. I do not want a user to have to enter a
username and password into a login box(which I don't believe is support on
mobile AIR anyway), but would much rather pass the username and password
directly to my PHP file in an Authorization Header. The problem is, I have
no idea how to add an authorization header when opening a page in a WebView.
Any suggestions on things to try would be greatly appreciated!
Thanks!
--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Re: Inject Authorization Header into WebView on Mobile
Posted by bilbosax <wa...@comcast.net>.
Erik, thank you for spending the time to write me such a nice example. You
are always full of great ideas! I think with all that has been suggested to
me on this post, I should be able to find a suitable solution.
Thanks again!
--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Re: Inject Authorization Header into WebView on Mobile
Posted by Erik Thomas <er...@icloud.com>.
Oh, I realize there are a few errors in the code sample, I wrote it quickly and it's just a quick and dirty example of using HTTPService which makes setting request headers simple.
Obviously the result() function doesn't return a String. Just figure out how to use the result as input to your RichWebView instance.
So, no need folks to show me my coding errors. LOL.
Cheers,
Erik
On Sep 24, 2018, at 9:02 AM, Erik Thomas <er...@icloud.com> wrote:
Hey Bill:
I just verified on the myflashlabs.com <http://myflashlabs.com/> documents for RichWebView that you can load an HTML String directly into the WebView instance:
https://www.myflashlabs.com/product/rich-webview-ane-adobe-air-native-extension/ <https://www.myflashlabs.com/product/rich-webview-ane-adobe-air-native-extension/>
Therefore you do not need to host a public web page at all. We can simplify this a lot.
1. Create a PHP endpoint (I call these REST APIs) accessible through SSL (if you want to be more secure--but you can do that later) with a function that handles the incoming HTTP request. I don't use PHP so can't provide any samples, but you should be able to find lots of help on the web.
2. In your mobile app, use HTTPService to hit the PHP endpoint (sample below), passing an auth token you got back on initial login as a header, and pass a page id as a query param, a header, or path variable, your choice (I add it to a header in the example). This is just one approach, there are more.
3. In the PHP function handler, authenticate the HTTP request's auth token, and use the page id to return the appropriate web page. Remember, web servers in the classic sense simply return HTML as a stream of bytes. For example, you could just return this in the HTTP response payload: <p>Hello world</p> and you can simply assign that to the RichWebView's instance.
If you use SSL, and you authenticate a valid auth token, then you are pretty secure and at no time do you expose the page to the public. However, know that there are many sophisticated ways hackers can still get at your info, like setting up a proxy with root authority certificate (man-in-the-middle) on un-secure WiFi at Starbucks. But unless your web page is a high value target, it's unlikely. Just beware.
You can dynamically generate the HTML or read it from disk (non-public location) or process it as a template, and then return it in the HTTP response. Then assign the HTML content to your RichWebView instance.
Here is an HTTPService code sample:
import mx.rpc.http.HTTPService;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
private var _httpService:HTTPService;
private var _authToken:String; // set after logging in with a different function
private function getMyPage(pageId:String):void {
_httpService = new HTTPService();
_httpService.url = "https://yourapp.com/getdoc";
_httpService.headers = {
"Accept": "text/html",
"Authentication": _authToken,
"pageId": pageId
}
_httpService.resultFormat = "text";
_httpService.addEventListener(FaultEvent.FAULT, fault);
_httpService.addEventListener(ResultEvent.RESULT, result);
_httpService.send();
}
private function result(event:ResultEvent):String {
if (event.statusCode == 200 && event.result is String) {
// assign this String to your RichWebView instance
return event.result as String;
} else {
// error
}
}
private function fault(event:FaultEvent):void {
// error
}
Re: Inject Authorization Header into WebView on Mobile
Posted by Erik Thomas <er...@icloud.com>.
Hey Bill:
I just verified on the myflashlabs.com <http://myflashlabs.com/> documents for RichWebView that you can load an HTML String directly into the WebView instance:
https://www.myflashlabs.com/product/rich-webview-ane-adobe-air-native-extension/ <https://www.myflashlabs.com/product/rich-webview-ane-adobe-air-native-extension/>
Therefore you do not need to host a public web page at all. We can simplify this a lot.
1. Create a PHP endpoint (I call these REST APIs) accessible through SSL (if you want to be more secure--but you can do that later) with a function that handles the incoming HTTP request. I don't use PHP so can't provide any samples, but you should be able to find lots of help on the web.
2. In your mobile app, use HTTPService to hit the PHP endpoint (sample below), passing an auth token you got back on initial login as a header, and pass a page id as a query param, a header, or path variable, your choice (I add it to a header in the example). This is just one approach, there are more.
3. In the PHP function handler, authenticate the HTTP request's auth token, and use the page id to return the appropriate web page. Remember, web servers in the classic sense simply return HTML as a stream of bytes. For example, you could just return this in the HTTP response payload: <p>Hello world</p> and you can simply assign that to the RichWebView's instance.
If you use SSL, and you authenticate a valid auth token, then you are pretty secure and at no time do you expose the page to the public. However, know that there are many sophisticated ways hackers can still get at your info, like setting up a proxy with root authority certificate (man-in-the-middle) on un-secure WiFi at Starbucks. But unless your web page is a high value target, it's unlikely. Just beware.
You can dynamically generate the HTML or read it from disk (non-public location) or process it as a template, and then return it in the HTTP response. Then assign the HTML content to your RichWebView instance.
Here is an HTTPService code sample:
import mx.rpc.http.HTTPService;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
private var _httpService:HTTPService;
private var _authToken:String; // set after logging in with a different function
private function getMyPage(pageId:String):void {
_httpService = new HTTPService();
_httpService.url = "https://yourapp.com/getdoc";
_httpService.headers = {
"Accept": "text/html",
"Authentication": _authToken,
"pageId": pageId
}
_httpService.resultFormat = "text";
_httpService.addEventListener(FaultEvent.FAULT, fault);
_httpService.addEventListener(ResultEvent.RESULT, result);
_httpService.send();
}
private function result(event:ResultEvent):String {
if (event.statusCode == 200 && event.result is String) {
// assign this String to your RichWebView instance
return event.result as String;
} else {
// error
}
}
private function fault(event:FaultEvent):void {
// error
}
Re: Inject Authorization Header into WebView on Mobile
Posted by bilbosax <wa...@comcast.net>.
Sorry Javier, I did not mean to suggest that you cannot pass parameters in
HTTP, but the format that you suggested http://user:password@url has been
deprecated, because that was the first approach I took. Google Chrome was
the first to deprecate it. Web programming is definitely not my strong suit,
but I don't know how to compare regular HTTP parameters to the values stored
in htpassword and htaccess to do Basic Authorization, and was told in
another forum that I needed to pass those values in a header to do it
properly. That is how this whole line of inquiry came about in trying to
figure out how to pass an authorization header in a StageWebView scenario.
--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Re: Inject Authorization Header into WebView on Mobile
Posted by Javier Guerrero García <ja...@gmail.com>.
Are you REALLY sure that GET/POST parameters in HTTP calls are deprecated?
Wow, the guys at Google might be really pissed of trying to receive their
query strings... The Internet is really going down the hole indeed...
App request:
http://www.bilbo.com/yourtopsecretservice.php?login=john&password=doe
Server: yourtopsecretservice.php (untested, but I'm pretty sure it will
work if you just copy and paste those two lines)
<?php
if ($_GET['login']=='john' && $_GET['password']=='doe') echo "My top secret
response for John Doe's eyes only: hello world!.";
else exit('Auth error'); // and a 404 header would also be nice here
?>
On Tue, Sep 25, 2018 at 1:13 AM bilbosax <wa...@comcast.net> wrote:
> @Javier, this method of sending the username and password has been
> deprecated
> by most modern browsers, and if not, throws up a big warning pop up.
>
>
>
> --
> Sent from: http://apache-flex-users.2333346.n4.nabble.com/
>
Re: Inject Authorization Header into WebView on Mobile
Posted by bilbosax <wa...@comcast.net>.
@Javier, this method of sending the username and password has been deprecated
by most modern browsers, and if not, throws up a big warning pop up.
--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Re: Inject Authorization Header into WebView on Mobile
Posted by Javier Guerrero García <ja...@gmail.com>.
Erm.... I might be missing something terribly, but... if we're talking
about basic auth, and if you consider it "secure" (visit your nearest
shrink), why don't you use the good old classic http://login:pass@url
scheme? (or just pass the login and pass in two parameters to the PHP, so
it can check if those creds authenticate or not)
On Mon, Sep 24, 2018 at 12:12 PM Olaf Krueger <ma...@olafkrueger.net> wrote:
> This is probably what you need:
>
> https://en.wikipedia.org/wiki/XMLHttpRequest#The_setRequestHeader_method
>
> Olaf
>
>
>
> --
> Sent from: http://apache-flex-users.2333346.n4.nabble.com/
>
Re: Inject Authorization Header into WebView on Mobile
Posted by Olaf Krueger <ma...@olafkrueger.net>.
This is probably what you need:
https://en.wikipedia.org/wiki/XMLHttpRequest#The_setRequestHeader_method
Olaf
--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Re: Inject Authorization Header into WebView on Mobile
Posted by bilbosax <wa...@comcast.net>.
Hmmmm...I'll have to look into this one a little bit. I have never read about
doing Basic Authorization with JavaScript, all of the examples I am aware of
use PHP because I think you need server side code to do the authorization,
but I'm sure there is more than one way to do it. I'll do a little research.
Thanks for the idea!
--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Re: Inject Authorization Header into WebView on Mobile
Posted by Olaf Krueger <ma...@olafkrueger.net>.
>I don't believe there is
>anyway to display what is returned in a mobile WebView like StageWebView.
Maybe there's a way to store the returned stuff as local HTML file and push
it to the ANE?
However, what's about preparing an HTML/JS file which requests the PHP file?
You could put this file on the server, load it by your WebView, pass the
credentials via AS3 and trigger the request... maybe ;-)
HTH,
Olaf
--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Re: Inject Authorization Header into WebView on Mobile
Posted by bilbosax <wa...@comcast.net>.
I appreciate the responses fellas. Olaf, sadly on mobile, even if you did
use HTTPLoader to upload an authorization header, I don't believe there is
anyway to display what is returned in a mobile WebView like StageWebView.
But I certainly appreciate the idea. The ANE that I purchased only seems to
load HTML from a given URL.
Erik, your idea sounds very intriguing to me, but I am so inexperienced in
PHP and web development that I am not sure that I completely understand, so
you may have to tell it to me like a child ;) Here is what I think that you
are telling me:
1. Use HTTPLoader to create an Authorization Header and access a PHP file
that I can use to make sure a user is authorized on my server, and in the
return response, send back a URL to the actual page that I want to view.
2. Use the returned URL to load the page into StageWebView.
Although this sounds like a fantastic idea to me on the surface, I don't
understand how it would be secure. The page I want to display in my mobile
app is what needs to be secure, but it also needs to be in a publicly
available folder so that my users can access it. But I don't want anybody
with a browser to be able to just browse to the public file and display its
contents. So basically, I have a public file that I want my mobile users to
be able to access, but I don't want anybody outside of the app to be able to
access it. Thus the idea for Basic Authentication.
My basic understanding of Apache is that my PHP file needs to be in a
publicly accessible folder to be served by Apache, so even if I did use
HTTPLoader to send a header to authenticate users and then return a URL to
load the content, that content would be sitting right there in a public
folder for anybody to browse to anyway. Unless of course, there is a way in
Apache to serve up content from a non-public folder that I am completely
unfamiliar with. I guess my question is, how do I hide the actual critical
page from the public and get a URL to its location?
I know I am missing something. I apologize for my inexperience in this
area.
--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Re: Inject Authorization Header into WebView on Mobile
Posted by Erik Thomas <er...@icloud.com>.
Hi Bill:
The way we do this for a Stage based PDF viewer (ANE) is to provide an API endpoint on our back-end server that requires the Authorization header and a resourceId. It then returns a temporary URL to the resource. So it's two steps:
1. Call the API with auth header and resourceId. Response contains temporary URL to the resource.
2. Pass the temporary URL to the show() or load() function on the StageWebView service.
However, if the resource request itself requires Basic authentication and it's not in your control (some other server), then this won't work and I'd recommend you ask the ANE authors if they could support Basic auth for resource URIs.
But if you host the resource yourself you can do whatever you want. For example, you can get even more secure and include a query parameter in the URL returned in the API call response that contains a hash of some kind that can be used to verify the request is from a valid source.
You can also expire the URL after some period of time to be even more secure, like in 10 seconds that URL no longer points to the resource.
I echo Olaf's wish for good luck.
Erik
Re: Inject Authorization Header into WebView on Mobile
Posted by Olaf Krueger <ma...@olafkrueger.net>.
Hi Bill,
Just to make sure I got it right:
Do you want to call a PHP page which renders some HTML which is sent back to
the client in order to display it in the browser?
And in order to access the PHP page, Basic Auth is needed?
If so, just some thoughts:
- In order to call the PHP page, you probably have to call an URL via HTTP.
- Because it's just an HTTP request you should be able to add a "Basic Auth
header" to this request
- You can build this header by yourself
- The key for the header is "Authorization"
- The value is just a string with the leading string "Basic", followed by
username and password: "Basic username:password"
- The important thing is that "username:password" has to be encoded as
base64!
- AS3 with e.g. HTTPService [1] as well as JS with XMLHttpRequest [2]
supported the sending of custom headers
I don't know anything about ANE's and I've no idea how do you pass the URL
to the mentioned ANE or how do you let the ANE make the request.
But I've read that "Full communication between Javascript and Actionscript"
is supported by this Rich Webview.
So, I guess it should be possible to construct anything that is needed on
AS3 side and pass it to the JS side and let the JS side make the request.
Another way could be to make the HTTP call on AS3 side in order to fetch the
generated HTML and pass it to the ANE, not sure.
Please notice that I am not so experienced with this ANE/WebView stuff...so
HTH!
Good luck!
Olaf
[1]
https://help.adobe.com/de_DE/FlashPlatform/reference/actionscript/3/mx/rpc/http/HTTPService.html
[2] https://developer.mozilla.org/de/docs/Web/API/XMLHttpRequest
--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/