How can you use authentication with CORS imagery requests?

CesiumJS
1

I am using an older version of Cesium with an imagery service that requires authentication. Is there a newer version of Cesium that works with authentication?

If not, are there any suggestions on the best approach to implement this?

I imagine loadImage would have to be modified as well as some other functions.

    var loadImage = function(url, allowCrossOrigin) {

authentication with CORS:

2

You shouldn’t have to modify any code but It really depends on the type of authentication and server you are using. Can you provide some additional details about what you are doing?

3

The server uses certificate authentication and requires cookies to be passed with each request. By default XMLHttpRequest using CORS do not send cookie information with requests. You have to enable credentials to pass cookies in the header.

Here is an example using XMLHttpRequest from the CORS page provided earlier. By enabling "withCredentials" the request passes the cookies in the header. I think the image object works the same way. The crossorigin attribute must be set to "use-credentials" instead of the default value "anonymous (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img)

//Example XMLHttpRequest with credentials
var invocation = new XMLHttpRequest();
var url = ‘http://bar.other/resources/credentialed-content/’;
    
function callOtherDomain(){
  if(invocation) {
    invocation.open(‘GET’, url, true);

invocation.withCredentials = true;

    invocation.onreadystatechange = handler;
    invocation.send();
  }
}
//end example

I think loadWithXhr.load needs to be changed but loadImage may need changes as well. Do you agree? I would imagine making the "useCredentials" a property of the ImageryProviders and then passing it down with each tile request. What do you think?

    loadWithXhr.load = function(url, responseType, method, data, headers, deferred, overrideMimeType) {
        var dataUriRegexResult = dataUriRegex.exec(url);
        if (dataUriRegexResult !== null) {
            deferred.resolve(decodeDataUri(dataUriRegexResult, responseType));
            return;
        }

        var xhr = new XMLHttpRequest();

        if (defined(overrideMimeType)) {
            xhr.overrideMimeType(overrideMimeType);
        }
//NEW CODE
xhr.withCredentials = true;
//NEW CODE

Thanks!

4

I know it’s been a minute since this was posted but, I’m running up against the same issue right now. I’m trying to integrate NGA imagery into our application and I authenticate with a CAC. Once I’ve done that, it adds a cookie that is then distributed with the requests if I add withCredentials to an axios request. However, I haven’t been able to get Cesium to do it so far.

Looking at Resource, it appears that Cesium will add withCredentials if the site is in TrustedServers. I’ve never used TrustedServers beforee. I attempted to add the host that it’s sending to to that list and it doesn’t seem to be getting added.

Any ideas of something else I could try?

5

Nevermind. Had a moment of clarity. I was adding the host to TrustedServers with port 80, not thinking about the fact that it was https. Changed the port to 443 and it’s seemingly working now.