altair-static 8.2.7 → 8.2.8

package/build/index.d.ts

@@ -108,66 +108,113 @@ export interface IInitialEnvironments {
 	subEnvironments?: InitialEnvironmentState[];
 }
 export interface ITheme {
+	/** CSS transition easing function for smooth animations */
 	easing: string;
 	colors: {
+		/** Black color used for high contrast elements */
 		black: string;
+		/** Dark gray color for muted text and secondary elements */
 		darkGray: string;
+		/** Medium gray color for neutral backgrounds and borders */
 		gray: string;
+		/** Light gray color for subtle backgrounds and dividers */
 		lightGray: string;
+		/** White color for light backgrounds and text */
 		white: string;
+		/** Green color typically used for success states and positive actions */
 		green: string;
+		/** Blue color for informational elements and links */
 		blue: string;
+		/** Rose/pink color for accent elements and highlights */
 		rose: string;
+		/** Bright magenta/cerise color for special emphasis */
 		cerise: string;
+		/** Red color for error states and destructive actions */
 		red: string;
+		/** Orange color for warning states and secondary actions */
 		orange: string;
+		/** Yellow color for caution states and highlights */
 		yellow: string;
+		/** Light red/salmon color for subtle error indicators */
 		lightRed: string;
+		/** Dark purple color for premium features or special elements */
 		darkPurple: string;
+		/** Primary brand color used for main interactive elements */
 		primary: string;
+		/** Secondary brand color used for supporting interactive elements */
 		secondary: string;
+		/** Tertiary brand color used for accent and decorative elements */
 		tertiary: string;
+		/** Main background color for the application */
 		bg: string;
+		/** Alternative background color for cards, panels, and sections */
 		offBg: string;
+		/** Primary text color for readable content */
 		font: string;
+		/** Secondary text color for less emphasized content */
 		offFont: string;
+		/** Primary border color for main UI elements */
 		border: string;
+		/** Secondary border color for subtle divisions */
 		offBorder: string;
+		/** Background color specifically for the header section */
 		headerBg: string;
 	};
 	type: {
 		fontSize: {
+			/** Base font size in pixels used for calculations */
 			base: number;
+			/** Root em base size in pixels for responsive typography */
 			remBase: number;
+			/** Standard body text font size */
 			body: number;
+			/** Smaller body text font size for secondary content */
 			bodySmaller: number;
 		};
 		fontFamily: {
+			/** Default system font stack for UI elements */
 			default: string;
 		};
 	};
+	/** Whether this theme follows system preferences (light/dark mode) */
 	isSystem: boolean;
 	shadow: {
+		/** Color used for drop shadows and elevation effects */
 		color: string;
+		/** Opacity level for shadow effects (0.0 to 1.0) */
 		opacity: number;
 	};
 	editor: {
 		fontFamily: {
+			/** Font family specifically for code editor and monospace content */
 			default: string;
 		};
+		/** Font size for code editor text */
 		fontSize: number;
 		colors: {
+			/** Color for code comments and documentation */
 			comment: string;
+			/** Color for string literals in code */
 			string: string;
+			/** Color for numeric literals in code */
 			number: string;
+			/** Color for variable names and identifiers */
 			variable: string;
+			/** Color for programming language keywords */
 			keyword: string;
+			/** Color for atomic values like boolean literals */
 			atom: string;
+			/** Color for HTML/XML/GraphQL attributes */
 			attribute: string;
+			/** Color for properties */
 			property: string;
+			/** Color for punctuation marks like brackets and commas */
 			punctuation: string;
+			/** Color for function, class, type definitions */
 			definition: string;
+			/** Color for built-in functions and types */
 			builtin: string;
+			/** Color for the text cursor in the editor */
 			cursor: string;
 		};
 	};
@@ -219,6 +266,7 @@ declare class AltairConfig {
 	themes: string[];
 	isTranslateMode: any;
 	isWebApp: any;
+	cspNonce: string;
 	initialData: {
 		url: string;
 		subscriptionsEndpoint: string;
@@ -242,7 +290,7 @@ declare class AltairConfig {
 		disableAccount: boolean;
 		initialAuthorization: AltairConfigOptions["initialAuthorization"];
 	};
-	constructor({ endpointURL, subscriptionsEndpoint, subscriptionsProtocol, initialQuery, initialHeaders, initialEnvironments, initialVariables, initialPreRequestScript, initialPostRequestScript, instanceStorageNamespace, initialSettings, persistedSettings, initialRequestHandlerId, initialRequestHandlerAdditionalParams, initialSubscriptionRequestHandlerId, initialSubscriptionsPayload, initialHttpMethod, preserveState, initialWindows, disableAccount, initialAuthorization, }?: AltairConfigOptions);
+	constructor({ endpointURL, subscriptionsEndpoint, subscriptionsProtocol, initialQuery, initialHeaders, initialEnvironments, initialVariables, initialPreRequestScript, initialPostRequestScript, instanceStorageNamespace, initialSettings, persistedSettings, initialRequestHandlerId, initialRequestHandlerAdditionalParams, initialSubscriptionRequestHandlerId, initialSubscriptionsPayload, initialHttpMethod, preserveState, initialWindows, disableAccount, initialAuthorization, cspNonce, }?: AltairConfigOptions);
 	private getPossibleLocalSandBoxUrl;
 	private getLocalSandBoxUrl;
 	getUrlConfig(environment?: ConfigEnvironment): UrlConfig;
@@ -525,6 +573,10 @@ export interface AltairConfigOptions extends AltairWindowOptions {
 	 * Disable the account and remote syncing functionality
 	 */
 	disableAccount?: boolean;
+	/**
+	 * CSP nonce value to be used in Altair
+	 */
+	cspNonce?: string;
 }
 /**
  * Returns the path to Altair assets, for resolving the assets when rendering Altair
@@ -558,6 +610,7 @@ export declare const renderInitSnippet: (options?: RenderOptions) => string;
  * @param renderOptions
  */
 export declare const renderAltair: (options?: RenderOptions) => string;
+export declare const isSandboxFrame: (path: string) => boolean;
 
 export {
 	renderAltair as default,

package/build/index.js

@@ -23,6 +23,7 @@ __export(src_exports, {
   default: () => src_default,
   getAltairHtml: () => getAltairHtml,
   getDistDirectory: () => getDistDirectory,
+  isSandboxFrame: () => isSandboxFrame,
   renderAltair: () => renderAltair,
   renderInitSnippet: () => renderInitSnippet,
   renderInitialOptions: () => renderInitialOptions
@@ -65,7 +66,8 @@ var optionsProperties = {
   disableAccount: void 0,
   persistedSettings: void 0,
   initialName: void 0,
-  initialAuthorization: void 0
+  initialAuthorization: void 0,
+  cspNonce: void 0
 };
 var allowedProperties = Object.keys(
   optionsProperties
@@ -91,18 +93,29 @@ var renderInitSnippet = (options = {}) => {
     `;
 };
 var renderAltair = (options = {}) => {
+  var _a, _b;
   const altairHtml = getAltairHtml();
   const initialOptions = renderInitSnippet(options);
   const baseURL = options.baseURL || "./";
   if (options.serveInitialOptionsInSeperateRequest) {
-    const scriptName = typeof options.serveInitialOptionsInSeperateRequest === "string" ? options.serveInitialOptionsInSeperateRequest : "initial_options.js";
-    return altairHtml.replace(/<base.*>/, `<base href="${baseURL}">`).replace(
-      "</body>",
-      () => `<script src="${scriptName.replace(/["'<>=]/g, "")}"><\/script></body>`
-    );
-  } else {
-    return altairHtml.replace(/<base.*>/, `<base href="${baseURL}">`).replace("</body>", () => `<script>${initialOptions}<\/script></body>`);
+    if (!options.cspNonce) {
+      const scriptName = typeof options.serveInitialOptionsInSeperateRequest === "string" ? options.serveInitialOptionsInSeperateRequest : "initial_options.js";
+      return altairHtml.replace(/<base.*>/, `<base href="${baseURL}">`).replace("<style>", `<style nonce="${(_a = options.cspNonce) != null ? _a : ""}">`).replace(
+        "</body>",
+        () => {
+          var _a2;
+          return `<script nonce="${(_a2 = options.cspNonce) != null ? _a2 : ""}" src="${scriptName.replace(/["'<>=]/g, "")}"><\/script></body>`;
+        }
+      );
+    }
   }
+  return altairHtml.replace(/<base.*>/, `<base href="${baseURL}">`).replace("<style>", `<style nonce="${(_b = options.cspNonce) != null ? _b : ""}">`).replace(
+    "</body>",
+    () => {
+      var _a2;
+      return `<script nonce="${(_a2 = options.cspNonce) != null ? _a2 : ""}">${initialOptions}<\/script></body>`;
+    }
+  );
 };
 var getRenderedAltairOpts = (renderOptions) => {
   const optProps = Object.keys(renderOptions).filter(
@@ -110,11 +123,15 @@ var getRenderedAltairOpts = (renderOptions) => {
   ).map((key) => getObjectPropertyForOption(renderOptions[key], key));
   return ["{", ...optProps, "}"].join("\n");
 };
+var isSandboxFrame = (path) => {
+  return path.split("/").includes("iframe-sandbox");
+};
 var src_default = renderAltair;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   getAltairHtml,
   getDistDirectory,
+  isSandboxFrame,
   renderAltair,
   renderInitSnippet,
   renderInitialOptions

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "altair-static",
   "description": "Static package for altair graphql client",
-  "version": "8.2.7",
+  "version": "8.2.8",
   "author": "Samuel Imolorhe <altair@sirmuel.design> (https://sirmuel.design)",
   "bugs": "https://github.com/altair-graphql/altair/issues",
   "devDependencies": {
@@ -13,8 +13,8 @@
     "ncp": "2.0.0",
     "ts-jest": "29.0.5",
     "typescript": "^5.5.4",
-    "@altairgraphql/app": "8.2.7",
-    "altair-graphql-core": "8.2.7"
+    "@altairgraphql/app": "8.2.8",
+    "altair-graphql-core": "8.2.8"
   },
   "engines": {
     "node": ">= 6.9.1"

package/src/__snapshots__/index.test.ts.snap

@@ -14,7 +14,7 @@ exports[`renderAltair should return expected string 1`] = `
 
   <body>
     <app-root>
-      <style>
+      <style nonce="">
         .loading-screen {
           /*Prevents the loading screen from showing until CSS is downloaded*/
           display: none;
@@ -51,7 +51,7 @@ exports[`renderAltair should return expected string 1`] = `
       type="text/javascript"
       src="[% MAIN_SCRIPT %]"
     ></script>
-  <script>
+  <script nonce="">
         AltairGraphQL.init({
 initialQuery: \`query {
         Hello
@@ -78,7 +78,7 @@ exports[`renderAltair should return expected string with $$ 1`] = `
 
   <body>
     <app-root>
-      <style>
+      <style nonce="">
         .loading-screen {
           /*Prevents the loading screen from showing until CSS is downloaded*/
           display: none;
@@ -115,7 +115,7 @@ exports[`renderAltair should return expected string with $$ 1`] = `
       type="text/javascript"
       src="[% MAIN_SCRIPT %]"
     ></script>
-  <script>
+  <script nonce="">
         AltairGraphQL.init({
 initialQuery: \`{
           MyDomains (

package/src/index.ts

@@ -43,6 +43,7 @@ const optionsProperties: AltairConfigOptionsObject = {
   persistedSettings: undefined,
   initialName: undefined,
   initialAuthorization: undefined,
+  cspNonce: undefined,
 };
 const allowedProperties = Object.keys(
   optionsProperties
@@ -92,21 +93,34 @@ export const renderAltair = (options: RenderOptions = {}) => {
   const initialOptions = renderInitSnippet(options);
   const baseURL = options.baseURL || './';
   if (options.serveInitialOptionsInSeperateRequest) {
-    const scriptName =
-      typeof options.serveInitialOptionsInSeperateRequest === 'string'
-        ? options.serveInitialOptionsInSeperateRequest
-        : 'initial_options.js';
-    return altairHtml
-      .replace(/<base.*>/, `<base href="${baseURL}">`)
-      .replace(
-        '</body>',
-        () => `<script src="${scriptName.replace(/["'<>=]/g, '')}"></script></body>`
-      );
-  } else {
-    return altairHtml
-      .replace(/<base.*>/, `<base href="${baseURL}">`)
-      .replace('</body>', () => `<script>${initialOptions}</script></body>`);
+    if (!options.cspNonce) {
+      // When using cspNonce, the initial options must be inlined to avoid CSP issues
+      // because loading a the script in a separate request will likely cause a new CSP nonce to be generated
+      // which will not match the original nonce used in the main HTML file
+      // and thus the script will be blocked by the browser.
+      const scriptName =
+        typeof options.serveInitialOptionsInSeperateRequest === 'string'
+          ? options.serveInitialOptionsInSeperateRequest
+          : 'initial_options.js';
+      return altairHtml
+        .replace(/<base.*>/, `<base href="${baseURL}">`)
+        .replace('<style>', `<style nonce="${options.cspNonce ?? ''}">`)
+        .replace(
+          '</body>',
+          () =>
+            `<script nonce="${options.cspNonce ?? ''}" src="${scriptName.replace(/["'<>=]/g, '')}"></script></body>`
+        );
+    }
   }
+
+  return altairHtml
+    .replace(/<base.*>/, `<base href="${baseURL}">`)
+    .replace('<style>', `<style nonce="${options.cspNonce ?? ''}">`)
+    .replace(
+      '</body>',
+      () =>
+        `<script nonce="${options.cspNonce ?? ''}">${initialOptions}</script></body>`
+    );
 };
 
 const getRenderedAltairOpts = (renderOptions: RenderOptions) => {
@@ -119,6 +133,10 @@ const getRenderedAltairOpts = (renderOptions: RenderOptions) => {
   return ['{', ...optProps, '}'].join('\n');
 };
 
+export const isSandboxFrame = (path: string) => {
+  return path.split('/').includes('iframe-sandbox');
+};
+
 export { getDistDirectory } from './get-dist';
 export { getAltairHtml };