Update cyclone.js

static/cyclone.js

@@ -1,11 +1,12 @@
+const config = {
+
+}
+
 class Cyclone {
   constructor() {
     this.tmp = location.pathname.split('/service')[1]
 
     this.tmp = this.tmp.substring(1, this.tmp.length);
-      let re = /(http(s|):)/g
-  
-      //if (this.tmp.match(re)) {
     this.tmp = this.tmp.replace("http://", '')
     this.tmp = this.tmp.replace("https://", '')
     this.tmp = this.tmp.replace("http:/", '')
@@ -16,7 +17,8 @@ class Cyclone {
 
     this.url = new URL(document._location.href);
 
-      this.bareEndpoint = location.host + "/service";
+    this.prefix = location.pathname.split('/')[1]
+    this.bareEndpoint = location.host + "/" + this.prefix
 
     if (this.url.pathname == "/") {
       this.paths = ['/']
@@ -27,7 +29,10 @@ class Cyclone {
 
     this.targetAttrs = ['href', 'src', 'action', 'srcdoc', 'srcset'];
 
+    if (!document.cycloneInjected) {
       console.log("Cyclone Injected with paths of:", this.paths, this.url.pathname)
+      document.cycloneInjected = true
+    }
 
     /*const LocationHandler = {
       get(target, prop, reciver) {
@@ -41,6 +46,10 @@ class Cyclone {
   }
 
   rewriteUrl(link) {
+    if (!link) {
+      link = "";
+    }
+
     var rewritten;
 
     if (link.startsWith('https://') || link.startsWith('http://') || link.startsWith('//')) {
@@ -75,6 +84,7 @@ class Cyclone {
       }
     }
 
+
     if (needstowrite) {
       rewritten = location.protocol + '//' + this.bareEndpoint + '/' + rewritten
       return rewritten;
@@ -87,22 +97,70 @@ class Cyclone {
     return sample.split(',').map(e => {
       return (e.split(' ').map(a => {
         if (a.startsWith('http') || (a.startsWith('/') && !a.startsWith(this.prefix))) {
-            var url = this.rewriteUrl(a)
+          var url = this.rewriteUrl(url);
         }
         return a.replace(a, (url || a))
       }).join(' '))
     }).join(',')
   }
+}
+
+// Rewriting of data types
+
+// CSS
+class CSSRewriter extends Cyclone {
+  rewriteCSS(tag) {
+    var styles = window.getComputedStyle(tag)
+    var _values = styles['_values']
+
+    var prop = styles.getPropertyValue('background-image')
+    var name = "background-image"
+    console.log(prop)
+    if (prop == "") {
+      if (!styles.getPropertyValue('background') == "") {
+        prop = styles.getPropertyValue('background')
+        name = "background"
+      } else {
+        name = "";
+        prop = "";
+      }
     }
 
-  function rewriteJavascript(js) {
+    console.log(name);
+    
+    if (prop.includes("url(")) {
+      var start = prop.indexOf('url(') + 4
+      var end = prop.indexOf(')') - 4
+
+      var url = prop.substring(start, end).toString('ascii');
+      
+      if (url.startsWith(location.origin)) {
+        url = url.split(location.origin)
+        console.log("Relative URL", url);
+      } else {
+        url = url.slice(url.indexOf(location.origin));
+        console.log("Absolute URL:",url)
+      }
+      
+      url = this.rewriteUrl(url)
+      tag.style[name] = url
+    }
+  }
+}
+
+// JS
+
+class JavaScriptRewriter extends Cyclone {
+  rewriteJavascript(js) {
     var javascript = js.replace('window.location', 'document._dlocation')
     javascript = javascript.replace('document.location', 'document._dlocation')
     javascript = javascript.replace('location.', 'document._location.')
     return javascript
   }
+}
 
-  class HTMLRewriter extends Cyclone {
+// HTML
+class HTMLRewriter extends Cyclone {
   rewriteElement(element) {
     var targetAttrs = this.targetAttrs;
     const attrs = [...element.attributes].reduce((attrs, attribute) => {
@@ -119,6 +177,7 @@ class Cyclone {
         name: attr,
         value: element.getAttribute('data-origin-' + attr) || element.getAttribute(attr)
       }
+
       if (data.value) {
         elementAttributes.push(data);
       }
@@ -133,10 +192,17 @@ class Cyclone {
       }
 
       if (element.tagName == "script") {
-          element.innerHTML = rewriteJavascript(element.innerHTML);
+        if (!element.getAttribute('src')) {
+          var jsRewrite = new JavaScriptRewriter();
+          element.innerHTML = jsRewrite.rewriteJavascript(element.innerHTML)
         }
       }
 
+      // Css
+      var cssRewrite = new CSSRewriter();
+      cssRewrite.rewriteCSS(element)
+    }
+
     for (var i = 0; i < elementAttributes.length; i++) {
       var attr = elementAttributes[i]
       var attrName = attr.name;
@@ -171,35 +237,34 @@ class Cyclone {
       this.rewriteElement(tag)
     }
   }
-  }
+}
 
+const cyclone = new Cyclone();
 
-  const cyclone = new Cyclone();
+const htmlRewriter = new HTMLRewriter();
 
-  const htmlRewriter = new HTMLRewriter();
+const FetchIntercept = window.fetch;
-  
+window.fetch = async (...args) => {
-  const FetchIntercept = window.fetch;
-  window.fetch = async (...args) => {
   let [resource, config] = args;
   resource = cyclone.rewriteUrl(resource);
 
   const response = await FetchIntercept(resource, config);
   return response;
-  }
+}
 
-  const MessageIntercept = window.postMessage;
+const MessageIntercept = window.postMessage;
 
-  window.postMessage = (...args) => {
+window.postMessage = (...args) => {
   let [message, target, config] = args;
   target = cyclone.rewriteUrl(target);
 
   const response = MessageIntercept(message, target, config);
   return response;
-  }
+}
 
-  var CWOriginal = Object.getOwnPropertyDescriptor(window.HTMLIFrameElement.prototype, 'contentWindow')
+var CWOriginal = Object.getOwnPropertyDescriptor(window.HTMLIFrameElement.prototype, 'contentWindow')
 
-  Object.defineProperty(window.HTMLIFrameElement.prototype, 'contentWindow', {
+Object.defineProperty(window.HTMLIFrameElement.prototype, 'contentWindow', {
   get() {
     var iWindow = CWOriginal.get.call(this)
     cyclone.rewriteiFrame(iWindow)
@@ -209,35 +274,32 @@ class Cyclone {
   set() {
     return false;
   }
-  })
+})
 
 
-  const open = XMLHttpRequest.prototype.open;
+const open = XMLHttpRequest.prototype.open;
-  XMLHttpRequest.prototype.open = function(method, url, ...rest) {
+XMLHttpRequest.prototype.open = function(method, url, ...rest) {
   url = cyclone.rewriteUrl(url)
 
   return open.call(this, method, url, ...rest);
-  };
+};
 
-  var oPush = window.history.pushState;
+var oPush = window.history.pushState;
+var oPlace = window.history.replaceState;
 
-  function CycloneStates(obj, title, path) {
+function CycloneStates(dat, unused, url) {
-    if (path.startsWith('/service/')) {
+  var cyUrl = cyclone.rewriteUrl(url);
-      return;
-    } else {
-      var url = cyclone.rewriteUrl(path)
 
-      oPush.apply(this, [obj, title, url])
+  oPush.call(this, dat, unused, cyUrl);
-    }
+}
-  }
 
-  window.history.pushState = CycloneStates
+window.history.pushState = CycloneStates
-  window.history.replaceState = CycloneStates
+window.history.replaceState = CycloneStates
-  history.pushState = CycloneStates
+history.pushState = CycloneStates
-  history.replaceState = CycloneStates
+history.replaceState = CycloneStates
 
-  const OriginalWebsocket = window.WebSocket
+const OriginalWebsocket = window.WebSocket
-  const ProxiedWebSocket = function() {
+const ProxiedWebSocket = function() {
   const ws = new OriginalWebsocket(...arguments)
 
   const originalAddEventListener = ws.addEventListener
@@ -265,34 +327,38 @@ class Cyclone {
     }
   });
   return ws;
-  };
+};
 
-  window.WebSocket = ProxiedWebSocket;
+window.WebSocket = ProxiedWebSocket;
 
-  const nwtb = window.open
+const nwtb = window.open
-  function openNewTab(url, target, features) {
+
+function openNewTab(url, target, features) {
   url = cyclone.rewriteUrl(url)
   nwtb(url, target, features)
-  }
+}
-  window.open = openNewTab
- /* 
-  setInterval(function() {
-    htmlRewriter.rewriteDocument();
-  }, 10000)
-  */
-  htmlRewriter.rewriteDocument();
 
- let mutationE = new MutationObserver((mutationList,observer) => {
+window.open = openNewTab;
+
+htmlRewriter.rewriteDocument();
+
+let mutationE = new MutationObserver((mutationList, observer) => {
   for (const mutation of mutationList) {
-        mutation.addedNodes.forEach(node => htmlRewriter.rewriteElement(node));
+    mutation.addedNodes.forEach(node => {
-        htmlRewriter.rewriteElement(mutation.target);
+      htmlRewriter.rewriteElement(node);
+    });
   }
- }).observe(document,{
+}).observe(document, {
   childList: true,
   subtree: true
- })
+})
-  //For intercepting all requests
+
-  if (!document.serviceWorkerRegistered) {
+setInterval(function() {
+  htmlRewriter.rewriteDocument();
+}, 10000)
+
+//For intercepting all requests
+if (!document.serviceWorkerRegistered) {
   if ('serviceWorker' in navigator) {
     window.addEventListener('load', function() {
       navigator.serviceWorker.register(location.origin + '/cySw.js').then(function(registration) {
@@ -303,4 +369,4 @@ class Cyclone {
     });
   }
   document.serviceWorkerRegistered = true
-  }
+}