Address Issue174

src/sandbox/external-resources.js

@@ -24,6 +24,13 @@ function addCSS(resource: string) {
   head.appendChild(link);
 }
 
+function getContentType(resource: string) {
+  return fetch(resource, {
+    method: 'HEAD',
+    mode: 'cors',
+  }).then(response => response.headers.get('Content-Type'));
+}
+
 function addJS(resource: string) {
   const script = document.createElement('script');
   script.setAttribute('src', resource);
@@ -32,13 +39,28 @@ function addJS(resource: string) {
   document.head.appendChild(script);
 }
 
-function addResource(resource: string) {
+export function addResource(
+  resource: string,
+  addCSS = addCSS,
+  addJS = addJS,
+  getContentType = getContentType
+) {
   const match = resource.match(/\.([^.]*)$/);
 
   if (match && match[1] === 'css') {
     addCSS(resource);
-  } else {
+  } else if (match && match[1] === 'js') {
     addJS(resource);
+  } else {
+    return getContentType(resource).then(contentType => {
+      if (contentType.indexOf('text/css') === 0) {
+        addCSS(resource);
+      } else if (contentType.indexOf('application/javascript') === 0) {
+        addJS(resource);
+      } else {
+        throw new Error(`Unsupported Content-Type: ${contentType}`);
+      }
+    });
   }
 }
 
@@ -48,7 +70,9 @@ export default function handleExternalResources(externalResources) {
   const extResString = getExternalResourcesConcatenation(externalResources);
   if (extResString !== cachedExternalResources) {
     clearExternalResources();
-    externalResources.forEach(addResource);
+    externalResources.forEach(resource => {
+      addResource(resource, addCSS, addJS, getContentType);
+    });
     cachedExternalResources = extResString;
   }
 }

src/sandbox/external-resources.test.js

@@ -0,0 +1,54 @@
+import { addResource } from './external-resources';
+
+describe('addResource', () => {
+  it('adds URLs that end with "css" as CSS', () => {
+    const addCSS = jest.fn();
+    const resource = 'resource.css';
+    addResource(resource, addCSS);
+    expect(addCSS).toHaveBeenCalled();
+  });
+
+  it('adds URLs that end with "js" as JS', () => {
+    const addJS = jest.fn();
+    const resource = 'resource.js';
+    addResource(resource, jest.fn(), addJS);
+    expect(addJS).toHaveBeenCalled();
+  });
+
+  it('checks content type if the file has an unknown ending', () => {
+    const getContentType = jest.fn();
+    getContentType.mockReturnValue(Promise.resolve('text/css'));
+    const resource = 'resource';
+    addResource(resource, jest.fn(), jest.fn(), getContentType);
+    expect(getContentType).toHaveBeenCalled();
+  });
+
+  it('throws an error for unknown content types', () => {
+    const getContentType = jest.fn();
+    getContentType.mockReturnValue(Promise.resolve('foo'));
+    const resource = 'resource';
+    addResource(resource, jest.fn(), jest.fn(), getContentType).catch(e => {
+      expect(e).toBeInstanceOf(Error);
+    });
+  });
+
+  it('adds "text/css" as CSS', () => {
+    const addCSS = jest.fn();
+    const getContentType = jest.fn();
+    getContentType.mockReturnValue(Promise.resolve('text/css'));
+    const resource = 'resource';
+    addResource(resource, addCSS, jest.fn(), getContentType).then(() => {
+      expect(addCSS).toHaveBeenCalled();
+    });
+  });
+
+  it('adds "application/javascript" as JS', () => {
+    const addJS = jest.fn();
+    const getContentType = jest.fn();
+    getContentType.mockReturnValue(Promise.resolve('application/javascript'));
+    const resource = 'resource';
+    addResource(resource, jest.fn(), addJS, getContentType).then(() => {
+      expect(addJS).toHaveBeenCalled();
+    });
+  });
+});