paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 21 Packages Projects Releases Wiki Activity

Add DomPurify sanitizer custom elements configuration (#26989)

Browse Source 
* Add DomPurify sanitizer custom elements configuration
---------

Signed-off-by: Harsha Teja Kanna <h7kanna@gmail.com>
This commit is contained in:
Harsha Teja Kanna
2024-10-17 13:21:56 -04:00
committed by GitHub
parent 9a6d61c9c9
commit 4f0cb89c42
5 changed files with 157 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/features/techdocs/how-to-guides.md
+20
View File
@@ -545,6 +545,26 @@ techdocs:
This way, all iframes where the host in the src attribute is in the
`sanitizer.allowedIframeHosts` list will be displayed.
## How to enable custom elements in TechDocs
TechDocs uses the [DOMPurify](https://github.com/cure53/DOMPurify) library to
sanitize HTML and prevent XSS attacks.
It's possible to allow custom elements based on a list of allowed patterns. To do
this, add the allowed elements and attributes in the `techdocs.sanitizer.allowedCustomElementTagNameRegExp`
and `allowedCustomElementAttributeNameRegExp` configuration of your `app-config.yaml`.
For example:
```yaml
techdocs:
sanitizer:
allowedCustomElementTagNameRegExp: '^backstage-',
allowedCustomElementAttributeNameRegExp: 'attribute1|attribute2',
```
This way, custom element like `<backstage-element attribute1="value"></backstage-element>` will be allowed in the result HTML.
## How to render PlantUML diagram in TechDocs
PlantUML allows you to create diagrams from plain text language. Each diagram description begins with the keyword - (@startXYZ and @endXYZ, depending on the kind of diagram). For UML Diagrams, Keywords @startuml & @enduml should be used. Further details for all types of diagrams can be found at [PlantUML Language Reference Guide](https://plantuml.com/guide).