refactor: read whitlist from allowed-origins.json file in the main branch

Author: hamed-musallam

src/NMRiumWrapper.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState, useCallback, CSSProperties, useRef } from 'react';
 import events from './events';
 import { usePreferences } from './hooks/usePreferences';
 import { useLoadSpectra } from './hooks/useLoadSpectra';
+import { useWhiteList } from './hooks/useWhiteList';
 
 const styles: Record<'container' | 'loadingContainer', CSSProperties> = {
   container: {
@@ -30,6 +31,7 @@ const styles: Record<'container' | 'loadingContainer', CSSProperties> = {
 export type { NMRiumData };
 
 export default function NMRiumWrapper() {
+  const { allowedOrigins, isFetchAllowedOriginsPending } = useWhiteList();
   const nmriumRef = useRef<NMRiumRef>(null);
   const [data, setDate] = useState<NMRiumData>();
   const { workspace, preferences } = usePreferences();
@@ -46,44 +48,52 @@ export default function NMRiumWrapper() {
   }, [isLoading, loadedData]);
 
   useEffect(() => {
-    const clearActionListener = events.on('action-request', (request) => {
-      switch (request.type) {
-        case 'exportSpectraViewerAsBlob': {
-          const blob = nmriumRef.current?.getSpectraViewerAsBlob();
-          if (blob) {
-            events.trigger('action-response', {
-              type: request.type,
-              data: blob,
-            });
+    const clearActionListener = events.on(
+      'action-request',
+      (request) => {
+        switch (request.type) {
+          case 'exportSpectraViewerAsBlob': {
+            const blob = nmriumRef.current?.getSpectraViewerAsBlob();
+            if (blob) {
+              events.trigger('action-response', {
+                type: request.type,
+                data: blob,
+              });
+            }
+            break;
+          }
+          default: {
+            throw new Error(
+              `ERROR! Property 'type' accept only 'exportViewerAsBlob'.`,
+            );
           }
-          break;
-        }
-        default: {
-          throw new Error(
-            `ERROR! Property 'type' accept only 'exportViewerAsBlob'.`,
-          );
         }
-      }
-    });
-    const clearLoadListener = events.on('load', (loadData) => {
-      switch (loadData.type) {
-        case 'nmrium':
-          setDate(loadData.data);
-          break;
-        case 'file':
-          loadSpectra({ files: loadData.data });
-          break;
-        case 'url':
-          loadSpectra({ urls: loadData.data });
-          break;
+      },
+      { allowedOrigins },
+    );
+    const clearLoadListener = events.on(
+      'load',
+      (loadData) => {
+        switch (loadData.type) {
+          case 'nmrium':
+            setDate(loadData.data);
+            break;
+          case 'file':
+            loadSpectra({ files: loadData.data });
+            break;
+          case 'url':
+            loadSpectra({ urls: loadData.data });
+            break;
 
-        default: {
-          throw new Error(
-            `ERROR! Property 'type' accept only nmrium, url or file.`,
-          );
+          default: {
+            throw new Error(
+              `ERROR! Property 'type' accept only nmrium, url or file.`,
+            );
+          }
         }
-      }
-    });
+      },
+      { allowedOrigins },
+    );
 
     return () => {
       clearLoadListener();
@@ -93,11 +103,12 @@ export default function NMRiumWrapper() {
 
   return (
     <div style={styles.container}>
-      {isLoading && (
-        <div style={styles.loadingContainer}>
-          <span>Loading .... </span>
-        </div>
-      )}
+      {isLoading ||
+        (isFetchAllowedOriginsPending && (
+          <div style={styles.loadingContainer}>
+            <span>Loading .... </span>
+          </div>
+        ))}
       <NMRium
         ref={nmriumRef}
         data={data}

src/events/event.ts

@@ -1,5 +1,4 @@
 import { EventType, EventData } from './types';
-import ALLOWED_ORIGINS from '../allowed-origins.json';
 
 const namespace = 'nmr-wrapper';
 
@@ -10,9 +9,14 @@ function trigger<T extends EventType>(type: T, data: EventData<T>) {
 function on<T extends EventType>(
   type: T,
   dataListener: (data: EventData<T>) => void,
-  options?: boolean | AddEventListenerOptions,
+  options: {
+    eventOptions?: boolean | AddEventListenerOptions;
+    allowedOrigins?: string[];
+  } = {},
 ) {
-  function listener(event: MessageEvent) {
+  const { eventOptions, allowedOrigins = [] } = options;
+
+  async function listener(event: MessageEvent) {
     const {
       origin,
       data: { type: targetType, data },
@@ -21,17 +25,17 @@ function on<T extends EventType>(
     const url = new URL(origin);
 
     const skipOriginCheck =
-      ALLOWED_ORIGINS.length === 0 || ALLOWED_ORIGINS.includes('*');
+      allowedOrigins.length === 0 || allowedOrigins.includes('*');
 
-    if (!skipOriginCheck && !ALLOWED_ORIGINS.includes(url.origin)) {
+    if (!skipOriginCheck && !allowedOrigins.includes(url.origin)) {
       throw new Error(`Invalid Origin ${origin}`);
     }
 
     if (`${namespace}:${type}` === targetType) {
       dataListener?.(data);
     }
   }
-  window.addEventListener(`message`, listener, options);
+  window.addEventListener(`message`, listener, eventOptions);
 
   return () => window.removeEventListener(`message`, listener);
 }

src/hooks/useWhiteList.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState, useTransition } from 'react';
+
+async function readAllowedOrigins() {
+  return fetch(
+    'https://raw.githubusercontent.com/NFDI4Chem/nmrium-react-wrapper/main/src/allowed-origins.json',
+  ).then((response) => response.json());
+}
+
+export function useWhiteList() {
+  const [allowedOrigins, setAllowedOrigins] = useState([]);
+  const [isFetchAllowedOriginsPending, startTransition] = useTransition();
+
+  useEffect(() => {
+    startTransition(() => {
+      readAllowedOrigins().then((whitelist) => setAllowedOrigins(whitelist));
+    });
+  }, []);
+
+  return {
+    allowedOrigins,
+    isFetchAllowedOriginsPending,
+  };
+}