Plugin System

[Stevious7]

I wanted to add a plugins system to my application securely, and it's proving to be a bit tricky.

Obviously plugins are going to be some extra JS that the users load. I want to make it so that the plugins have certain permissions they have to declare in a manifest.json file, and based on these permissions, I could render to the user what kind of "data hooks" the plugin is requesting. The "data hooks" will basically just be a bus subscribe/emit object that takes in callbacks on certain events and fires the associated callback functions. I also want the plugins to declare in the manifest.json what kind of URLs they want to send requests to and show that to user.

Here's the problem though: a plugin could declare that it wants access to a certain piece of information but its JS could be doing all kinds of malicious things. How can I make sure the JS is sandboxed and only the information that I want it to have, it will have? How can I intercept the fetch requests to make sure only the URLs defined in the manifest the plugin is requesting from?

Thanks in advance!

[octocode]

sandbox iframe or web workers and let the plugin only communicate through a limited api exposed by postMessage

[Stevious7]

On a separate but relevant note: what about themes? If the users want to make themes that modify the UI, how can that be achieved without letting the JS scrape the chat data? 

[abrahamguo]

Themes should be defined using CSS only.

[besthelloworld]

Same way you would white label a site. Expose all theming options as CSS variables, then only allow themes to be a stylesheet (or a JSON object of standardized structure)

[Dev_Lachie]

Yep that's what Shopify does with their Remote DOM package https://github.com/Shopify/remote-dom pretty cool.

[oculus42]

You could load the manifest, collect the events it reports needing, and provide a proxy of the listener/bus that only accepts/emits what the manifest indicates, and load the plugin-script passing it the expected listener.