feat: artifacts made iframe script to mask css and js relative li… (#91)

* feat: artifacts made iframe script to mask css and js relative links with api
screwdriver-cd · Aug 2, 2019 · 00fc550 · 00fc550
1 parent d14c5e8
commit 00fc550
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 19 deletions.
diff --git a/helpers/iframe.js b/helpers/iframe.js
@@ -11,6 +11,11 @@ const iframeScript = `
         return absolutePath.test(href);
     };
 
+    function maskWithAPI(apiUrlOrigin, apiVersion, urlFileDir, originalHref) {
+        const newUrl = apiUrlOrigin + '/' + apiVersion + '/' + urlFileDir + '/' + originalHref;
+        return newUrl.replace('ARTIFACTS', 'artifacts') + '?type=preview';
+    }
+
     function replaceHref(apiHref='${apiUrl}') {
         const currentIframeHref = new URL(document.location.href);
         const urlOrigin = currentIframeHref.origin;
@@ -25,17 +30,55 @@ const iframeScript = `
 
         const anchors = document.getElementsByTagName('a');
         for (let anchor of anchors) {
-          let originalHref = anchor.attributes.href.value;
-          if (isAbsolutePath(originalHref)) {
-              continue;
+          if (anchor.attributes.href) {
+              let originalHref = anchor.attributes.href.value;
+              if (isAbsolutePath(originalHref)) {
+                  continue;
+              }
+              anchor.href = maskWithAPI(apiUrlOrigin, apiVersion, urlFileDir, originalHref);
+              anchor.addEventListener('click', function(e) {
+                  top.postMessage({ state: 'redirect', href: anchor.href }, '*');
+                  e.preventDefault();
+              });
           }
-          const newUrl = apiUrlOrigin + '/' + apiVersion + '/' + urlFileDir + '/' + originalHref;
-          anchor.href = newUrl.replace('ARTIFACTS', 'artifacts') + '?type=preview';
-          anchor.addEventListener('click', function(e) {
-              top.postMessage({ state: 'redirect', href: anchor.href }, '*');
-              e.preventDefault();
-          });
         }
+
+        const styleLinks = document.getElementsByTagName('link');
+        for (let styleLink of styleLinks) {
+            if (styleLink.attributes.href) {
+                let originalHref = styleLink.attributes.href.value;
+                if (isAbsolutePath(originalHref)) {
+                    continue;
+                }
+                addCss(maskWithAPI(apiUrlOrigin, apiVersion, urlFileDir, originalHref));
+            }
+        }
+
+        const jsLinks = document.getElementsByTagName('script');
+        for (let jsLink of jsLinks) {
+            if (jsLink.attributes.src) {
+                let originalHref = jsLink.attributes.src.value;
+                if (isAbsolutePath(originalHref)) {
+                    continue;
+                }
+                addScript(maskWithAPI(apiUrlOrigin, apiVersion, urlFileDir, originalHref));
+            }
+        }
+    }
+
+    function addCss(src) {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = src;
+        document.head.appendChild(link);
+    }
+
+    function addScript(src) {
+        const s = document.createElement('script');
+        s.type = 'text/javascript';
+        s.charset = 'utf-8';
+        s.src = src;
+        document.body.appendChild(s);
     }
 
     function replaceLinksMessage(e) {

diff --git a/helpers/mime.js b/helpers/mime.js
@@ -24,7 +24,11 @@ function getMimeFromFileExtension(fileExtension) {
 
     return mime;
 }
+const executableMimes = ['text/css', 'text/javascript'];
+const displableMimes = ['text/html'];
 
 module.exports = {
-    getMimeFromFileExtension
+    getMimeFromFileExtension,
+    displableMimes,
+    executableMimes
 };
diff --git a/plugins/builds.js b/plugins/builds.js
@@ -8,7 +8,7 @@ const cheerio = require('cheerio');
 const AwsClient = require('../helpers/aws');
 const { iframeScript } = require('../helpers/iframe');
 const { streamToBuffer } = require('../helpers/helper');
-const { getMimeFromFileExtension } = require('../helpers/mime');
+const { getMimeFromFileExtension, displableMimes, executableMimes } = require('../helpers/mime');
 
 const SCHEMA_BUILD_ID = joi.number().integer().positive().label('Build ID');
 const SCHEMA_ARTIFACT_ID = joi.string().label('Artifact ID');
@@ -102,14 +102,18 @@ exports.plugin = {
                     // let browser sniff for the correct filename w/ extension
                     response.headers['content-disposition'] =
                         `attachment; filename="${encodeURI(fileName)}"`;
-                } else if (request.query.type === 'preview' && mime === 'text/html') {
-                    const $ = cheerio.load(Buffer.from(value));
-                    const scriptNode = `<script>${iframeScript}</script>`;
-
-                    // inject postMessage into code
-                    $('body').append(scriptNode);
-                    response = h.response($.html());
-                    response.headers['content-type'] = mime;
+                } else if (request.query.type === 'preview') {
+                    if (displableMimes.includes(mime)) {
+                        const $ = cheerio.load(Buffer.from(value));
+                        const scriptNode = `<script>${iframeScript}</script>`;
+
+                        // inject postMessage into code
+                        $('body').append(scriptNode);
+                        response = h.response($.html());
+                        response.headers['content-type'] = mime;
+                    } else if (executableMimes.includes(mime)) {
+                        response.headers['content-type'] = mime;
+                    }
                 }
 
                 return response;