From b141f24068e9c5f6979706383a29db6380ffdf31 Mon Sep 17 00:00:00 2001
From: Ashish Jain <ashishjain0512@gmail.com>
Date: Thu, 10 Feb 2022 17:29:09 +0100
Subject: [PATCH] docs: added info for 'sandbox' securtity level

---
 docs/usage.md | 36 ++++++++++++------------------------
 1 file changed, 12 insertions(+), 24 deletions(-)

diff --git a/docs/usage.md b/docs/usage.md
index 3b9138d8ff..3a6ff2697d 100644
--- a/docs/usage.md
+++ b/docs/usage.md
@@ -50,7 +50,8 @@ The easiest way to integrate mermaid on a web page requires three elements:
 
 2. The `mermaidAPI` call, in a separate `script` tag. Example:
     ```html
-    <script>mermaid.initialize({startOnLoad:true});</script>
+    <script>mermaid.initialize({startOnLoad:true});
+    </script>
     ```
 
 3. A graph definition, inside `<div>` tags labeled `class=mermaid`. Example:
@@ -82,7 +83,8 @@ locate the graph definitions inside the `div` tags with `class="mermaid"` and re
       B-->D(fa:fa-spinner);
   </div>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
- <script>mermaid.initialize({startOnLoad:true});</script>
+ <script>mermaid.initialize({startOnLoad:true});
+</script>
 </body>
 </html>
 ```
@@ -105,17 +107,19 @@ Mermaid can load multiple diagrams, in the same page.
 
 | Parameter     | Description                       | Type   | Required | Values                    |
 | ------------- | --------------------------------- | ------ | -------- | ------------------------- |
-| securityLevel | Level of trust for parsed diagram | String | Required | Strict, Loose, antiscript |
+| securityLevel | Level of trust for parsed diagram | String | Required | Strict, Loose, antiscript , sandbox|
 
 Values:
 
 -   **strict**: (**default**) tags in text are encoded, click functionality is disabled
 -   **loose**: tags in text are allowed, click functionality is enabled
 -   **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled
+-   **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This prevent any javascript running in the context. This may hinder interactive functionality of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc. 
 
 
 ```note
 This changes the default behaviour of mermaid so that after upgrade to 8.2,unless the `securityLevel` is not changed, tags in flowcharts are encoded as tags and clicking is disabled.
+**sandbox** security level is still in the beta version. 
 ```
 
 **If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing . This allows clicks and tags are allowed.**
@@ -203,20 +207,10 @@ The example below show an outline of how this could be used. The example just lo
 <script src="mermaid.js"></script>
 
 <script>
-    mermaid.mermaidAPI.initialize({
-        startOnLoad:false
-    });
-    $(function(){
-        // Example of using the API
-        var element = document.querySelector("#graphDiv");
-
-        var insertSvg = function(svgCode, bindFunctions){
-            element.innerHTML = svgCode;
-        };
-
-        var graphDefinition = 'graph TB\na-->b';
-        var graph = mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
-    });
+    mermaid.mermaidAPI.initialize({ startOnLoad:false }); $(function(){ // Example of using the API var
+element = document.querySelector("#graphDiv"); var insertSvg = function(svgCode, bindFunctions){
+    element.innerHTML = svgCode; }; var graphDefinition = 'graph TB\na-->b'; var graph =
+mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg); });
 </script>
 ```
 
@@ -345,13 +339,7 @@ on what kind of integration you use.
 ```html
 <script src="../dist/mermaid.js"></script>
 <script>
-    var config = {
-        startOnLoad:true,
-        flowchart:{
-            useMaxWidth:false,
-            htmlLabels:true
-        }
-    };
+    var config = { startOnLoad:true, flowchart:{ useMaxWidth:false, htmlLabels:true } };
     mermaid.initialize(config);
 </script>
 ```