Refactored extension to avoid eval() and instead use executeScript and message communication

This commit is contained in:
Fabio Manganiello 2020-07-04 00:53:14 +02:00
parent ca9ec58244
commit 632b248dc5
6 changed files with 308 additions and 46 deletions

View File

@ -1,8 +1,10 @@
import utils from './utils';
import axios from 'axios';
import Mercury from '@postlight/mercury-parser';
global.browser = require('webextension-polyfill');
const menu = {
const app = {
hosts: {},
actions: {},
scripts: {},
@ -76,6 +78,112 @@ const menu = {
await utils.methods.runScript(this.scripts[action].script, this.hosts[host], tab, target);
}
});
browser.runtime.onConnect.addListener(port => {
switch (port.name) {
case 'action':
port.onMessage.addListener(async message => {
switch (message.type) {
case 'run':
const ret = await utils.methods.run(message.action, message.host);
port.postMessage(ret);
break;
}
});
break;
case 'url':
port.onMessage.addListener(async message => {
const tab = await utils.methods.getCurrentTab();
switch (message.type) {
case 'get':
port.postMessage(tab.url);
break;
case 'set':
await browser.tabs.sendMessage(tab.id, { type: 'setURL', url: message.url }, {});
break;
case 'open':
await browser.tabs.create({
url: message.url,
});
break;
}
});
break;
case 'dom':
port.onMessage.addListener(async message => {
const tab = await utils.methods.getCurrentTab();
switch (message.type) {
case 'get':
const dom = await browser.tabs.sendMessage(tab.id, { type: 'getDOM' }, {});
port.postMessage(dom);
break;
case 'set':
await browser.tabs.sendMessage(tab.id, { type: 'setDOM', html: message.html }, {});
break;
}
});
break;
case 'notify':
port.onMessage.addListener(async message => {
switch (message.type) {
case 'run':
utils.methods.notify(message.message, message.title, message.error);
break;
}
});
break;
case 'axios':
port.onMessage.addListener(async message => {
const method = axios[message.type.toLowerCase()];
const response = await method(message.url, ...message.args);
port.postMessage({
config: {
data: response.config.data,
headers: response.config.headers,
maxContentLength: response.config.maxContentLength,
method: response.config.method,
timeout: response.config.timeout,
url: response.config.url,
xsrfCookieName: response.config.xsrfCookieName,
xsrfHeaderName: response.config.xsrfHeaderName,
},
headers: response.headers,
data: response.data,
status: response.status,
statusText: response.statusText,
});
});
break;
case 'mercury':
port.onMessage.addListener(async message => {
switch (message.type) {
case 'parse':
const response = await Mercury.parse(message.url, {
contentType: 'html',
html: message.html,
});
port.postMessage(response);
break;
}
});
break;
}
});
},
async create() {
@ -84,8 +192,9 @@ const menu = {
};
const onCreate = () => {
// noinspection JSIgnoredPromiseFromCall
menu.create();
app.create().then(() => {
console.debug('Extension context created');
});
};
onCreate();

View File

@ -4,23 +4,24 @@ const context = {
targetElement: null,
};
browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
browser.runtime.onMessage.addListener(async message => {
switch (message.type) {
case 'getURL':
sendResponse(window.location.href);
return Promise.resolve(window.location.href);
case 'setURL':
window.location.href = message.url;
break;
case 'getDOM':
sendResponse(document.getElementsByTagName('html')[0].outerHTML);
break;
return Promise.resolve(document.getElementsByTagName('html')[0].outerHTML);
case 'setDOM':
document.getElementsByTagName('html')[0].innerHTML = message.html;
document.documentElement.innerHTML = message.html;
break;
case 'getTargetElement':
sendResponse(context.targetElement ? context.targetElement.outerHTML : null);
break;
return Promise.resolve(context.targetElement ? context.targetElement.outerHTML : null);
}
});

View File

@ -2,7 +2,6 @@
"name": "platypush",
"description": "Web extension for interacting with Platypush instances via browser and creating custom browser actions",
"version": "0.1.4",
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"manifest_version": 2,
"icons": {
"16": "icons/icon-16.png",

View File

@ -157,9 +157,9 @@ export default {
selectedScript: Object,
scriptTemplate: {
type: String,
default: `async (app, host, browser, tab, target, ...args) => {
default: `async (app, args) => {
// Run some action on the host
const status = await app.run({ name: 'music.mpd.pause' }, host);
const status = await app.run({ name: 'music.mpd.pause' }, args.host);
// Send notifications to the browser
app.notify(status.state, 'Music status changed');
@ -457,7 +457,7 @@ export default {
this.saveParams.name = action.displayName;
this.saveParams.color = action.color;
this.saveParams.iconClass = action.iconClass;
this.selectedCategories = action.categories;
this.selectedCategories = action.categories.map(cat => (typeof cat === 'string' ? { text: cat } : cat));
this.selectedHosts = action.hosts;
if (this.selectedAction) {

126
src/script.js Normal file
View File

@ -0,0 +1,126 @@
export default {
api: `{
run: (action, host) => {
return new Promise((resolve) => {
const port = browser.runtime.connect({ name: 'action' });
port.onMessage.addListener(msg => {
resolve(msg);
});
port.postMessage({
type: 'run',
host: host,
action: action,
});
});
},
getURL: () => {
return new Promise((resolve) => {
const port = browser.runtime.connect({ name: 'url' });
port.onMessage.addListener(url => {
resolve(url);
});
port.postMessage({
type: 'get',
});
});
},
setURL: (url) => {
const port = browser.runtime.connect({ name: 'url' });
port.postMessage({
type: 'set',
url: url,
});
},
openTab: (url) => {
const port = browser.runtime.connect({ name: 'url' });
port.postMessage({
type: 'open',
url: url,
});
},
axios: ['get', 'post', 'put', 'delete', 'head', 'options', 'patch'].reduce((api, method) => {
api[method] = (url, ...args) => {
return new Promise((resolve) => {
const port = browser.runtime.connect({ name: 'axios' });
port.onMessage.addListener(response => {
resolve(response);
});
port.postMessage({
type: method,
url: url,
args: args,
});
});
};
return api;
}, {}),
mercury: {
parse: (url, html) => {
return new Promise((resolve) => {
const port = browser.runtime.connect({ name: 'mercury' });
port.onMessage.addListener(response => {
resolve(response);
});
port.postMessage({
type: 'parse',
url: url,
html: html,
});
});
},
},
getDOM: () => {
return new Promise((resolve) => {
const port = browser.runtime.connect({ name: 'dom' });
port.onMessage.addListener(dom => {
dom = (new DOMParser()).parseFromString(dom, 'text/html');
resolve(dom);
});
port.postMessage({
type: 'get',
});
});
},
setDOM: (html) => {
return new Promise((resolve) => {
const port = browser.runtime.connect({ name: 'dom' });
port.postMessage({
type: 'set',
html: html,
});
});
},
HTML2DOM: (html, isRoot = false) => {
const dom = new DOMParser().parseFromString(html, 'text/html').documentElement;
if (isRoot)
return dom;
return dom.getElementsByTagName('body')[0].firstChild;
},
notify: (msg, title = 'platypush', error = false) => {
const port = browser.runtime.connect({ name: 'notify' });
port.postMessage({
type: 'run',
message: msg,
title: title,
error: error,
});
},
}`,
};
// vim:sw=2:ts=2:et:

View File

@ -1,6 +1,6 @@
import axios from 'axios';
import Mercury from '@postlight/mercury-parser';
import Vue from 'vue';
import _script from './script';
export default {
data() {
@ -10,8 +10,28 @@ export default {
},
methods: {
notify(message, title = 'platypush') {
browser.notifications.create({
async notify(message, title = 'platypush', error = false) {
let msg = '';
if (title && title.length) {
msg = `${title}`;
}
if (message && message.length) {
if (msg.length > 0) {
msg += ': ';
}
msg += message;
}
if (msg.length) {
if (error) {
console.error(msg);
} else {
console.log(msg);
}
}
await browser.notifications.create({
type: 'basic',
title: title,
message: message,
@ -25,7 +45,7 @@ export default {
});
if (!tabs.length) {
this.notify('', 'No active tab');
await this.notify('No active tab', '', true);
return;
}
@ -78,7 +98,7 @@ export default {
}, {});
} else {
args = Object.entries(args)
.filter(([name, value]) => value != null && value.length)
.filter(([, value]) => value != null && value.length)
.reduce((obj, [name, value]) => {
obj[name] = value;
return obj;
@ -86,8 +106,8 @@ export default {
}
Object.keys(args).forEach(name => {
// URL wildcard
if (args[name] === '$URL$') {
// URL wildcard
if (!currentURL) {
console.warn('Unable to get the current URL');
} else {
@ -115,28 +135,46 @@ export default {
const errors = msg.data.response.errors;
if (errors && errors.length) {
throw new Error(errors[0]);
// noinspection ExceptionCaughtLocallyJS
throw errors[0];
}
return msg.data.response.output;
} catch (e) {
this.notify(e.toString(), 'Request error');
await this.notify(e.toString(), 'Request error');
throw e;
}
},
prepareScript(script, host, tab, target, ...args) {
args = JSON.stringify({
host: host,
tabId: tab ? tab.id : null,
target: typeof target === 'object' ? target.outerHTML : target,
...args,
});
return `(${script})(${_script.api}, ${args})`;
},
async runScript(script, host, tab, target, ...args) {
this.loading = true;
try {
if (typeof script === 'string') {
/* eslint no-eval: "off" */
script = eval(this.script);
if (!tab) {
tab = await this.getCurrentTab();
}
return await script(this, host, browser, tab, target, ...args);
if (!tab) {
return;
}
const code = this.prepareScript(script, host, tab, target, ...args);
return await browser.tabs.executeScript(tab.id, {
code: code,
});
} catch (e) {
this.notify(e.message, 'Script error');
await this.notify(e.message, 'Script error', true);
throw e;
} finally {
this.loading = false;
@ -182,7 +220,7 @@ export default {
}
},
async getScripts(parse = true) {
async getScripts() {
this.loading = true;
try {
@ -192,10 +230,6 @@ export default {
}
return Object.entries(JSON.parse(response.scripts)).reduce((obj, [name, info]) => {
if (parse && typeof info.script === 'string') {
info.script = eval(info.script);
}
obj[name] = info;
return obj;
}, {});
@ -224,7 +258,7 @@ export default {
actions[action.displayName] = action;
await this.saveActions(actions);
this.notify('You can find this action under the Local Actions menu', 'Action saved');
await this.notify('You can find this action under the Local Actions menu', 'Action saved');
},
async saveScripts(scripts) {
@ -242,7 +276,7 @@ export default {
await browser.storage.local.set({ scripts: JSON.stringify(scripts) });
} catch (e) {
this.notify(e.message, 'Error on script save');
await this.notify(e.message, 'Error on script save');
} finally {
this.loading = false;
}
@ -258,7 +292,7 @@ export default {
scripts[script.displayName] = script;
await this.saveScripts(scripts);
this.notify('You can find this script under the Local Actions menu', 'Script saved');
await this.notify('You can find this script under the Local Actions menu', 'Script saved');
},
async loadConfig() {
@ -293,7 +327,7 @@ export default {
if (typeof host === 'string') {
const hosts = await this.getHosts();
if (!(host in hosts)) {
this.notify(host, 'No such Platypush host');
await this.notify(host, 'No such Platypush host');
return;
}
@ -325,7 +359,7 @@ export default {
host
);
this.notify(`Configugration successfully backed up to ${host.name}`, 'Backup successful');
await this.notify(`Configuration successfully backed up to ${host.name}`, 'Backup successful');
} finally {
this.loading = false;
}
@ -335,7 +369,7 @@ export default {
if (typeof host === 'string') {
const hosts = await this.getHosts();
if (!(host in hosts)) {
this.notify(host, 'No such Platypush host');
await this.notify(host, 'No such Platypush host');
return;
}
@ -347,15 +381,13 @@ export default {
const filename = `${basedir}/config.json`;
try {
const config = await this.run(
return await this.run(
{
name: 'file.read',
args: { file: filename },
},
host
);
return config;
} finally {
this.loading = false;
}
@ -395,11 +427,6 @@ export default {
return form.name.value.length && form.address.value.length && this.isPortValid(form.port.value) && this.isPortValid(form.websocketPort.value);
},
},
created() {
this.$axios = axios;
this.$mercury = Mercury;
},
};
export const bus = new Vue();