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

GitLab UI Components

var description = "# Safe Link Directive\n\nA Vue directive to make the hyperlinks secure by default.\n\n<!-- STORY -->\n\n## Usage\n\nIt can be used to prevent the following security concerns related to hyperlinks:\n\n1. [Target=\"\\_blank\" Vulnerability](https://web.dev/external-anchors-use-rel-noopener/)\n\nThe directive makes sure all the external urls have `noopener noreferrer` rel attributes. It also preserves the existing `rel` attribute values.\n\n2. [URL Injection](https://vuejs.org/v2/guide/security.html#Injecting-URLs)\n\nHyperlinks are vulnerable to `javascript://` based Cross-site scripting vulnerabilty. A simple vulnerable code would look like\n\n```html\n<a href=\"javascript:alert(document.domain)\">click me</a>\n```\n\nThe directive makes sure all such XSS payloads are sanitized by replacing them with `about:blank`.\n\n```html\n<script>\n  import { GlSafeLinkDirective as SafeLink } from '@gitlab/ui';\n\n  export default {\n    data() {\n      return {\n        url: 'javascript:alert(1)',\n      };\n    },\n    directives: { SafeLink },\n  };\n</script>\n<template>\n  <a v-safe-link href=\"url\" target=\"_blank\">Click</a>\n</template>\n```\n";

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

export default safe_link_documentation;