Merge pull request #77 from AnnaKudriasheva/add-sri-support

Add integrity and crossorigin attributes support

Author: flor-master

src/index.ts

@@ -24,13 +24,21 @@ const loadVGSCollect = (config: IConfig = isRequired('config')) => {
     vaultId = isRequired('vaultId'),
     environment = DEFAULT_CONFIG.environment,
     version = DEFAULT_CONFIG.version,
+    integrity,
+    crossorigin,
   } = config;
 
   if (version === 'canary') {
     console.warn(ERROR_MESSAGE.CHANGE_VERSION);
   }
 
-  registerScriptLoading({ vaultId, environment, version });
+  registerScriptLoading({
+    vaultId,
+    environment,
+    version,
+    integrity,
+    crossorigin,
+  });
 
   return new Promise((resolve, reject) => {
     if (typeof window === 'undefined') {

src/utils/IConfig.ts

@@ -2,5 +2,6 @@ export interface IConfig {
   vaultId: string;
   environment: string;
   version: string;
-  [index: string]: string;
+  integrity?: string;
+  crossorigin?: 'use-credentials' | 'anonymous' | '';
 }

src/utils/loadScript.ts

@@ -24,10 +24,19 @@ const scriptExists = () => {
 };
 
 const appendScript = (): HTMLScriptElement => {
-  const { vaultId, environment, version } = getConfig();
+  const { vaultId, environment, version, integrity, crossorigin } = getConfig();
   const script = document.createElement('script');
 
   script.src = `${scriptURL}/vgs-collect/${version}/vgs-collect.js?sessionId=${SESSION_ID}&tenantId=${vaultId}&env=${environment}`;
+
+  if (integrity) {
+    script.integrity = integrity;
+  }
+
+  if (typeof crossorigin === 'string') {
+    script.crossOrigin = crossorigin;
+  }
+
   appendElement(script);
 
   return script;

src/utils/validation.ts

@@ -11,6 +11,8 @@ const configSchema: IConfigSchema = {
     (typeof value === 'string' &&
       /^\d{1,2}\.\d{1,2}(\.\d{1,2})?$/.test(value) &&
       !value.startsWith('1.')),
+  integrity: value => (value ? typeof value === 'string' : true),
+  crossorigin: value => (value ? typeof value === 'string' : true),
 };
 
 const isRequired = (param: string) => {

test/load.test.ts

@@ -39,6 +39,23 @@ describe('loadVGSCollect', () => {
     );
     expect(document.querySelectorAll(SCRIPT_URL).length).toBe(1);
   });
+
+  test('script wtih integrity and crossorigin attributes', () => {
+    const { loadVGSCollect } = require('../src/index');
+    loadVGSCollect({
+      vaultId: 'tnt12345352',
+      integrity:
+        'sha384-STGHtboAf18kBhVVUccsY3AN7RAXJdfyfAEZrhlGkYnKdPxsKIyI8ajYAom0X2zP',
+      crossorigin: 'anonymous',
+    });
+    const scriptElement = document.querySelector(
+      SCRIPT_URL
+    ) as HTMLScriptElement;
+    expect(scriptElement.crossOrigin).toBe('anonymous');
+    expect(scriptElement.integrity).toBe(
+      'sha384-STGHtboAf18kBhVVUccsY3AN7RAXJdfyfAEZrhlGkYnKdPxsKIyI8ajYAom0X2zP'
+    );
+  });
 });
 
 describe('check if script exists', () => {