docs: add document on contextIsolation (#23474)

* docs: add document on contextIsolation

* fix lint

* chore: link ctx isolation doc from security doc

docs/tutorial/context-isolation.md

@@ -0,0 +1,70 @@
+# Context Isolation
+
+## What is it?
+
+Context Isolation is a feature that ensures that both your `preload` scripts and Electron's internal logic run in a separate context to the website you load in a [`webContents`](../api/web-contents.md).  This is important for security purposes as it helps prevent the website from accessing Electron internals or the powerful APIs your preload script has access to.
+
+This means that the `window` object that your preload script has access to is actually a **different** object than the website would have access to.  For example, if you set `window.hello = 'wave'` in your preload script and context isolation is enabled `window.hello` will be undefined if the website tries to access it.
+
+Every single application should have context isolation enabled and from Electron 12 it will be enabled by default.
+
+## How do I enable it?
+
+From Electron 12, it will be enabled by default. For lower versions it is an option in the `webPreferences` option when constructing `new BrowserWindow`'s.
+
+```javascript
+const mainWindow = new BrowserWindow({
+  webPreferences: {
+    contextIsolation: true
+  }
+})
+```
+
+## Migration
+
+> I used to provide APIs from my preload script using `window.X = apiObject` now what?
+
+Exposing APIs from your preload script to the loaded website is a common usecase and there is a dedicated module in Electron to help you do this in a painless way.
+
+**Before: With context isolation disabled**
+
+```javascript
+window.myAPI = {
+  doAThing: () => {}
+}
+```
+
+**After: With context isolation enabled**
+
+```javascript
+const { contextBridge } = require('electron')
+
+contextBridge.exposeInMainWorld('myAPI', {
+  doAThing: () => {}
+})
+```
+
+The [`contextBridge`](../api/context-bridge.md) module can be used to **safely** expose APIs from the isolated context your preload script runs in to the context the website is running in. The API will also be accessible from the website on `window.myAPI` just like it was before.
+
+You should read the `contextBridge` documentation linked above to fully understand its limitations.  For instance you can't send custom prototypes or symbols over the bridge.
+
+## Security Considerations
+
+Just enabling `contextIsolation` and using `contextBridge` does not automatically mean that everything you do is safe.  For instance this code is **unsafe**.
+
+```javascript
+// ❌ Bad code
+contextBridge.exposeInMainWorld('myAPI', {
+  send: ipcRenderer.send
+})
+```
+
+It directly exposes a powerful API without any kind of argument filtering. This would allow any website to send arbitrary IPC messages which you do not want to be possible. The correct way to expose IPC-based APIs would instead be to provide one method per IPC message.
+
+```javascript
+// ✅ Good code
+contextBridge.exposeInMainWorld('myAPI', {
+  loadPreferences: () => ipcRenderer.invoke('load-prefs')
+})
+```
+

docs/tutorial/security.md

@@ -239,51 +239,10 @@ to enable this behavior.
 Even when you use `nodeIntegration: false` to enforce strong isolation and
 prevent the use of Node primitives, `contextIsolation` must also be used.
 
-### Why?
+### Why & How?
 
-Context isolation allows each of the scripts running in the renderer to make
-changes to its JavaScript environment without worrying about conflicting with
-the scripts in the Electron API or the preload script.
-
-While still an experimental Electron feature, context isolation adds an
-additional layer of security. It creates a new JavaScript world for Electron
-APIs and preload scripts, which mitigates so-called "Prototype Pollution" attacks.
-
-At the same time, preload scripts still have access to the  `document` and
-`window` objects. In other words, you're getting a decent return on a likely
-very small investment.
-
-### How?
-
-```js
-// Main process
-const mainWindow = new BrowserWindow({
-  webPreferences: {
-    contextIsolation: true,
-    preload: path.join(app.getAppPath(), 'preload.js')
-  }
-})
-```
-
-```js
-// Preload script
-
-// Set a variable in the page before it loads
-webFrame.executeJavaScript('window.foo = "foo";')
-
-// The loaded page will not be able to access this, it is only available
-// in this context
-window.bar = 'bar'
-
-document.addEventListener('DOMContentLoaded', () => {
-  // Will log out 'undefined' since window.foo is only available in the main
-  // context
-  console.log(window.foo)
-
-  // Will log out 'bar' since window.bar is available in this context
-  console.log(window.bar)
-})
-```
+For more information on what `contextIsolation` is and how to enable it please
+see our dedicated [Context Isolation](context-isolation.md) document.
 
 
 ## 4) Handle Session Permission Requests From Remote Content