@gitlab/ui/dist/directives/safe_html/safe_html.documentation.js

GitLab UI Components

var description = "# Safe Html\n\nA Vue Directive to sanitize HTML to avoid any XSS vulnerabilities.\n\n<!-- STORY -->\n\n## Usage\n\nThis directive can be used to sanitize HTML code which may contain user input, to prevent cross-site\nscripting (XSS) vulnerabilities.\n\nUnder the hood, it uses [DOMPurify](https://github.com/cure53/DOMPurify) to sanitize the provided HTML.\n\nDOMPurify will strip out dangerous HTML and will keep the safe HTML. You can refer complete list of\n[tags][1] and [attributes][2] allowed by DOMPurify.\n\n[1]: https://github.com/cure53/DOMPurify/blob/main/src/tags.js\n[2]: https://github.com/cure53/DOMPurify/blob/main/src/attrs.js\n\n## Example\n\n```html\n<script>\nimport { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';\n\nexport default {\n  directives: {\n    SafeHtml,\n  },\n  data() {\n    return {\n      rawHtml: \"Hello! <script>alert('XSS')</script>\",\n    };\n  },\n};\n</script>\n\n<template>\n  <div v-safe-html=\"rawHtml\"></div>\n</template>\n```\n\n## Advanced configuration\n\n```js\n// It allows only <b> tags\nconst config = { ALLOWED_TAGS: ['b'] };\n\n// It doesn't allow any html tags\nconst config = { ALLOWED_TAGS: [] };\n```\n\n```html\n<div v-safe-html:[config]=\"rawHtml\"></div>\n```\n\nFor advanced configuration options, please refer to [DOMPurify's documentation](https://github.com/cure53/DOMPurify#can-i-configure-dompurify).\n\n### Notes\n\n1. `target` attribute is not allowed by default - See <https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1427>.\n1. To know more about other tips & caveats - See <https://gitlab.com/groups/gitlab-org/-/epics/4273#caveats>.\n";

var safe_html_documentation = {
  followsDesignSystem: false,
  description
};

export default safe_html_documentation;