createlement object wrapper:

- when creating a new <object> element in service-worker mode, instead create a proxy object which wraps the <object> element
- if the type is a PDF or SVG, convert to an iframe instead of creating an <object>, since <object> are not handled
by service workers

Author: ikreymer

src/objectwrapper.js

@@ -0,0 +1,61 @@
+export const OBJECT_TO_IFRAME_TYPES = ['application/pdf', 'image/svg+xml'];
+
+export function createObjectWrapper(object) {
+  var listeners = {};
+  var props = {};
+  var iframeElem;
+
+  function addListener(name, func) {
+    listeners[name] = func;
+  }
+
+  var proxy = new Proxy(object, {
+    set(target, prop, value) {
+      props[prop] = value;
+      target[prop] = value;
+      if (iframeElem && prop === "data") {
+        iframeElem.src = value;
+      }
+      return true;
+    },
+
+    get(target, prop, receiver) {
+      if (prop === "addEventListener") {
+        addListener.bind(target);
+      } else if (prop === "__WBProxyRealObj__") {
+        return toElem(target);
+      } else if (prop === "__WB_object_proxy__") {
+        return true;
+      } else if (prop === "contentDocument" && iframeElem) {
+        return iframeElem.contentDocument;
+      }
+
+      return target[prop];
+    },
+  });
+
+  function toElem(objectElem) {
+    if (iframeElem) {
+      return iframeElem;
+    }
+
+    if (!OBJECT_TO_IFRAME_TYPES.includes(objectElem.getAttribute("type"))) {
+      return objectElem;
+    }
+
+    iframeElem = objectElem.ownerDocument.createElement("iframe");
+
+    for (const key of Object.keys(props)) {
+      iframeElem[key] = props[key];
+    }
+
+    for (const key of Object.keys(listeners)) {
+      iframeElem.addEventListener(key, listeners[key]);
+    }
+
+    return iframeElem;
+  }
+
+  return proxy;
+}
+

src/wombat.js

@@ -4,6 +4,7 @@ import { createStorage, Storage } from './customStorage.js';
 import WombatLocation from './wombatLocation.js';
 import AutoFetcher from './autoFetcher.js';
 import { wrapEventListener, wrapSameOriginEventListener } from './listeners.js';
+import { OBJECT_TO_IFRAME_TYPES, createObjectWrapper } from "./objectwrapper.js";
 import {
   addToStringTagToClass,
   autobind,
@@ -1637,7 +1638,12 @@ Wombat.prototype.rewriteNodeFuncArgs = function(
   if (newNode) {
     switch (newNode.nodeType) {
       case Node.ELEMENT_NODE:
-        this.rewriteElemComplete(newNode);
+        if (this.wb_info.isSW && !newNode.parentElement &&
+           newNode.tagName === "OBJECT" && newNode.__WB_object_proxy__) {
+          newNode = newNode.__WBProxyRealObj__;
+        } else {
+          this.rewriteElemComplete(newNode);
+        }
         break;
       case Node.TEXT_NODE:
         // newNode is the new child of fnThis (the parent node)
@@ -1993,7 +1999,7 @@ Wombat.prototype.rewriteAttr = function(elem, name, absUrlOnly) {
     return changed;
   }
 
-  var value = this.wb_getAttribute.call(elem, name);
+  var value = this.wb_getAttribute.call(this.proxyToObj(elem), name);
 
   if (!value || this.startsWith(value, 'javascript:')) return changed;
 
@@ -2216,7 +2222,7 @@ Wombat.prototype.rewriteElem = function(elem) {
         }
         break;
       case 'OBJECT':
-        if (this.wb_info.isSW && elem.parentElement && elem.getAttribute('type') === 'application/pdf') {
+        if (this.wb_info.isSW && elem.parentElement && OBJECT_TO_IFRAME_TYPES.includes(elem.getAttribute('type'))) {
           var iframe = this.$wbwindow.document.createElement('IFRAME');
           for (var i = 0; i < elem.attributes.length; i++) {
             var attr = elem.attributes[i];
@@ -4772,6 +4778,26 @@ Wombat.prototype.initCreateElementNSFix = function() {
   this.$wbwindow.document.createElementNS = createElementNS;
 };
 
+
+Wombat.prototype.initCreateElement = function() {
+  var orig_createElement = this.$wbwindow.document.createElement;
+  var wombat = this;
+
+  var createElement = function createElement(tagName, opts) {
+    var result = orig_createElement.call(
+      wombat.proxyToObj(this), tagName, opts
+    );
+    if (tagName === "object") {
+      return createObjectWrapper(result);
+    }
+
+    return result;
+  };
+
+  this.$wbwindow.Document.prototype.createElement = createElement;
+  this.$wbwindow.document.createElement = createElement;
+}
+
 /**
  * Applies an override to Element.insertAdjacentHTML in order to ensure
  * that the strings of HTML to be inserted are rewritten and to
@@ -6710,6 +6736,8 @@ Wombat.prototype.wombatInit = function() {
   // ensure namespace urls are NOT rewritten
   this.initCreateElementNSFix();
 
+  this.initCreateElement();
+
   // DOM
   // OPT skip
   if (!this.wb_opts.skip_dom) {