diff --git a/dist/components/proxy-middleware/rule_action_processor/processors/insert_processor.js b/dist/components/proxy-middleware/rule_action_processor/processors/insert_processor.js index 6b75c4e..19741e8 100644 --- a/dist/components/proxy-middleware/rule_action_processor/processors/insert_processor.js +++ b/dist/components/proxy-middleware/rule_action_processor/processors/insert_processor.js @@ -48,28 +48,39 @@ const handleCSSScripts = (cssScripts, incomingDOM) => { */ const includeCSS = (script, incomingDOM) => { if (script.type === requestly_core_1.CONSTANTS.SCRIPT_TYPES.URL) { - addRemoteCSS(script.value, incomingDOM); + addRemoteCSS(script.value, script.attributes, incomingDOM); } else if (script.type === requestly_core_1.CONSTANTS.SCRIPT_TYPES.CODE) { - embedCSS(script.value, incomingDOM); + embedCSS(script.value, script.attributes, incomingDOM); } }; -const addRemoteCSS = (src, incomingDOM) => { +const addRemoteCSS = (src, attributes, incomingDOM) => { var link = incomingDOM.createElement("link"); + if (attributes) { + attributes.forEach(({ name: attrName, value: attrVal }) => { + link.setAttribute(attrName, attrVal !== null && attrVal !== void 0 ? attrVal : ""); + }); + } + else { + link.type = "text/css"; + link.rel = "stylesheet"; + } link.href = src; - link.type = "text/css"; - link.rel = "stylesheet"; - link.className = getScriptClassAttribute(); + link.classList.add(getScriptClassAttribute()); (incomingDOM.head || incomingDOM.documentElement).appendChild(link); }; const getScriptClassAttribute = () => { return requestly_core_1.CONSTANTS.PUBLIC_NAMESPACE + "SCRIPT"; }; -const embedCSS = (css, incomingDOM) => { +const embedCSS = (css, attributes, incomingDOM) => { var style = incomingDOM.createElement("style"); - style.type = "text/css"; style.appendChild(incomingDOM.createTextNode(css)); - style.className = getScriptClassAttribute(); + if (attributes) { + attributes.forEach(({ name: attrName, value: attrVal }) => { + style.setAttribute(attrName, attrVal !== null && attrVal !== void 0 ? attrVal : ""); + }); + } + style.classList.add(getScriptClassAttribute()); (incomingDOM.head || incomingDOM.documentElement).appendChild(style); }; const handleJSLibraries = (libraries, incomingDOM) => { @@ -86,21 +97,28 @@ const addLibraries = (libraries, indexArg, incomingDOM) => { addLibraries(libraries, index + 1, incomingDOM); }; if (library) { - addRemoteJS(library.src, addNextLibraries, incomingDOM); + addRemoteJS(library.src, null, addNextLibraries, incomingDOM); } else { addNextLibraries(); } }; -const addRemoteJS = (src, callback, incomingDOM) => { +const addRemoteJS = (src, attributes, callback, incomingDOM) => { var script = incomingDOM.createElement("script"); // NOT WORKING // if (typeof callback === "function") { // script.onload = callback // } - script.type = "text/javascript"; + if (attributes) { + attributes.forEach(({ name: attrName, value: attrVal }) => { + script.setAttribute(attrName, attrVal !== null && attrVal !== void 0 ? attrVal : ""); + }); + } + else { + script.type = "text/javascript"; + } script.src = src; - script.className = getScriptClassAttribute(); + script.classList.add(getScriptClassAttribute()); (incomingDOM.head || incomingDOM.documentElement).appendChild(script); // HOTFIX callback(); @@ -132,23 +150,27 @@ const includeJSScriptsInOrder = (scripts, callback, indexArg, incomingDOM) => { }; const includeJS = (script, callback, incomingDOM) => { if (script.type === requestly_core_1.CONSTANTS.SCRIPT_TYPES.URL) { - addRemoteJS(script.value, callback, incomingDOM); + addRemoteJS(script.value, script.attributes, callback, incomingDOM); return; } if (script.type === requestly_core_1.CONSTANTS.SCRIPT_TYPES.CODE) { - executeJS(script.value, null, incomingDOM); + executeJS(script.value, script.attributes, incomingDOM); } typeof callback === "function" && callback(); }; -const executeJS = (code, shouldRemove, incomingDOM) => { +const executeJS = (code, attributes, incomingDOM) => { const script = incomingDOM.createElement("script"); - script.type = "text/javascript"; - script.className = getScriptClassAttribute(); + if (attributes) { + attributes.forEach(({ name: attrName, value: attrVal }) => { + script.setAttribute(attrName, attrVal !== null && attrVal !== void 0 ? attrVal : ""); + }); + } + else { + script.type = "text/javascript"; + } + script.classList.add(getScriptClassAttribute()); script.appendChild(incomingDOM.createTextNode(code)); const parent = incomingDOM.head || incomingDOM.documentElement; parent.appendChild(script); - if (shouldRemove) { - parent.removeChild(script); - } }; exports.default = process_insert_action; diff --git a/package-lock.json b/package-lock.json index 1e68d0e..7a5329d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@requestly/requestly-proxy", - "version": "1.2.1", + "version": "1.3.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@requestly/requestly-proxy", - "version": "1.2.1", + "version": "1.3.0", "license": "ISC", "dependencies": { "@requestly/requestly-core": "^1.0.3", diff --git a/package.json b/package.json index 93759af..c080959 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@requestly/requestly-proxy", - "version": "1.2.1", + "version": "1.3.0", "description": "Proxy that gives superpowers to all the Requestly clients", "main": "dist/index.js", "scripts": { diff --git a/src/components/proxy-middleware/rule_action_processor/processors/insert_processor.js b/src/components/proxy-middleware/rule_action_processor/processors/insert_processor.js index 4701445..90ee491 100644 --- a/src/components/proxy-middleware/rule_action_processor/processors/insert_processor.js +++ b/src/components/proxy-middleware/rule_action_processor/processors/insert_processor.js @@ -64,18 +64,27 @@ const handleCSSScripts = (cssScripts, incomingDOM) => { */ const includeCSS = (script, incomingDOM) => { if (script.type === GLOBAL_CONSTANTS.SCRIPT_TYPES.URL) { - addRemoteCSS(script.value, incomingDOM); + addRemoteCSS(script.value, script.attributes, incomingDOM); } else if (script.type === GLOBAL_CONSTANTS.SCRIPT_TYPES.CODE) { - embedCSS(script.value, incomingDOM); + embedCSS(script.value, script.attributes, incomingDOM); } }; -const addRemoteCSS = (src, incomingDOM) => { +const addRemoteCSS = (src, attributes, incomingDOM) => { var link = incomingDOM.createElement("link"); + + if (attributes) { + attributes.forEach(({ name: attrName, value: attrVal }) => { + link.setAttribute(attrName, attrVal ?? ""); + }); + } else { + link.type = "text/css"; + link.rel = "stylesheet"; + } + link.href = src; - link.type = "text/css"; - link.rel = "stylesheet"; - link.className = getScriptClassAttribute(); + link.classList.add(getScriptClassAttribute()); + (incomingDOM.head || incomingDOM.documentElement).appendChild(link); }; @@ -83,11 +92,17 @@ const getScriptClassAttribute = () => { return GLOBAL_CONSTANTS.PUBLIC_NAMESPACE + "SCRIPT"; }; -const embedCSS = (css, incomingDOM) => { +const embedCSS = (css, attributes, incomingDOM) => { var style = incomingDOM.createElement("style"); - style.type = "text/css"; style.appendChild(incomingDOM.createTextNode(css)); - style.className = getScriptClassAttribute(); + + if (attributes) { + attributes.forEach(({ name: attrName, value: attrVal }) => { + style.setAttribute(attrName, attrVal ?? ""); + }); + } + + style.classList.add(getScriptClassAttribute()); (incomingDOM.head || incomingDOM.documentElement).appendChild(style); }; @@ -109,21 +124,28 @@ const addLibraries = (libraries, indexArg, incomingDOM) => { }; if (library) { - addRemoteJS(library.src, addNextLibraries, incomingDOM); + addRemoteJS(library.src, null, addNextLibraries, incomingDOM); } else { addNextLibraries(); } }; -const addRemoteJS = (src, callback, incomingDOM) => { +const addRemoteJS = (src, attributes, callback, incomingDOM) => { var script = incomingDOM.createElement("script"); // NOT WORKING // if (typeof callback === "function") { // script.onload = callback // } - script.type = "text/javascript"; + if (attributes) { + attributes.forEach(({ name: attrName, value: attrVal }) => { + script.setAttribute(attrName, attrVal ?? ""); + }); + } else { + script.type = "text/javascript"; + } + script.src = src; - script.className = getScriptClassAttribute(); + script.classList.add(getScriptClassAttribute()); (incomingDOM.head || incomingDOM.documentElement).appendChild(script); // HOTFIX @@ -173,27 +195,33 @@ const includeJSScriptsInOrder = (scripts, callback, indexArg, incomingDOM) => { const includeJS = (script, callback, incomingDOM) => { if (script.type === GLOBAL_CONSTANTS.SCRIPT_TYPES.URL) { - addRemoteJS(script.value, callback, incomingDOM); + addRemoteJS(script.value, script.attributes, callback, incomingDOM); return; } if (script.type === GLOBAL_CONSTANTS.SCRIPT_TYPES.CODE) { - executeJS(script.value, null, incomingDOM); + executeJS(script.value, script.attributes, incomingDOM); } typeof callback === "function" && callback(); }; -const executeJS = (code, shouldRemove, incomingDOM) => { +const executeJS = (code, attributes, incomingDOM) => { const script = incomingDOM.createElement("script"); - script.type = "text/javascript"; - script.className = getScriptClassAttribute(); + + if (attributes) { + attributes.forEach(({ name: attrName, value: attrVal }) => { + script.setAttribute(attrName, attrVal ?? ""); + }); + } else { + script.type = "text/javascript"; + } + + script.classList.add(getScriptClassAttribute()); + script.appendChild(incomingDOM.createTextNode(code)); const parent = incomingDOM.head || incomingDOM.documentElement; parent.appendChild(script); - if (shouldRemove) { - parent.removeChild(script); - } }; export default process_insert_action;