[home] Add target=_blank to all markdown links (#15995) (#16006)

* Add target=_blank to all markdown links * add rel property * fix jest test
elastic · Jan 12, 2018 · 06b88ed · 06b88ed
1 parent 20a2a52
commit 06b88ed
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/content.test.js.snap b/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/content.test.js.snap
@@ -5,7 +5,7 @@ exports[`should render content with markdown 1`] = `
   className="kuiText kuiSubduedText tutorialContent markdown-body"
   dangerouslySetInnerHTML={
     Object {
-      "__html": "<p>I am <em>some</em> <a href=\\"https://en.wikipedia.org/wiki/Content\\">content</a> with <code>markdown</code></p>
+      "__html": "<p>I am <em>some</em> <a href=\\"https://en.wikipedia.org/wiki/Content\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">content</a> with <code>markdown</code></p>
 ",
     }
   }

diff --git a/src/core_plugins/kibana/public/home/components/tutorial/content.js b/src/core_plugins/kibana/public/home/components/tutorial/content.js
@@ -7,6 +7,19 @@ const markdownIt = new MarkdownIt('zero', { html: false, linkify: true });
 // list of rules can be found at https://github.com/markdown-it/markdown-it/issues/361
 markdownIt.enable(['backticks', 'emphasis', 'link', 'list']);
 
+// All links should open in new browser tab.
+// Define custom renderer to add 'target' attribute
+// https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
+const originalLinkRender = markdownIt.renderer.rules.link_open || function (tokens, idx, options, env, self) {
+  return self.renderToken(tokens, idx, options);
+};
+markdownIt.renderer.rules.link_open = function (tokens, idx, options, env, self) {
+  tokens[idx].attrPush(['target', '_blank']);
+  // https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/
+  tokens[idx].attrPush(['rel', 'noopener noreferrer']);
+  return originalLinkRender(tokens, idx, options, env, self);
+};
+
 export function Content({ className, text }) {
   const classes = classNames('kuiText kuiSubduedText tutorialContent markdown-body', className);
   return (