Add withCredentials option for asset loading (#8983)

Co-authored-by: Martin Valigursky <mvaligursky@snapchat.com>

Author: mvaligursky

src/framework/app-base.js

@@ -809,6 +809,11 @@ class AppBase extends EventHandler {
             this.loader.maxConcurrentRequests = props.maxConcurrentRequests;
         }
 
+        // send asset requests with credentials - applied before preloading so preloaded assets pick it up
+        if (typeof props.withCredentials === 'boolean') {
+            this.loader.withCredentials = props.withCredentials;
+        }
+
         // TODO: remove this temporary block after migrating properties
         if (!props.useDevicePixelRatio) {
             props.useDevicePixelRatio = props.use_device_pixel_ratio;

src/framework/handlers/loader.js

@@ -388,6 +388,36 @@ class ResourceLoader {
         return http.maxConcurrentRequests;
     }
 
+    /**
+     * Sets whether asset requests are sent with credentials. When true, cross-origin requests
+     * include credentials (cookies, client TLS certificates and HTTP authentication), allowing
+     * assets to be loaded from an authenticated cross-origin host. The server must respond with a
+     * non-wildcard `Access-Control-Allow-Origin` and `Access-Control-Allow-Credentials: true`.
+     * Defaults to false.
+     *
+     * Set this before assets start loading (i.e. before {@link AppBase#preload} or
+     * {@link AssetRegistry#load}). Note this is a process-global setting (it applies to the shared
+     * HTTP layer), so with multiple applications the last value set wins. It applies to all
+     * XHR-based requests, which covers the large majority of asset loads.
+     *
+     * @type {boolean}
+     * @example
+     * // load all assets from an authenticated cross-origin host
+     * app.loader.withCredentials = true;
+     */
+    set withCredentials(value) {
+        http.withCredentials = !!value;
+    }
+
+    /**
+     * Gets whether asset requests are sent with credentials.
+     *
+     * @type {boolean}
+     */
+    get withCredentials() {
+        return http.withCredentials;
+    }
+
     /**
      * Destroys the resource loader.
      */

src/framework/parsers/texture/img.js

@@ -86,7 +86,11 @@ class ImgParser extends TextureParser {
 
     _loadImage(url, originalUrl, crossOrigin, callback, asset) {
         const image = new Image();
-        if (crossOrigin) {
+        if (http.withCredentials) {
+            // an <img> element cannot use the XHR `withCredentials` flag, so 'use-credentials' is
+            // the equivalent way to send credentials with a cross-origin image request
+            image.crossOrigin = 'use-credentials';
+        } else if (crossOrigin) {
             image.crossOrigin = crossOrigin;
         }
 

src/platform/net/http.js

@@ -68,6 +68,21 @@ class Http {
 
     static retryDelay = 100;
 
+    /**
+     * The default `withCredentials` value used by requests that don't specify it explicitly in
+     * their options. When true, cross-origin requests are sent with credentials (cookies, client
+     * TLS certificates and HTTP authentication). Individual requests can still override this via
+     * `options.withCredentials`. Defaults to false.
+     *
+     * This is a process-global default on the shared {@link http} instance and applies to all
+     * XHR-based requests (most asset loads). Prefer setting it via
+     * {@link ResourceLoader#withCredentials}.
+     *
+     * @type {boolean}
+     * @ignore
+     */
+    withCredentials = false;
+
     /**
      * The configured concurrency limit. See {@link Http#maxConcurrentRequests}.
      *
@@ -456,7 +471,7 @@ class Http {
 
         const xhr = new XMLHttpRequest();
         xhr.open(method, url, options.async);
-        xhr.withCredentials = options.withCredentials !== undefined ? options.withCredentials : false;
+        xhr.withCredentials = options.withCredentials !== undefined ? options.withCredentials : this.withCredentials;
         xhr.responseType = options.responseType || this._guessResponseType(url);
 
         // Set the http headers