I asked this question a little over a week ago on the Atom forums (link below), and didn't receive a response, so I am reposting it here in the hopes that someone may be able to provide insight on my problem.
Recently, I have taken up an open source project which uses Electron as it’s front-end. This project has two requirements: it must be cross-platform, and it must have an embedded web browser (which should be able to browse the web and render content like a typical browser). Considering the rather large footprint Electron has already netted my application, it seems like a bad idea to attempt to use another embedded web framework alongside it. So, in the interest of simplifying my project and retaining the UI built on top of Electron, I am looking into using Electron itself as the web browser. Here’s where I’ve come into a problem.
In a security page for Electron’s documentation, it is explicitly stated that,
it is important to understand … Electron is not a web browser
This quote comes within the context that Electron–or rather the code running on top of it–carries the unique ability to interact with the user’s operating system, unlike typical web applications. The page goes on to say,
displaying arbitrary content from untrusted sources poses a severe security risk that Electron is not intended to handle
At this point, I was tempted to give up on the idea of using Electron as an inbuilt browser, but further down on that same page, you can find another very interesting tidbit:
To display remote content, use the <webview> tag or BrowserView , [and] make sure to disable the nodeIntegration and enable contextIsolation
Link: https://electronjs.org/docs/tutorial/security#isolation-for-untrusted-content
First, in regard to using webviews, Electron’s own documentation recommends outright avoiding them:
Electron’s webview tag is based on Chromium’s webview , which is undergoing dramatic architectural changes. This impacts the stability of webviews , including rendering, navigation, and event routing. We currently recommend to not use the webview tag and to consider alternatives, like iframe , Electron’s BrowserView , or an architecture that avoids embedded content altogether.
Link: https://electronjs.org/docs/api/webview-tag
Seeing as though I cannot avoid embedded content, I opted to look into using a BrowserView, but what I found was not very motivating either. The advice, as it stands, is to do two things:
disable nodeIntegration
enable contextIsolation
After looking at the security and best-practices page, I will also append the following steps:
deny session permission requests from remote content (webcam, microphone, location, etc.)
catch webview elements in creation and strip default privileges
disable the creation of new windows
disable the remote module
That is a fair amount of steps to undergo in securing external content. Not to mention, there were several additional warnings scattered through the best practices page such as the following:
(On verifying webview options before creation)
Again, this list merely minimizes the risk, it does not remove it. If your goal is to display a website, a browser will be a more secure option.
Link: https://electronjs.org/docs/tutorial/security#11-verify-webview-options-before-creation
(On disabling the remote module)
However, if your app can run untrusted content and even if you sandbox your renderer processes accordingly, the remote module makes it easy for malicious code to escape the sandbox and have access to system resources via the higher privileges of the main process.
Link: https://electronjs.org/docs/tutorial/security#15-disable-the-remote-module
Not to mention, upon navigation to the BrowserView page, the whole class is listed as experimental.
This all isn’t even to mention the added attack surface created by Electron, such as a vulnerability in the webview component just last year: CVE-2018-1000136
Now, taking into account all of the above, numerous developers have still opted to create web browsers that routinely consume external and uncontrolled content using Electron.
Browser’s using Electron (linked directly from Electron’s website):
https://electronjs.org/apps/wexond
https://electronjs.org/apps/dot
https://electronjs.org/apps/beaker-browser
To me, it seems irresponsible to submit users to the above security implications as a trade-off for convenience.
That being said, my question is: can you safely, to the point at which you could ensure the integrity of your users, implement web browsing capabilities for uncontrolled content using Electron?
Thank you for your time.
Link to the original post:
https://discuss.atom.io/t/security-implications-in-electron-as-a-web-browser/70653
Some ideas that don't fit into a comment box:
[the project] must have an embedded web browser
So I presume then that this project isn't just a web browser. There's other content there that may have access to Node, but you just want the embedded-web-browser portion of it to be sandboxed appropriately, right?
Regarding the comments about <webview>, yes, it is considered unstable and Electron recommends using a BrowserView instead. I don't think that the fact that it's marked as "experimental" should necessarily deter you from using it (especially considering that the Electron team is recommending it [though maybe as the best of two evils]).
Experimental doesn't imply it's unstable. It can just mean that the Electron team is experimenting with this approach, but this approach may change in the future (at which point I would expect Electron to provide a transition path forward). Though this is one possible interpretation and ultimately Electron would have to comment on this.
The advice... is to do two things:
disable nodeIntegration
enable contextIsolation
I would also make use of the sandbox option inherited from BrowserWindows. BrowserView's docs on the constructor options say:
webPreferences Object (optional) - See BrowserWindow.
which tells me that BrowserView accepts the same options as BrowserWindow.
You would set it up like so:
new BrowserView({ webPreferences: {
sandbox: true,
nodeIntegration: false,
contextIsolation: true,
preload: "./pathToPreloadScript.js"
}});
See more information about this approach here. The preload script is what would expose some Node IPC APIs to the sandboxed content you're loading. Note the Status section at the bottom, which says:
Please use the sandbox option with care, as it is still an experimental feature. We are still not aware of the security implications of exposing some Electron renderer APIs to the preload script
If the content you're loading in the BrowserView never needs to communicate back to the application, then you don't need a preload script at all and can just sandbox the BrowserView.
After looking at the security and best-practices page, I will also append the following steps:
deny session permission requests from remote content (webcam, microphone, location, etc.)
catch webview elements in creation and strip default privileges
disable the creation of new windows
disable the remote module
Sure, those sound reasonable. Note that if your embedded browser needs to be able to open new windows (via window.open or <a target="_blank" />) then you'd have to allow popups.
That is a fair amount of steps to undergo in securing external content.
Sure, but is your main concern with the security of the app, or with how much work it takes to make it secure? Browser developers need to consider similar things to ensure webpages can't get access to the OS. It's just part of the game.
Again, this list merely minimizes the risk, it does not remove it. If your goal is to display a website, a browser will be a more secure option.
This is just saying that if all you're trying to do is display a website, then just use a browser since that's what they're there for.
If you need to do other things, well then you can't use a browser, so you'll have to make your own app, making sure it's reasonably secure.
I think that if you follow what's recommended in the Security document and keep up to date with new Electron releases, then you're doing the best you can do.
As for whether that's good enough, I can't say. It depends on what you're developing and what you're trying to protect against.
However, my thoughts can't substitute the more expert opinions of those on the Electron team. This question could certainly use some guidance from them.
When submitting updates for our extension, we receive the following message with rejection from the Chrome store:
"To have your item reinstated, please ensure:
The purpose of the extension is clear to users; and
The extension either limits its functionality to a narrow focus area of subject matter or to a narrow browser function.
To serve multiple purposes with your extensions, please package each purpose as a separate extension."
Does anyone know the criteria used when determining if the purpose is clear or if the extension is trying to do too much? Our extension is used to demonstrate metrics more conveniently that our clients would normally go to our webpage to see, so it shows a few different but very related items (all of which fit the central theme of showing connected metrics).
Check the Chrome Extension Quality Guideline:
Extensions Quality Guidelines
An extension must have a single purpose that is narrow and
easy-to-understand. Do not create an extension that requires users to
accept bundles of unrelated functionality, such as an email notifier
and a news headline aggregator, or downloads a local executable. If
two pieces of functionality are clearly separate, they should be put
into two different extensions, and users should have the ability to
install and uninstall them separately. For example, functionality that
displays product ratings and reviews, but also injects ads into web
pages, should not be bundled into a single extension. Similarly,
toolbars that provide a broad array of functionality or entry points
into services are better delivered as separate extensions, so that
users can select the services they want.
This is further explained in the FAQS page answering these questions:
Why did Google launch a “single purpose” Chrome extensions policy?
Where can I find the “single purpose” policy?
What does “single purpose” actually mean?
I am developing a chrome extension/app that requires
communicate with Intranet services in UDP binary protocol using chrome.socket APIs
need to extract DOM content from non-app web pages. This could be done using bookmarklet, Browser Actions, page actions, or chrome context menus.
There are two chrome.contextMenus APIs
http://developer.chrome.com/apps/contextMenus.html
http://developer.chrome.com/extensions/contextMenus.html
One for Packaged App, another for Extensions. The former only insert contextMenus to Packages Apps, not normal web pages.
If I need both chrome.socket & invoking from normal webpage capability, do I need to create both an extension as well as an app? That would be very confusing to end users.
Yes, you need both the app and the extension. Apps are intentionally devoid of APIs that modify web pages. That's where extensions come in.
I ran into the same problem and had to make two separate apps for exactly the same reasons. (JSTorrent contextmenu extension && JSTorrent).
I believe there are ways to trigger the install dialog from one to the other, but I have not tried to do this yet. If somebody had examples for how to do this, that would be great to add here!
Consider using <webview> in an app. You'll be able to display web content there, and you can more easily communicate between the app and the content. It will result in a single installable item.
It appears that chrome apps are unable to render as tabs in the browser... I happen to like the chrome tabbing interface and it would be a shame to have to try and re-implement it in html/css/js. Is there really no way to do tab management at the chrome application level? Must all new windows be shell/panel level windows?
I can imagine scenarios for applications where they would want to contribute extension related features to the browser... why are you making it more confusing for users (who now have to install an app and an extension) in order to get the full feature set?
Is there really no room for middle-ground here?
Chrome apps are separate from the browser. This is a very deliberate approach, which is unlikely to change.
For apps to be seen as apps, as opposed to websites, which are always available regardless of connectivity, they need to be seen as separate to a browser. We have found having apps launched and run outside the browser very important for users to conceptualize them as apps.
There are also security reasons to keep apps out of the browser. They have access to APIs that websites and extensions do not have access to, but to make this possible they are also individually sandboxed and have no access to the browser.
Extensions and apps can communicate via messages. It is less than ideal that a user may need to install both an app and an extension; we have been looking at some form of bundling to make this simpler.
I need a way to "disable JavaScript" / "not run JavaScript" in the web browser.
Is it possible to do it using JavaScript or some other automatic way?
Update: reason for this? Easy, there are some "online TV sites" where they use several iframes pointing to "cross site urls" and it is annoying to get several "advertising" pop ups all the time. By coding my own webbrowser "add-on/extension" I've tried to "delete" html nodes and some Javascript and it works for the "main page" code, not for iframe "Cross Domain URL".... so I think disabling javascript AFTER the movie starts, would be a nice solution.
Update 2:
The video I want is a result of a iframe cascade chain.... I've tried all the way to "catch" the final "url" result using fiddler and other tools, but its getting hard since this different "cross domain" communication is sharing "runtime keys" to avoid what I want to accomplish (perhaps with more time I can do it) but this is why I thought that an easy and fast solution would be just disable javascript after the movie starts.
NOTE: other extensions such as Adblock and similars DO NOT work, since the website detect it and the video never loads.
No, it is not possible to programmatically disable the JavaScript on a user's browser using another JavaScript add-on/extension.
However, it may be possible if you use PHP as a proxy to intercept the pages you want, and strip out all script tags. You might even be able to extract the video URL you want and play it using another (flash?) player.
If you are a system administrator and want to disable JavaScript on all your network's computers, please post on SuperUser instead.
You can't disable, but you can overwrite the javascript functions.
alert = function(){}
alert("hello")
You can even kill those iframes by tag name.