I am trying to use OpenLayers 2.12 to display WMS layers from a server which has HTTP Basic Authentication enabled.

I have tried to handle the authentication by putting the username and password in the URL parameter in my JavaScript code. Example layer creation:

myLayer = new OpenLayers.Layer.WMS('background',
            layers: 'background',
            bbox: '-380188,6249943,1347312,8226943'
            displayInLayerSwitcher: true,
            isBaseLayer: false,
            projection: 'EPSG:3067',
            visibility: true

Of course this is not secure since the credentials are stored in JavaScript code and does not work in all browsers. Internet Explorer 8 gives security error pointing to OpenLayers.js and refuses to display the map at all. Firefox 13 pops up some authentication dialogs which I can cancel(the map displays correctly after that). In Chrome 23 the authentication seems to work flawlessly.

Can you confirm that it is not possible to handle the HTTP basic authentication in a cross-browser manner by encoding it in the URL and giving it to OpenLayers like in the example?

Can you suggest alternative ways to handle the HTTP basic authentication so that it works transparently to the user (no authentication popups displayed)? Perhaps use some kind of proxy server to work around this.

  • 2
    You can use a Proxy - docs.openlayers.org/library/request.html proxy example > collab.itc.virginia.edu/wiki/toolbox/… – Mapperz Nov 19 '12 at 14:21
  • As far as I know, the only way of handling authentication in OpenLayers is using the function OpenLayers.Request.issue() (goo.gl/OKtGj), which does not suit your needs. – dariapra Nov 19 '12 at 15:29
  • iluwatar>Did you ever got past the issue that FireFox shows a login authentication? As you write, you just can press cancel on the popup, but it's disturbing and confusing for the end user with the authentication popup. – Mike001 Feb 19 '13 at 15:28

The solution we ended up with was to add an authenticating proxy server between the OpenLayers client and the backend WMS service. So instead of connecting directly to the WMS service the OpenLayers client connects to a proxy server which adds the required authentication headers to the requests.

Example code for creating the layers:

var layer = new OpenLayers.Layer.WMS( "background", "http://myproxyaddress.com/23ergwe435dw3463", {layers: 'basic'} );

Example Apache proxy configuration:

ProxyRequests     Off
ProxyPreserveHost On
SSLProxyEngine On
<Proxy *>
    Order deny,allow
    Allow from all
SetEnvIf Request_URI "23ergwe435dw3463" wms_provider_name
RequestHeader set Authorization: "Basic Xk12BLdVNzUo5UGl0po5Y" env=wms_provider_name
ProxyPass         /23ergwe435dw3463  https://wmsprovideraddress.com
ProxyPassReverse  /23ergwe435dw3463  https://wmsprovideraddress.com

You can have multiple proxy configurations using this style.

What you should put inside the Authorization quotes is just the base-64 encoding of the string "username:password" (without the quotes). For more information see this link: https://stackoverflow.com/questions/567814/apache2-reverse-proxy-to-an-end-point-that-requires-basicauth-but-want-to-hide-t

| improve this answer | |

You can send a fake ajax request before adding the layer to the map. The browser will handle the basic authentication for you:

// Assuming myLayer **WITHOUT** user:pass in the url
    url: myLayer.url,
    data: myLayer.params,
    method: 'GET',
    error: function(jqXHR, textStatus, errorThrown){
        // Handle not authoruzed here
    success: function(){
        // Yuppieeeeee!
        map.addLayer(myLayer);    // The browser wil set up the 
                                  // authentication in the request for you


This will work only if the server returns a 401 - auth required header (in geoserver you have to set the security policy to challenge or mixed)

| improve this answer | |
  • The ajax call id done using jQuery... – Tommaso Dec 8 '12 at 10:49
  • I would love to know where exactly i need to place that. In my project I am using GeoExt2, ExtJS 4.2 and OpenLayers 2.12. – g07kore Jun 3 '15 at 14:59
  • I think this could work in my case. But do you have any suggestions how I can send a fake request? Atm I use a href with the link to the request to trigger the login popup, but i dont want to navigate to the link. – geogrow Aug 22 '16 at 13:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.