Trying to access authenticated GeoServer layer with WebMapServiceImageryProvider, getting 403 error codes

CesiumJS
1

Hello, we are currently trying to use an authenticated GeoServer WMS service with our CesiumJS application, but we are running into problems with authentication. When I run the following code, which is written as part of a ReactJS project that uses the Resium wrapper for some CesiumJS components, it doesn’t seem to function as we expect it to:

<ImageryLayer imageryProvider={new WebMapServiceImageryProvider({
  url : new Resource({
    url: geoserver_url,
    headers: {
      'Authorization': `Basic ${btoa("username:password")}`,
      'Access-Control-Allow-Origin': 'http://localhost:3000',
    }
  }),
  layers : layer_name,
  parameters : {
    transparent : 'true',
    format : 'image/png'
  }
})} />

Objects like “Resource” and “WebMapServiceImageryProvider” are loaded from the Cesium library in ReactJS.

Ideally, we should be able to use a basic authorization header to make a request to GeoServer so that we can restrict who can access the layers. We have installed the GeoFence internal server extension for authorization management in GeoServer. The current policy for the application user is as follows:

Role: *
User: username
Service: WMS
Request: *
Workspace: appworkspace
Layer: *
IP Address Range: n/a
Access: ALLOW

The expected behaviour is that we get tiles back from GeoServer to use in the ImageryLayer object. Instead, we get 403 errors because something is wrong with the auth headers. CORS is enabled on GeoServer, and we are currently running GeoServer with Tomcat if those details are helpful. It works with requests that don’t require authentication, but fail for authenticated ones. Are we setting up the headers incorrectly? Is there something else that we have to enable in GeoServer in order to get this to function correctly? Are there alternatives to GeoServer + GeoFence to setting up authentication for accessing WMS layers in GeoServer that has been proven to work with CesiumJS consistently? I’m open to suggestions for best practices with regards to this, and can provide more details about the application with regards to this feature in particular if necessary.

Thanks in advance,
Ryan Spies