Provide add-in config to allow for additional host origins

.eslintrc.json

@@ -10,6 +10,7 @@
   "plugins": ["@typescript-eslint"],
   "rules": {
     "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-var-requires": "off"
   }
 }

CHANGELOG.md

@@ -1,3 +1,6 @@
+# 1.3.0 (2024-06-18)
+- Added `AddinClientConfig` interface to allow additional host origins to be supplied by an `AddinClient`.
+
 # 1.2.2 (2024-04-25)
 - Updated `allowedOrigins` to support Good Move and fix EMC portal issues
 

README.md

@@ -69,6 +69,24 @@ var client = new AddinClient({
 });
 ```
 
+You can also allow additional origins where your add-in client may run within a Blackbaud host page. Additional origins are supplied as regular expression patterns. The `AddinClient` already allows several Blackbaud host origins by default. If you find a need to extend the defaults, you may do so by populating the `AddinClientConfig`'s `allowedOrigins` property.
+
+```js
+var client = new AddinClient({
+  callbacks: {
+    init: (args) => {
+      args.ready({
+        showUI: true,
+        title: 'My Custom Tile Title'
+      });
+    }
+  },
+  allowedOrigins: [
+    /^https\:\/\/[\w\-\.]+\.additionalblackbauddomain\.com$/,
+  ]
+});
+```
+
 #### Tile add-ins
 For tile add-ins, the URL for the add-in will be rendered in a visible iframe on the page, where you can render any custom content.  The iframe will initially be hidden until an initialize protocol is completed between the host and the add-in.
 

package.json

@@ -1,12 +1,12 @@
 {
   "name": "@blackbaud/sky-addin-client",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "SKY add-in client",
   "main": "dist/bundles/sky-addin-client.umd.js",
   "module": "index.ts",
   "scripts": {
     "ci": "npm run test:ci && npm run build",
-    "test": "npm run lint && npm run test:unit",
+    "test": "npm run lint && npm run test:unit:ci",
     "test:ci": "npm run test:unit:ci",
     "test:unit": "npm run test:unit:base -- config/karma/local.karma.conf.js",
     "test:unit:ci": "npm run test:unit:base -- config/karma/ci.karma.conf.js",

src/addin/addin-client.spec.ts

@@ -71,6 +71,54 @@ describe('AddinClient ', () => {
 
     });
 
+    it ('should initialize AddinClient with default allowedOrigins collection', () => {
+      const client = new AddinClient({
+        callbacks: {
+          init: () => { return; }
+        }
+      });
+      client.destroy();
+
+      expect((<any>client).allowedOrigins.length).toBe(81);
+    });
+
+    it ('should initialize AddinClient with additional allowedOrigins', () => {
+      const client = new AddinClient({
+        callbacks: {
+          init: () => { return; }
+        },
+        config: {
+          allowedOrigins: [
+            /^https\:\/\/[\w\-\.]+\.additionaldomain1\.com$/,
+            /^https\:\/\/[\w\-\.]+\.additionaldomain2\.com$/,
+            /^https\:\/\/[\w\-\.]+\.additionaldomain3\.com$/
+          ]
+        }
+      });
+      client.destroy();
+
+      expect((<any>client).allowedOrigins.length).toBe(84);
+    });
+
+    it ('additional allowedOrigins - removing duplicates', () => {
+      const client = new AddinClient({
+        callbacks: {
+          init: () => { return; }
+        },
+        config: {
+          allowedOrigins: [
+            /^https\:\/\/[\w\-\.]+\.additionaldomain1\.com$/,
+            /^https\:\/\/[\w\-\.]+\.blackbaud\.com$/,
+            /^https\:\/\/[\w\-\.]+\.blackbaud\-dev\.com$/,
+            /^http\:\/\/[\w\-\.]+\.blackbaud\-dev\.com$/,
+          ]
+        }
+      });
+      client.destroy();
+
+      expect((<any>client).allowedOrigins.length).toBe(82);
+    });
+
   });
 
   describe('getAuthToken', () => {
@@ -253,7 +301,7 @@ describe('AddinClient ', () => {
           const client = new AddinClient({
             callbacks: {
               init: () => { return; },
-              updateContext: (contextId) => { contextUpdated = true; }
+              updateContext: () => { contextUpdated = true; }
             }
           });
 
@@ -1221,7 +1269,7 @@ describe('AddinClient ', () => {
 
     it('should add a callback function for the provided event type.',
       () => {
-        const callback: AddinEventCallback = (context: any) => {
+        const callback: AddinEventCallback = () => {
           return;
         };
 

src/addin/addin-client.ts

@@ -1,5 +1,6 @@
 import { AddinClientArgs } from './client-interfaces/addin-client-args';
 import { AddinClientCloseModalArgs } from './client-interfaces/addin-client-close-modal-args';
+import { AddinClientConfig } from './client-interfaces/addin-client-config';
 import { AddinClientEventArgs } from './client-interfaces/addin-client-event-args';
 import { AddinClientNavigateArgs } from './client-interfaces/addin-client-navigate-args';
 import { AddinClientOpenHelpArgs } from './client-interfaces/addin-client-open-help-args';
@@ -15,8 +16,8 @@ import { AddinHostMessage } from './host-interfaces/addin-host-message';
 import { AddinHostMessageEventData } from './host-interfaces/addin-host-message-event-data';
 
 /**
- * Collection of regexs for our whitelist of host origins.
- */
+  * Collection of regexs for our whitelist of host origins.
+  */
 const allowedOrigins = [
   /^https\:\/\/[\w\-\.]+\.blackbaud\.com$/,
   /^https\:\/\/[\w\-\.]+\.blackbaud\-dev\.com$/,
@@ -202,6 +203,11 @@ export class AddinClient {
    */
   private supportedEventTypes: string[] = [];
 
+  /**
+   * Collection of regexs for our whitelist of host origins.
+   */
+  private allowedOrigins: RegExp[] = allowedOrigins;
+
   /* istanbul ignore next */
   /**
    * @returns {string}  Returns the current query string path for the window, prefixed with ?.
@@ -211,6 +217,8 @@ export class AddinClient {
   }
 
   constructor(private args: AddinClientArgs) {
+    this.initConfig(args.config);
+
     this.windowMessageHandler = (event) => {
       this.handleMessage(event);
     };
@@ -476,6 +484,20 @@ export class AddinClient {
     });
   }
 
+  private initConfig(config: AddinClientConfig) {
+    if (config?.allowedOrigins?.length > 0) {
+      // append custom allowed origins
+      this.allowedOrigins = this.allowedOrigins.concat(config.allowedOrigins);
+      // remove duplicates
+      this.allowedOrigins = this.allowedOrigins.reduce((acc: RegExp[], curr: RegExp) => {
+          if (!acc.find((a) => a.source === curr.source)) {
+              acc.push(curr);
+          }
+          return acc;
+      }, []);
+    }
+  }
+
   /**
    * Post a message to the host page informing it that the add-in is
    * now started and listening for messages from the host.
@@ -649,7 +671,7 @@ export class AddinClient {
    * @param hostOrigin
    */
   private setKnownAllowedHostOrigin(hostOrigin: string) {
-    for (const allowedOrigin of allowedOrigins) {
+    for (const allowedOrigin of this.allowedOrigins) {
       if (allowedOrigin.test(hostOrigin)) {
         this.trustedOrigin = hostOrigin;
         return;

src/addin/client-interfaces/addin-client-args.ts

@@ -1,4 +1,5 @@
 import { AddinClientCallbacks } from './addin-client-callbacks';
+import { AddinClientConfig } from './addin-client-config';
 
 /**
  * Interface for constructing an AddinClient.
@@ -10,4 +11,8 @@ export interface AddinClientArgs {
    */
   callbacks: AddinClientCallbacks;
 
+  /**
+   * Optional configuration for an AddinClient.
+   */
+  config?: AddinClientConfig;
 }

src/addin/client-interfaces/addin-client-config.ts

@@ -0,0 +1,10 @@
+
+/**
+ * Configuration properties for an AddinClient.
+ */
+export interface AddinClientConfig {
+ /**
+   * Optional list of allowed origins, as RegExp, to trust as add-in hosts for this add-in client.
+   */
+  allowedOrigins?: RegExp[];
+}

src/addin/client-interfaces/index.ts

@@ -3,6 +3,7 @@ export * from './addin-button-style';
 export * from './addin-client-args';
 export * from './addin-client-callbacks';
 export * from './addin-client-close-modal-args';
+export * from './addin-client-config';
 export * from './addin-client-event-args';
 export * from './addin-client-flyout-permalink';
 export * from './addin-client-init-args';