Skip to content

Commit

Permalink
docs: added info for 'sandbox' securtity level
Browse files Browse the repository at this point in the history
  • Loading branch information
ashishjain0512 committed Feb 10, 2022
1 parent e13f97c commit b141f24
Showing 1 changed file with 12 additions and 24 deletions.
36 changes: 12 additions & 24 deletions docs/usage.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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>
```
Expand All @@ -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.**
Expand Down Expand Up @@ -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>
```

Expand Down Expand Up @@ -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>
```
Expand Down

0 comments on commit b141f24

Please sign in to comment.