Electron - JS Live Render in App - Security Inquiry


#1

Hi everyone,

I am trying to understand the possible security limitations and abilities regarding creating an app in Electron that can successfully render HTML/CSS/JS/etc., live in app. Specially - Javascript, etc.

Basically as one found example which has me questioning this ability: Bootstrap Studio allows live page editing and rendering (HTML/CSS) in app as well as external preview via browsers. However live JS rendering in app (JQuery, Vanilla JS, Libraries, etc.,) is disabled and stated by the developer as a security risk in the Electron app (see quotes below).

Is this indeed a security risk or limitation within an Electron app? Or can it be accomplished to allow for securely rendering JS in app via a live preview? In my research I can’t seem to find a definitive answer only fragmented bits of information in various places. But perhaps I am querying the wrong topics and google searches.

Any general or specific insight, information or the proper needed methods and techniques to consider regarding how this could be successfully accomplished “securely” in an Electron App, or the specific reasons why it in fact can’t be successfully accomplished based upon Electrons current security limitations would be very helpful to understand.

Another upcoming Electron app I have come across is TandemCode (Tandem UI Builder) which seems to by contrast suggest it will run and preview anything directly in app (Javascript. ReactJS, VueJS, Frameworks, etc.,).

So are there any existing apps anyone is aware of created with Electron that demonstrate this ability to render JS live successfully and securely in app? Or why for example BootStrap Studio or other apps built with Electron would be limited in doing so?

I trust that all made sense. Thanks in advance everyone for your time and knowledge. I’m looking forward to everyones responses and feedback.

Thanks again,

:atom: :wink:


Below I included some quotes / discussions found on the BootStrap Studio forum from the developer discussing the topic of security and running JS / etc., in an Electron app.

[details=Click to see Security Quotes and Discussion]> https://bootstrapstudio.io/forums/topic/export-script-coding-with-js-and-node/#post-5368

Bootstrap Studio is indeed developed in Electron, but we can’t execute your scripts in the same process for security reasons. Your code needs to be run in a separate process.


https://bootstrapstudio.io/forums/topic/with-in-app-preview-support/#post-3957
The Object element is a powerful feature that we would like to add to the app eventually. The only issue that we have with it, is that it can be used to embed things like flash, pdfs and web pages which can’t be properly secured for display within the application itself. Even SVG files embedded within can become a security concern, as they can execute JS code.


https://bootstrapstudio.io/forums/topic/javascript-not-working-inside-bootstrap-studio/#post-796
JavaScript is not run in Bootstrap Studio for security purposes, and we won’t be adding support for this until we are sure that it is safe.


https://bootstrapstudio.io/forums/topic/version-2-2-is-out/#post-352
One thing to keep in mind is that in the app itself HTML is sanitized and JavaScript is removed for security reasons. But your code is included exactly as it is when you preview and export your pages.


https://bootstrapstudio.io/forums/topic/version-2-2-is-out/#post-372
This is the only way we can make it work securely. Unfortunately this means that in some cases what you see in the app itself will be different from the preview and export.


https://bootstrapstudio.io/forums/topic/live-preview-bootstrap-js-component/#post-321
JavaScript is not run in Bootstrap Studio for security purposes, so right now you need to preview in your browser. Once we develop a secure way of running JavaScript, we will enable it. We will have time to work on this in the next releases.


https://bootstrapstudio.io/forums/topic/version-2-4-5-is-here/#post-2544
It won’t be possible to run JavaScript, unfortunately. If we enable it, it is enough to have a single while(true){} in your code and the program would freeze. If you know of an app that permits JS in their design view do share. I am curious how they could have solved the issue.


https://bootstrapstudio.io/forums/topic/version-2-5-1-is-out/#post-3102
JS can’t be added to the application, sorry. It is not technically possible to do safely, and it will be catastrophic to expect people to never screw up their code. It can only be done in a new process with its own window, but by that point you have an alternative to the current Preview, which you can already use to test your code.


https://bootstrapstudio.io/forums/topic/allow-php-variables-etc/#post-1296
Thank you for the suggestion! < and > are escaped for security reasons and I think it will be best to not change it. But you can use Custom Code for this.


https://bootstrapstudio.io/forums/topic/issue-in-adding-custom-attributes-to-objects/#post-690

  • on* attributes aren’t supported for security purposes and they are ignored in the application (and as you’ve seen, they are stripped from the preview and export code as well).[/details]

#2

Have you read the security tutorial?

in particular the part about:

With that in mind, be aware that displaying arbitrary content from untrusted sources poses a severe security risk that Electron is not intended to handle. In fact, the most popular Electron apps (Atom, Slack, Visual Studio Code, etc) display primarily local content (or trusted, secure remote content without Node integration) – if your application executes code from an online source, it is your responsibility to ensure that the code is not malicious.

Imagine if browsers gave every random website full file system access; this is what happens if you naively load uncontrolled content inside an Electron app.

If I were interested in safely loading arbitrary web content into an Electron application I’d start by looking at what Brave is doing:


#3

Hi @john,

Thanks so much for your response.

Yes that’s the first thing I reviewed as its the most prominent match when searching on Electron Security.

As well as reviewing many other articles and discussions, including discussion related to Brave. I also have searched rather extensively trying to comprehend the intricacies and pitfalls of Electron Security, before posting my question here. But was still left with much doubt, so I decided to try and get insight from the community.

Here are just a few of my research queries

I am not looking to build a browser or an app that exposes itself to anything it can load in remotely. But a development app which can securely live render the HTML / CSS / JS / etc., which the user inputs and creates.

Thus the BootStrap Studio example seemed like a good comparative example, but as discussed posed many questions regarding Electron Security by its developers (see the quotes provided above). But then TandemCode as another example seems to contrast the BootStrap Studio developer claims and seemingly will allow for much broader abilities of live render? I guess I would not consider using and rendering Vanilla JS, JQuery, CDN Libraries, etc., as arbitrary web content to be live previewed in app?

By contrast is NWJS a more secure model? Take Pinegrow as an example, it can run Javascript directly within its live preview in app, and can also load remote websites, etc. Would it be considered vulnerable? Or is NWJS more capable of securely sandboxing vs Electrons current security state?

Thanks again!

And thanks in advance to anyone else whom would like to provide further insight and discussion as well.

:atom: :wink:


#4

Do I need to formulate my inquiry differently?

I thought the pool of seasoned Electron developers here could shed some clarity on this topic. Was this the wrong place to pose such a question, is there a better place to inquire about this? Should I instead seek to contact the Electron team directly?

Thanks again everyone, I really appreciate anyone’s time and input.

:atom: :wink:


#5

If the JS is authored by the user then there is no security issue, if the user writes malicious code that trashes their system that’s their fault. Security issues arise when running unverified third-party code in Electron, if malicious third-party code trashes the user’s system that’s your fault. Electron was built to provide unrestricted access to OS resources, to that end the Chromium sandbox was disabled. Experimental sandbox support was shipped in Electron 1.4.2 but it is still not as secure as Chrome’s sandbox, so cannot be relied on to prevent malicious code from causing havoc to the user’s system.


#6

Hi @enlight, thank you very much for your response.

Would this also include the likes of common widely used libraries such as loading JQuery, Vanilla JS, Libraries, various Frameworks, etc., or even loading the CDN versions of those common Libraries / Frameworks? I mean they may have file access abilities but are not made for/with malicious purposes in themselves.

Is the sandbox issue still being addressed further? That seems like a gaping hole in the Electron workflow, capabilities and potential to not have been in place or dealt with out of the gate. Do you know is it the same for NWJS or is it better sandboxed?

Thanks for your input, much appreciated @enlight.


#7

Presumably you’d verify that the libraries you use to build your app are not malicious. Loading libraries from a CDN is less secure than loading them from the app installation directory.

I believe the sandbox is still being worked on, you can read some recent discussion about it at https://github.com/electron/electron/issues/9611. Electron was designed to build desktop apps that only run the code that they are shipped with - just like a native desktop app only runs the code it was compiled with.

I can’t comment on NWJS, I’ve never used it.


#8

Thanks so much for your input @enlight,

Well, it seems that for now this is not really possible cleanly and natively, without perhaps extending things one’s self. I was really hoping to be proven incorrect that it was in fact possible with Electron but that I was just unaware of the correct methods or approach to do so.

I have to admit it remains rather odd to me that such sandboxing and security still remains omitted with Electron and is not already built in. I mean Electron launched only about 3 years ago. Such security and requirements should have been obvious from the onset in my opinion, as connected apps, network resources, and the like were nothing new even then.

Thanks again. If something changes concerning this area of Electron, feel free to post any updates in this thread.

:atom: :wink: