From 5c0a6c8343e5bd422e8bbe0e32ccdd9698e84b9f Mon Sep 17 00:00:00 2001 From: Daniel Pascual Date: Tue, 1 Jun 2021 17:49:11 +0200 Subject: [PATCH 1/3] Remove the ability to inject prechached html into the iframe --- dist/vt-augment.min.js | 74 +++++++----------- src/vt-augment.js | 167 ++++------------------------------------- 2 files changed, 44 insertions(+), 197 deletions(-) diff --git a/dist/vt-augment.min.js b/dist/vt-augment.min.js index 4987c96..e3f8ef4 100644 --- a/dist/vt-augment.min.js +++ b/dist/vt-augment.min.js @@ -13,41 +13,24 @@ Copyright The Closure Library Authors. SPDX-License-Identifier: Apache-2.0 */ -var n="function"==typeof Object.defineProperties?Object.defineProperty:function(a,b,c){if(a==Array.prototype||a==Object.prototype)return a;a[b]=c.value;return a};function aa(a){a=["object"==typeof globalThis&&globalThis,a,"object"==typeof window&&window,"object"==typeof self&&self,"object"==typeof global&&global];for(var b=0;b")&&(a=a.replace(za,">"));-1!=a.indexOf('"')&&(a=a.replace(Aa,"""));-1!=a.indexOf("'")&&(a=a.replace(Ba,"'"));-1!=a.indexOf("\x00")&&(a=a.replace(Ca,"�"))}return a} -var xa=/&/g,ya=//g,Aa=/"/g,Ba=/'/g,Ca=/\x00/g,Da=/[\x00&<>"']/;function J(a,b){this.i=b===K?a:""}J.prototype.m=!0;J.prototype.l=function(){return this.i.toString()};J.prototype.h=!0;J.prototype.g=function(){return 1};J.prototype.toString=function(){return this.i.toString()};function Ea(a){if(a instanceof J&&a.constructor===J)return a.i;B("expected object of type SafeUrl, got '"+a+"' of type "+v(a));return"type_error:SafeUrl"} -var Fa=/^(?:audio\/(?:3gpp2|3gpp|aac|L16|midi|mp3|mp4|mpeg|oga|ogg|opus|x-m4a|x-matroska|x-wav|wav|webm)|font\/\w+|image\/(?:bmp|gif|jpeg|jpg|png|tiff|webp|x-icon)|video\/(?:mpeg|mp4|ogg|webm|quicktime|x-matroska))(?:;\w+=(?:\w+|"[\w;,= ]+"))*$/i,Ga=/^data:(.*);base64,[a-z0-9+\/]+=*$/i,Ha=/^(?:(?:https?|mailto|ftp):|[^:/?#]*(?:[/?#]|$))/i; -function Ia(a){if(a instanceof J)return a;a="object"==typeof a&&a.m?a.l():String(a);if(Ha.test(a))a=new J(a,K);else{a=String(a);a=a.replace(/(%0A|%0D)/g,"");var b=a.match(Ga);a=b&&Fa.test(b[1])?new J(a,K):null}return a}var K={},Ja=new J("about:invalid#zClosurez",K);function L(a,b){this.g=b===M?a:""}L.prototype.m=!0;L.prototype.l=function(){return this.g};L.prototype.toString=function(){return this.g.toString()};var M={},Ka=new L("",M);function La(a){if(a instanceof J)return'url("'+Ea(a).replace(/":(b=cb(c),h+=">"+S(b).toString()+"",b=b.g());(a=a&&a.dir)&&(/^(ltr|rtl|auto)$/i.test(a)?b=0:b=null);return T(h,b)} -function eb(a,b,c){var d={},e;for(e in a)Object.prototype.hasOwnProperty.call(a,e)&&(d[e]=a[e]);for(e in b)Object.prototype.hasOwnProperty.call(b,e)&&(d[e]=b[e]);if(c)for(e in c)if(Object.prototype.hasOwnProperty.call(c,e)){var f=e.toLowerCase();if(f in a)throw Error('Cannot override "'+f+'" attribute, got "'+e+'" with value "'+c[e]+'"');f in b&&delete d[f];d[e]=c[e]}return d}var bb=new Q(t.trustedTypes&&t.trustedTypes.emptyHTML||"",0,R);var fb={MATH:!0,SCRIPT:!0,STYLE:!0,SVG:!0,TEMPLATE:!0},gb=function(a){var b=!1,c;return function(){b||(c=a(),b=!0);return c}}(function(){if("undefined"===typeof document)return!1;var a=document.createElement("div"),b=document.createElement("div");b.appendChild(document.createElement("div"));a.appendChild(b);if(!a.firstChild)return!1;b=a.firstChild.firstChild;a.innerHTML=S(bb);return!b.parentElement}); -function hb(a,b){if(a.tagName&&fb[a.tagName.toUpperCase()])throw Error("goog.dom.safe.setInnerHtml cannot be used to set content of "+a.tagName+".");if(gb())for(;a.lastChild;)a.removeChild(a.lastChild);a.innerHTML=S(b)};function ib(a){return a=I(a,void 0)};var jb=-1!=P.indexOf("Opera"),U=-1!=P.indexOf("Trident")||-1!=P.indexOf("MSIE"),kb=-1!=P.indexOf("Edge"),lb=-1!=P.indexOf("Gecko")&&!(-1!=P.toLowerCase().indexOf("webkit")&&-1==P.indexOf("Edge"))&&!(-1!=P.indexOf("Trident")||-1!=P.indexOf("MSIE"))&&-1==P.indexOf("Edge"),mb=-1!=P.toLowerCase().indexOf("webkit")&&-1==P.indexOf("Edge");function nb(){var a=t.document;return a?a.documentMode:void 0}var V; -a:{var W="",ob=function(){var a=P;if(lb)return/rv:([^\);]+)(\)|;)/.exec(a);if(kb)return/Edge\/([\d\.]+)/.exec(a);if(U)return/\b(?:MSIE|rv)[: ]([^\);]+)(\)|;)/.exec(a);if(mb)return/WebKit\/(\S+)/.exec(a);if(jb)return/(?:Version)[ \/]?(\S+)/.exec(a)}();ob&&(W=ob?ob[1]:"");if(U){var pb=nb();if(null!=pb&&pb>parseFloat(W)){V=String(pb);break a}}V=W}var qb;if(t.document&&U){var rb=nb();qb=rb?rb:parseInt(V,10)||void 0}else qb=void 0;var sb=qb;var tb;(tb=!U)||(tb=9<=Number(sb));var ub=tb;function vb(a,b){ma(b,function(c,d){c&&"object"==typeof c&&c.m&&(c=c.l());"style"==d?a.style.cssText=c:"class"==d?a.className=c:"for"==d?a.htmlFor=c:wb.hasOwnProperty(d)?a.setAttribute(wb[d],c):0==d.lastIndexOf("aria-",0)||0==d.lastIndexOf("data-",0)?a.setAttribute(d,c):a[d]=c})} -var wb={cellpadding:"cellPadding",cellspacing:"cellSpacing",colspan:"colSpan",frameborder:"frameBorder",height:"height",maxlength:"maxLength",nonce:"nonce",role:"role",rowspan:"rowSpan",type:"type",usemap:"useMap",valign:"vAlign",width:"width"}; -function xb(a,b,c){function d(g){g&&b.appendChild("string"===typeof g?a.createTextNode(g):g)}for(var e=2;e");f=f.join("")}f=String(f);"application/xhtml+xml"===d.contentType&&(f=f.toLowerCase());f=d.createElement(f);l&&("string"===typeof l?f.className=l:Array.isArray(l)?f.className=l.join(" "):vb(f,l));2")&&(a=a.replace(va,">"));-1!=a.indexOf('"')&&(a=a.replace(wa,"""));-1!=a.indexOf("'")&&(a=a.replace(xa,"'"));-1!=a.indexOf("\x00")&&(a=a.replace(ya,"�"))}return a} +var ta=/&/g,ua=//g,wa=/"/g,xa=/'/g,ya=/\x00/g,za=/[\x00&<>"']/;function E(a,b){this.h=b===F?a:""}E.prototype.l=!0;E.prototype.i=function(){return this.h.toString()};E.prototype.j=!0;E.prototype.g=function(){return 1};E.prototype.toString=function(){return this.h.toString()};function G(a){if(a instanceof E&&a.constructor===E)return a.h;u("expected object of type SafeUrl, got '"+a+"' of type "+m(a));return"type_error:SafeUrl"} +var Aa=/^(?:audio\/(?:3gpp2|3gpp|aac|L16|midi|mp3|mp4|mpeg|oga|ogg|opus|x-m4a|x-matroska|x-wav|wav|webm)|font\/\w+|image\/(?:bmp|gif|jpeg|jpg|png|tiff|webp|x-icon)|video\/(?:mpeg|mp4|ogg|webm|quicktime|x-matroska))(?:;\w+=(?:\w+|"[\w;,= ]+"))*$/i,Ba=/^data:(.*);base64,[a-z0-9+\/]+=*$/i,Ca=/^(?:(?:https?|mailto|ftp):|[^:/?#]*(?:[/?#]|$))/i; +function H(a){if(a instanceof E)return a;a="object"==typeof a&&a.l?a.i():String(a);if(Ca.test(a))a=new E(a,F);else{a=String(a);a=a.replace(/(%0A|%0D)/g,"");var b=a.match(Ba);a=b&&Aa.test(b[1])?new E(a,F):null}return a}var F={},I=new E("about:invalid#zClosurez",F);function J(a,b){this.g=b===K?a:""}J.prototype.l=!0;J.prototype.i=function(){return this.g};J.prototype.toString=function(){return this.g.toString()};var K={},Da=new J("",K);function Ea(a){if(a instanceof E)return'url("'+G(a).replace(/parseFloat(U)){T=String(W);break a}}T=U}var X;if(k.document&&S){var db=cb();X=db?db:parseInt(T,10)||void 0}else X=void 0;var eb=X;var Y;(Y=!S)||(Y=9<=Number(eb));var fb=Y;function gb(a,b){ia(b,function(c,d){c&&"object"==typeof c&&c.l&&(c=c.i());"style"==d?a.style.cssText=c:"class"==d?a.className=c:"for"==d?a.htmlFor=c:hb.hasOwnProperty(d)?a.setAttribute(hb[d],c):0==d.lastIndexOf("aria-",0)||0==d.lastIndexOf("data-",0)?a.setAttribute(d,c):a[d]=c})} +var hb={cellpadding:"cellPadding",cellspacing:"cellSpacing",colspan:"colSpan",frameborder:"frameBorder",height:"height",maxlength:"maxLength",nonce:"nonce",role:"role",rowspan:"rowSpan",type:"type",usemap:"useMap",valign:"vAlign",width:"width"}; +function ib(a,b,c){function d(g){g&&b.appendChild("string"===typeof g?a.createTextNode(g):g)}for(var f=2;f");e=e.join("")}e=String(e);"application/xhtml+xml"===d.contentType&&(e=e.toLowerCase());e=d.createElement(e);h&&("string"===typeof h?e.className=h:Array.isArray(h)?e.className=h.join(" "):gb(e,h));2 .spinner {\n position: absolute;\n z-index: 199;\n top: calc(50% - 50px);\n left: calc(50% - 50px);\n border: 8px solid rgba(0, 0, 0, 0.2);\n border-left-color: white;\n border-radius: 50%;\n width: 50px;\n height: 50px;\n animation: spin 1.2s linear infinite;\n }\n @keyframes spin {\n to { transform: rotate(360deg); }\n }\n @keyframes slideFromRight {\n 0% {\n transform: translateX(100vw);\n }\n 100% {\n transform: translateX(0);\n }\n }\n @keyframes slideToRight {\n 100% {\n transform: translateX(100vw);\n display: none;\n }\n }\n @media screen and (max-width: 700px) {\n .vt-augment.drawer {\n width: 100%;\n }\n }\n"));b= -0===b.length?Ua:new O(b,N);var c=a?new yb(9==a.nodeType?a:a.ownerDocument||a.document):ia||(ia=new yb),d=c.g;if(U&&d.createStyleSheet)d=d.createStyleSheet(),Ab(d,b);else{d=zb(c,"HEAD")[0];if(!d){var e=zb(c,"BODY")[0];d=c.h("HEAD");e.parentNode.insertBefore(d,e)}c=c.h("STYLE");if(null===u)b:{e=t.document;if((e=e.querySelector&&e.querySelector("script[nonce]"))&&(e=e.nonce||e.getAttribute("nonce"))&&ea.test(e)){u=e;break b}u=""}(e=u)&&c.setAttribute("nonce",e);Ab(c,b);d.appendChild(c)}document.body.appendChild(a)} -function Z(a,b,c,d){var e={style:{width:"100%",height:"100%",border:"0"},C:0};Cb(a);a=document.createElement("div");a.style.display="none";if(c)c&&sa(c),d={},d.src=c||null,d.srcdoc=void 0,e=eb(d,{sandbox:""},e),e=db(e),hb(a,e),a.firstChild.removeAttribute("sandbox");else{if(!$a())throw Error("The browser does not support sandboxed iframes.");c={src:null};c.srcdoc=d||null;c.sandbox="";e=eb(c,{},e);e=db(e);hb(a,e);a.firstChild.setAttribute("sandbox","allow-scripts allow-same-origin allow-popups")}b.appendChild(a.removeChild(a.firstChild))} -function Cb(a){(a=a.g.querySelector("iframe"))&&a.parentNode.removeChild(a)}function Eb(a,b){var c=new XMLHttpRequest;c.onreadystatechange=function(){c.readyState===XMLHttpRequest.DONE?200===c.status?a.cache.set(b,c.response):(a.o(!1),a.cache.store.delete(b)):a.o(!1)};c.open("GET",b,!0);c.withCredentials=!0;c.send()}function Db(a){a=a.split("/").pop();return ta({token:a})}Y.prototype.loading=Y.prototype.o;Y.prototype.closeDrawer=Y.prototype.u;Y.prototype.openDrawer=Y.prototype.A; -Y.prototype.preload=Y.prototype.preload;Y.prototype.load=Y.prototype.load;window.VTAugment=Y; +function Z(a,b){var c=this;this.g=a;this.j=b||{};mb();this.g.classList.add("vt-augment");this.j.background&&(this.g.style.background=this.j.background);this.j.mode&&"drawer"!==this.j.mode||this.g.classList.add("drawer");document.body.addEventListener("click",function(d){d.target!==c.g&&c.m()});window.addEventListener("message",function(d){switch(d.data){case "VTAUGMENT:READY":c.o(!1);break;case "VTAUGMENT:CLOSE":c.m();break;case "VTAUGMENT:CLEAR_CACHE":if(d=c.g.querySelector("iframe"))d.src=d.src}})} +Z.prototype.load=function(a){if(!a)return this;a=a.split("/").pop();a=pa({token:a});var b=new E(oa(a).toString(),F);(a=this.g.querySelector("iframe"))&&a.parentNode.removeChild(a);this.o(!0);a=this.g;var c={style:{width:"100%",height:"100%",border:"0"},A:0};if(b){var d=document.createElement("div");d.style.display="none";if(!(k.HTMLIFrameElement&&"sandbox"in k.HTMLIFrameElement.prototype))throw Error("The browser does not support sandboxed iframes.");var f={};f.src=b?G(H(b)||I):null;f.srcdoc=null; +f.sandbox="";var e={};b={};for(var h in f)Object.prototype.hasOwnProperty.call(f,h)&&(b[h]=f[h]);for(h in e)Object.prototype.hasOwnProperty.call(e,h)&&(b[h]=e[h]);if(c)for(h in c)if(Object.prototype.hasOwnProperty.call(c,h)){var g=h.toLowerCase();if(g in f)throw Error('Cannot override "'+g+'" attribute, got "'+h+'" with value "'+c[h]+'"');g in e&&delete b[g];b[h]=c[h]}h=null;c="";if(b)for(p in b)if(Object.prototype.hasOwnProperty.call(b,p)){if(!Ra.test(p))throw Error('Invalid attribute name "'+p+ +'".');e=b[p];if(null!=e){f=p;g=e;if(g instanceof v)g=x(g);else if("style"==f.toLowerCase()){e=void 0;if(!n(g))throw Error('The "style" attribute requires goog.html.SafeStyle or map of style properties, '+typeof g+" given: "+g);if(!(g instanceof J)){var D="";for(e in g)if(Object.prototype.hasOwnProperty.call(g,e)){if(!/^[-_a-zA-Z0-9]+$/.test(e))throw Error("Name allows only [-_a-zA-Z0-9], got: "+e);var z=g[e];null!=z&&(z=Array.isArray(z)?fa(z,Ea).join(" "):Ea(z),D+=e+":"+z+";")}g=D?new J(D,K):Da}g instanceof +J&&g.constructor===J?e=g.g:(u("expected object of type SafeStyle, got '"+g+"' of type "+m(g)),e="type_error:SafeStyle");g=e}else{if(/^on/i.test(f))throw Error('Attribute "'+f+'" requires goog.string.Const value, "'+g+'" given.');if(f.toLowerCase()in Sa)if(g instanceof B)g=oa(g).toString();else if(g instanceof E)g=G(g);else if("string"===typeof g)g=(H(g)||I).i();else throw Error('Attribute "'+f+'" on tag "iframe" requires goog.html.SafeUrl, goog.string.Const, or string, value "'+g+'" given.');}g.l&& +(g=g.i());f=f+'="'+C(String(g))+'"';c+=" "+f}}var p="":(h=Va(c),p+=">"+Q(h).toString()+"",h=h.g());(b=b&&b.dir)&&(/^(ltr|rtl|auto)$/i.test(b)?h=0:h=null);p=R(p,h);if(d.tagName&&Wa[d.tagName.toUpperCase()])throw Error("goog.dom.safe.setInnerHtml cannot be used to set content of "+d.tagName+".");if(Xa())for(;d.lastChild;)d.removeChild(d.lastChild);d.innerHTML=Q(p);d.firstChild.setAttribute("sandbox","allow-scripts allow-same-origin allow-popups"); +a.appendChild(d.removeChild(d.firstChild))}return this};Z.prototype.preload=function(){return this};Z.prototype.u=function(){this.g.setAttribute("opened","");return this};Z.prototype.m=function(){this.g.removeAttribute("opened");return this};Z.prototype.o=function(a){var b=this.g,c=b.querySelector("div.spinner");c||(c=document.createElement("div"),c.classList.add("spinner"),b.appendChild(c));b=this.g.querySelector("iframe");c.style.display=a?"block":"none";b&&(b.style.display=a?"none":"block");return this}; +function mb(){var a=document.createElement("style");var b=x(new v(w,"\n .vt-augment {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .vt-augment.drawer {\n width: 700px;\n background: white;\n border: 1px solid #e6e6e6;\n text-align: left;\n z-index: 102;\n position: fixed;\n right: 0;\n top: 0;\n height: 100vh;\n box-shadow: -4px 5px 8px -3px rgba(17, 17, 17, .16);\n animation: slideToRight 0.5s 1 forwards;\n transform: translateX(100vw);\n }\n .vt-augment.drawer[opened] {\n animation: slideFromRight 0.2s 1 forwards;\n }\n .vt-augment > .spinner {\n position: absolute;\n z-index: 199;\n top: calc(50% - 50px);\n left: calc(50% - 50px);\n border: 8px solid rgba(0, 0, 0, 0.2);\n border-left-color: white;\n border-radius: 50%;\n width: 50px;\n height: 50px;\n animation: spin 1.2s linear infinite;\n }\n @keyframes spin {\n to { transform: rotate(360deg); }\n }\n @keyframes slideFromRight {\n 0% {\n transform: translateX(100vw);\n }\n 100% {\n transform: translateX(0);\n }\n }\n @keyframes slideToRight {\n 100% {\n transform: translateX(100vw);\n display: none;\n }\n }\n @media screen and (max-width: 700px) {\n .vt-augment.drawer {\n width: 100%;\n }\n }\n")); +b=0===b.length?Na:new M(b,L);var c=a?new jb(9==a.nodeType?a:a.ownerDocument||a.document):da||(da=new jb),d=c.g;if(S&&d.createStyleSheet)d=d.createStyleSheet(),lb(d,b);else{d=kb(c,"HEAD")[0];if(!d){var f=kb(c,"BODY")[0];d=c.j("HEAD");f.parentNode.insertBefore(d,f)}c=c.j("STYLE");if(null===l)b:{f=k.document;if((f=f.querySelector&&f.querySelector("script[nonce]"))&&(f=f.nonce||f.getAttribute("nonce"))&&aa.test(f)){l=f;break b}l=""}(f=l)&&c.setAttribute("nonce",f);lb(c,b);d.appendChild(c)}document.body.appendChild(a)} +Z.prototype.loading=Z.prototype.o;Z.prototype.closeDrawer=Z.prototype.m;Z.prototype.openDrawer=Z.prototype.u;Z.prototype.preload=Z.prototype.preload;Z.prototype.load=Z.prototype.load;window.VTAugment=Z; }.bind(this))); diff --git a/src/vt-augment.js b/src/vt-augment.js index 1cf1004..1abc4ec 100644 --- a/src/vt-augment.js +++ b/src/vt-augment.js @@ -32,6 +32,7 @@ goog.module('vtaugment'); const Const = goog.require('goog.string.Const'); const SafeHtml = goog.require('goog.html.SafeHtml'); +const SafeUrl = goog.require('goog.html.SafeUrl'); const SafeStyleSheet = goog.require('goog.html.SafeStyleSheet'); const TrustedResourceUrl = goog.require('goog.html.TrustedResourceUrl'); const {installSafeStyleSheet} = goog.require('goog.style'); @@ -105,65 +106,14 @@ const CSS_STYLESHEET = ` } `; - -/** - * Internal cache to store iframe html content. - * @private - */ -class Cache { - constructor() { - this.store = new Map(); - } - - /** - * @public - * @param {string} key - * @return {!string|undefined} - */ - get(key) { - return this.store.get(key); - } - - /** - * @public - * @param {string} key - * @param {!Object|null|string} value - * @return {void} - */ - set(key, value) { - this.store.set(key, value); - } - - /** - * @public - * @param {string} key - * @return {boolean} - */ - remove(key) { - return this.store.delete(key); - } - - /** - * @public - * @return {void} - */ - flush() { - this.store = new Map(); - } -} - - class VTAugment { /** * @param {!Element} container * @param {?Options} options */ constructor(container, options) { - this.cache = new Cache(); this.container = container; this.options = options || {}; - this.isSrcdocSupported = !!('srcdoc' in document.createElement('iframe')) - && SafeHtml.canUseSandboxIframe(); this.createStyleSheet_(); @@ -196,44 +146,10 @@ class VTAugment { load(url) { if (!url) return this; - this.clean_(); - const safeUrl = this.safeUrl_(url); - - // iframe html injection not supported, fallback traditional url load - if (!this.isSrcdocSupported) { - this.loading(true); - this.createIframe_(this.container, safeUrl, undefined); - - return this; - } - - // html not found in cache neither in fetching process, try to preload it - if (!this.getHtml_(url)) { - this.loading(true); - this.preload(url); - } - - // html is still fetching so polling until it is ready - if (this.getHtml_(url) === 'fetching') { - this.loading(true); - const intervalRef = setInterval(() => { - const html = this.getHtml_(url); - - if (html && html !== 'fetching') { - clearInterval(intervalRef); - this.createIframe_(this.container, undefined, html); - this.loading(false); - } else if (html === null) { - clearInterval(intervalRef); - this.createIframe_(this.container, safeUrl, undefined); - } - }, 200); - // html is ready for the iframe injection - } else { - this.createIframe_(this.container, undefined, this.getHtml_(url)); - this.loading(false); - } + this.clean_(); + this.loading(true); + this.createIframe_(this.container, safeUrl); return this; } @@ -243,15 +159,7 @@ class VTAugment { * @param {string} url */ preload(url) { - // Avoid caching if browser doesn't support iframe content injection - if (!this.isSrcdocSupported) { - return; - } - - if (!this.cache.get(url)) { - this.cache.set(url, 'fetching'); - this.getHtmlAjax_(url); - } + return this; } /** @@ -290,15 +198,6 @@ class VTAugment { return this; } - /** - * @private - * @param {string} url - * @return {!string|undefined} - */ - getHtml_(url) { - return this.cache.get(url); - } - /** * @private */ @@ -312,31 +211,21 @@ class VTAugment { /** * @private * @param {!Element} container - * @param {!TrustedResourceUrl|undefined} safeUrl - * @param {string|undefined} html + * @param {!goog.html.SafeUrl|undefined} safeUrl * @return {void} */ - createIframe_(container, safeUrl, html) { + createIframe_(container, safeUrl) { const iframeAttrs = { style: {width: '100%', height: '100%', border: '0'}, frameborder: 0, }; - this.clean_(); - - const temp = document.createElement('div'); - temp.style.display = 'none'; - if (safeUrl) { - const iframe = SafeHtml.createIframe(safeUrl, undefined, iframeAttrs); - - setInnerHtml(temp, iframe); - temp.firstChild.removeAttribute('sandbox'); + const temp = document.createElement('div'); + temp.style.display = 'none'; - container.appendChild(temp.removeChild(temp.firstChild)); - } else { const sandboxedIframe = SafeHtml.createSandboxIframe( - undefined, html, iframeAttrs); + safeUrl, undefined, iframeAttrs); setInnerHtml(temp, sandboxedIframe); temp.firstChild.setAttribute( @@ -376,31 +265,6 @@ class VTAugment { return _spinner; } - /** - * @private - * @param {string} url - */ - getHtmlAjax_(url) { - const xmlhr = new XMLHttpRequest(); - - xmlhr.onreadystatechange = () => { - if (xmlhr.readyState === XMLHttpRequest.DONE) { - if (xmlhr.status === 200) { - this.cache.set(url, xmlhr.response); - } else { - this.loading(false); - this.cache.remove(url); - } - } else { - this.loading(false); - } - }; - - xmlhr.open('GET', url, true); - xmlhr.withCredentials = true; - xmlhr.send(); - } - /** * @private * @param {!MessageEvent} messageEvent @@ -416,7 +280,8 @@ class VTAugment { this.closeDrawer(); break; case 'VTAUGMENT:CLEAR_CACHE': - this.cache.flush(); + var iframe = this.container.querySelector('iframe'); + if (iframe) iframe.src = iframe.src; break; default: } @@ -425,17 +290,17 @@ class VTAugment { /** * @private * @param {string} url - * @return {!TrustedResourceUrl} + * @return {!goog.html.SafeUrl} */ safeUrl_(url) { const token = url.split('/').pop(); - const safeVTUrl = + const vtUrl = Const.from('https://www.virustotal.com/ui/widget/html/%{token}'); - const safeUrl = TrustedResourceUrl.format(safeVTUrl, { + const trustedUrl = TrustedResourceUrl.format(vtUrl, { 'token': token, }); - return safeUrl; + return SafeUrl.fromTrustedResourceUrl(trustedUrl); } } From 41a9687957d955360c4c193a124ff3f3efee288d Mon Sep 17 00:00:00 2001 From: Daniel Pascual Date: Wed, 2 Jun 2021 14:50:28 +0200 Subject: [PATCH 2/3] typing --- dist/vt-augment.min.js | 2 +- src/vt-augment.js | 9 +++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/dist/vt-augment.min.js b/dist/vt-augment.min.js index e3f8ef4..4f31c1d 100644 --- a/dist/vt-augment.min.js +++ b/dist/vt-augment.min.js @@ -55,7 +55,7 @@ a:a.ownerDocument||a.document).createTextNode(String(b)))}else a.innerHTML=b};/* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ -function Z(a,b){var c=this;this.g=a;this.j=b||{};mb();this.g.classList.add("vt-augment");this.j.background&&(this.g.style.background=this.j.background);this.j.mode&&"drawer"!==this.j.mode||this.g.classList.add("drawer");document.body.addEventListener("click",function(d){d.target!==c.g&&c.m()});window.addEventListener("message",function(d){switch(d.data){case "VTAUGMENT:READY":c.o(!1);break;case "VTAUGMENT:CLOSE":c.m();break;case "VTAUGMENT:CLEAR_CACHE":if(d=c.g.querySelector("iframe"))d.src=d.src}})} +function Z(a,b){var c=this;this.g=a;this.j=b||{};mb();this.g.classList.add("vt-augment");this.j.background&&(this.g.style.background=this.j.background);this.j.mode&&"drawer"!==this.j.mode||this.g.classList.add("drawer");document.body.addEventListener("click",function(d){d.target!==c.g&&c.m()});window.addEventListener("message",function(d){switch(d.data){case "VTAUGMENT:READY":c.o(!1);break;case "VTAUGMENT:CLOSE":c.m();break;case "VTAUGMENT:CLEAR_CACHE":(d=c.g.querySelector("iframe"))&&c.load(d.src)}})} Z.prototype.load=function(a){if(!a)return this;a=a.split("/").pop();a=pa({token:a});var b=new E(oa(a).toString(),F);(a=this.g.querySelector("iframe"))&&a.parentNode.removeChild(a);this.o(!0);a=this.g;var c={style:{width:"100%",height:"100%",border:"0"},A:0};if(b){var d=document.createElement("div");d.style.display="none";if(!(k.HTMLIFrameElement&&"sandbox"in k.HTMLIFrameElement.prototype))throw Error("The browser does not support sandboxed iframes.");var f={};f.src=b?G(H(b)||I):null;f.srcdoc=null; f.sandbox="";var e={};b={};for(var h in f)Object.prototype.hasOwnProperty.call(f,h)&&(b[h]=f[h]);for(h in e)Object.prototype.hasOwnProperty.call(e,h)&&(b[h]=e[h]);if(c)for(h in c)if(Object.prototype.hasOwnProperty.call(c,h)){var g=h.toLowerCase();if(g in f)throw Error('Cannot override "'+g+'" attribute, got "'+h+'" with value "'+c[h]+'"');g in e&&delete b[g];b[h]=c[h]}h=null;c="";if(b)for(p in b)if(Object.prototype.hasOwnProperty.call(b,p)){if(!Ra.test(p))throw Error('Invalid attribute name "'+p+ '".');e=b[p];if(null!=e){f=p;g=e;if(g instanceof v)g=x(g);else if("style"==f.toLowerCase()){e=void 0;if(!n(g))throw Error('The "style" attribute requires goog.html.SafeStyle or map of style properties, '+typeof g+" given: "+g);if(!(g instanceof J)){var D="";for(e in g)if(Object.prototype.hasOwnProperty.call(g,e)){if(!/^[-_a-zA-Z0-9]+$/.test(e))throw Error("Name allows only [-_a-zA-Z0-9], got: "+e);var z=g[e];null!=z&&(z=Array.isArray(z)?fa(z,Ea).join(" "):Ea(z),D+=e+":"+z+";")}g=D?new J(D,K):Da}g instanceof diff --git a/src/vt-augment.js b/src/vt-augment.js index 1abc4ec..744044e 100644 --- a/src/vt-augment.js +++ b/src/vt-augment.js @@ -211,7 +211,7 @@ class VTAugment { /** * @private * @param {!Element} container - * @param {!goog.html.SafeUrl|undefined} safeUrl + * @param {!SafeUrl|undefined} safeUrl * @return {void} */ createIframe_(container, safeUrl) { @@ -280,8 +280,9 @@ class VTAugment { this.closeDrawer(); break; case 'VTAUGMENT:CLEAR_CACHE': - var iframe = this.container.querySelector('iframe'); - if (iframe) iframe.src = iframe.src; + const iframe = /** @type {?HTMLIFrameElement} */ ( + this.container.querySelector('iframe')); + if (iframe) this.load(iframe.src); break; default: } @@ -290,7 +291,7 @@ class VTAugment { /** * @private * @param {string} url - * @return {!goog.html.SafeUrl} + * @return {!SafeUrl} */ safeUrl_(url) { const token = url.split('/').pop(); From a5a78cf96f3f6570fc0f69912a89b0f830e9fb46 Mon Sep 17 00:00:00 2001 From: Daniel Pascual Date: Wed, 2 Jun 2021 15:57:24 +0200 Subject: [PATCH 3/3] Update doc & version --- README.md | 13 ++----------- package.json | 2 +- 2 files changed, 3 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 857a878..dc6766c 100644 --- a/README.md +++ b/README.md @@ -61,8 +61,8 @@ Creates a new object with a html element and a set of options. An iframe is dyna *Methods can be chained and can be called in whatever order.* -| [load](#loadurl-string) | [preload](#preloadurl-string) | [openDrawer](#opendrawer) | [closeDrawer](#closedrawer) | [loading](#loading(active-boolean)) -|-----|-----|-----|-----|-----| +| [load](#loadurl-string) | [openDrawer](#opendrawer) | [closeDrawer](#closedrawer) | [loading](#loading(active-boolean)) +|-----|-----|-----|-----| #### load(url: string) @@ -77,15 +77,6 @@ vtaugment.load("...").openDrawer() ``` -#### preload(url: string) - -Load the html and cache it ready to show the content as soon as you call the `load` method. Typically this method is used linked to a `mouseover` event in the link or the surrounded area of the link. - -```js -vtaugment.preload("...") - -``` - #### openDrawer() Open a drawer panel from the right side. (Only works in [drawer](#drawer) mode) diff --git a/package.json b/package.json index f1e3fae..1d9235e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@virustotal/vt-augment", - "version": "1.5.5", + "version": "1.6.0", "description": "Client library that wraps common patterns when interact with the VirusTotal Augment product", "main": "dist/vt-augment.min.js", "keywords": [