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

GitLab UI Components

import examples from './examples';

var description = "# Safe Html\n\nA Vue Directive to sanitize HTML to avoid an XSS vulnerability.\n\n<!-- STORY -->\n\n## Usage\n\nThis directive can be used to sanitize HTML code which may contain user input, and thus preventing any cross-site scripting (XSS) vulnerabilities.\n\nUnder the hood, it uses [DOMPurify](https://github.com/cure53/DOMPurify) to sanitize the provided HTML code.\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! Welcome \"><script>alert(1)</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// This will allow only <b> tags\nconst config = { ALLOWED_TAGS: ['b'] };\n```\n\n```html\n<div v-safe-html:[config]=\"rawHtml\"></div>\n```\n\nPlease refer https://github.com/cure53/DOMPurify#can-i-configure-dompurify for advanced configuration options.\n\n<br>\n";

var safe_html_documentation = {
  followsDesignSystem: false,
  description: description,
  examples: examples
};

export default safe_html_documentation;