Add Authorization header to WebView HTTP requests

In my app, users are authenticated using OAuth. When making HTTP calls from code, I can set the Authorization header and it all works great.

But the app also needs to access images and audio resources (e.g. with img and audio HTML tags) that require authentication.

How can I add the Authorization header to calls that are made by the webview?

1 Like

Interesting problem.

If you don’t get a better answer, a hackish workaround: Request the pictures from your own server and add the header values as a query string, your server then does the actual requests for the assets and returns them to your app.

A clever workaround!

In this case, it would mean introducing a new web service to do the ‘proxying’, so hopefully someone will have an idea how to otherwise resolve it.

I would have thought it was a fairly common requirement :frowning:

Might be - I just don’t know anything about it :wink:

Another possible workaround: Don’t just set the src of an image to the URL, use Angular’s http to get the asset and save it locally, then set the src to the local URL. Or even creata a data string and set that on the tag.

Yeah, we actually came up with these same workarounds in the meantime!

  1. This is probably more work than introducing a simple ‘proxying’ web service, and means we have to take care of cleaning up saved files

  2. Different browsers set different maximum size limits for data URIs, and we woud be very likely to hit that limit

Yep, that’s why having a simple PHP file on a server somewhere is the easier workaround. (Basically 10 lines of code…)