docs: added info for 'sandbox' securtity level
This commit is contained in:
parent
e13f97c8ee
commit
b141f24068
|
@ -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>
|
||||
```
|
||||
|
|
Loading…
Reference in New Issue