Add rel='noopener noreferrer' to all links with target='_blank' for s…

…ecurity.

src/components/button/__snapshots__/button.test.js.snap

@@ -95,6 +95,21 @@ exports[`EuiButton props fill is rendered 1`] = `
 </button>
 `;
 
+exports[`EuiButton props href secures the rel attribute when the target is _blank 1`] = `
+<a
+  class="euiButton euiButton--primary"
+  href="#"
+  rel="noopener noreferrer"
+  target="_blank"
+>
+  <span
+    class="euiButton__content"
+  >
+    <span />
+  </span>
+</a>
+`;
+
 exports[`EuiButton props iconSide left is rendered 1`] = `
 <button
   class="euiButton euiButton--primary"

src/components/button/button.js

@@ -2,7 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import checkHrefAndOnClick from '../../services/prop_types/check_href_and_onclick';
+import {
+  checkHrefAndOnClick,
+  getSecureRelForTarget,
+} from '../../services';
 
 import {
   ICON_TYPES,
@@ -43,7 +46,10 @@ export const EuiButton = ({
   fill,
   isDisabled,
   href,
+  target,
+  rel,
   onClick,
+  type,
   ...rest
 }) => {
 
@@ -73,10 +79,14 @@ export const EuiButton = ({
   }
 
   if (href) {
+    const secureRel = getSecureRelForTarget(target, rel);
+
     return (
       <a
         className={classes}
         href={href}
+        target={target}
+        rel={secureRel}
         {...rest}
       >
         <span className="euiButton__content">
@@ -91,6 +101,7 @@ export const EuiButton = ({
         disabled={isDisabled}
         className={classes}
         onClick={onClick}
+        type={type}
         {...rest}
       >
         <span className="euiButton__content">
@@ -124,6 +135,8 @@ EuiButton.propTypes = {
   size: PropTypes.oneOf(SIZES),
   isDisabled: PropTypes.bool,
   href: checkHrefAndOnClick,
+  target: PropTypes.string,
+  rel: PropTypes.string,
   onClick: PropTypes.func,
 
   /**

src/components/button/button.test.js

@@ -95,5 +95,16 @@ describe('EuiButton', () => {
         });
       });
     });
+
+    describe('href', () => {
+      it('secures the rel attribute when the target is _blank', () => {
+        const component = render(
+          <EuiButton href="#" target="_blank" />
+        );
+
+        expect(component)
+          .toMatchSnapshot();
+      });
+    });
   });
 });

src/components/button/button_empty/__snapshots__/button_empty.test.js.snap

@@ -108,6 +108,21 @@ exports[`EuiButtonEmpty props flush right is rendered 1`] = `
 </button>
 `;
 
+exports[`EuiButtonEmpty props href secures the rel attribute when the target is _blank 1`] = `
+<a
+  class="euiButtonEmpty euiButtonEmpty--primary"
+  href="#"
+  rel="noopener noreferrer"
+  target="_blank"
+>
+  <span
+    class="euiButtonEmpty__content"
+  >
+    <span />
+  </span>
+</a>
+`;
+
 exports[`EuiButtonEmpty props iconSide left is rendered 1`] = `
 <button
   class="euiButtonEmpty euiButtonEmpty--primary"

src/components/button/button_empty/button_empty.js

@@ -2,7 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import checkHrefAndOnClick from '../../../services/prop_types/check_href_and_onclick';
+import {
+  checkHrefAndOnClick,
+  getSecureRelForTarget,
+} from '../../../services';
 
 import {
   ICON_TYPES,
@@ -51,7 +54,10 @@ export const EuiButtonEmpty = ({
   flush,
   isDisabled,
   href,
+  target,
+  rel,
   onClick,
+  type,
   ...rest
 }) => {
 
@@ -79,10 +85,14 @@ export const EuiButtonEmpty = ({
   }
 
   if (href) {
+    const secureRel = getSecureRelForTarget(target, rel);
+
     return (
       <a
         className={classes}
         href={href}
+        target={target}
+        rel={secureRel}
         {...rest}
       >
         <span className="euiButtonEmpty__content">
@@ -97,6 +107,7 @@ export const EuiButtonEmpty = ({
         disabled={isDisabled}
         className={classes}
         onClick={onClick}
+        type={type}
         {...rest}
       >
         <span className="euiButtonEmpty__content">
@@ -118,7 +129,10 @@ EuiButtonEmpty.propTypes = {
   flush: PropTypes.oneOf(FLUSH_TYPES),
   isDisabled: PropTypes.bool,
   href: checkHrefAndOnClick,
+  target: PropTypes.string,
+  rel: PropTypes.string,
   onClick: PropTypes.func,
+  type: PropTypes.string,
 };
 
 EuiButtonEmpty.defaultProps = {

src/components/button/button_empty/button_empty.test.js

@@ -98,5 +98,16 @@ describe('EuiButtonEmpty', () => {
         });
       });
     });
+
+    describe('href', () => {
+      it('secures the rel attribute when the target is _blank', () => {
+        const component = render(
+          <EuiButtonEmpty href="#" target="_blank" />
+        );
+
+        expect(component)
+          .toMatchSnapshot();
+      });
+    });
   });
 });

src/components/button/button_icon/__snapshots__/button_icon.test.js.snap

@@ -49,6 +49,16 @@ exports[`EuiButtonIcon props color text is rendered 1`] = `
 />
 `;
 
+exports[`EuiButtonIcon props href secures the rel attribute when the target is _blank 1`] = `
+<a
+  aria-label="button"
+  class="euiButtonIcon euiButtonIcon--primary"
+  href="#"
+  rel="noopener noreferrer"
+  target="_blank"
+/>
+`;
+
 exports[`EuiButtonIcon props iconType is rendered 1`] = `
 <button
   aria-label="button"

src/components/button/button_icon/button_icon.js

@@ -2,7 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import checkHrefAndOnClick from '../../../services/prop_types/check_href_and_onclick';
+import {
+  checkHrefAndOnClick,
+  getSecureRelForTarget,
+} from '../../../services';
 
 import {
   ICON_TYPES,
@@ -41,6 +44,9 @@ export const EuiButtonIcon = ({
   isDisabled,
   href,
   onClick,
+  type,
+  target,
+  rel,
   ...rest
 }) => {
 
@@ -65,10 +71,14 @@ export const EuiButtonIcon = ({
   }
 
   if (href) {
+    const secureRel = getSecureRelForTarget(target, rel);
+
     return (
       <a
         className={classes}
         href={href}
+        target={target}
+        rel={secureRel}
         {...rest}
       >
         {buttonIcon}
@@ -80,6 +90,7 @@ export const EuiButtonIcon = ({
         disabled={isDisabled}
         className={classes}
         onClick={onClick}
+        type={type}
         {...rest}
       >
         {buttonIcon}
@@ -96,7 +107,10 @@ EuiButtonIcon.propTypes = {
   isDisabled: PropTypes.bool,
   'aria-label': accessibleButtonIcon,
   href: checkHrefAndOnClick,
+  target: PropTypes.string,
+  rel: PropTypes.string,
   onClick: PropTypes.func,
+  type: PropTypes.string,
 };
 
 EuiButtonIcon.defaultProps = {

src/components/button/button_icon/button_icon.test.js

@@ -49,5 +49,16 @@ describe('EuiButtonIcon', () => {
         });
       });
     });
+
+    describe('href', () => {
+      it('secures the rel attribute when the target is _blank', () => {
+        const component = render(
+          <EuiButtonIcon aria-label="button" href="#" target="_blank" />
+        );
+
+        expect(component)
+          .toMatchSnapshot();
+      });
+    });
   });
 });

src/components/link/__snapshots__/link.test.js.snap

@@ -6,6 +6,7 @@ exports[`EuiLink is rendered 1`] = `
   class="euiLink euiLink--primary testClass1 testClass2"
   data-test-subj="test subject string"
   href="#"
+  rel="noopener noreferrer"
   target="_blank"
 />
 `;

src/components/link/link.js

@@ -2,6 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+import {
+  checkHrefAndOnClick,
+  getSecureRelForTarget,
+} from '../../services';
+
 const colorsToClassNameMap = {
   'primary': 'euiLink--primary',
   'subdued': 'euiLink--subdued',
@@ -16,30 +21,38 @@ export const COLORS = Object.keys(colorsToClassNameMap);
 
 export const EuiLink = ({
   children,
-  type,
   color,
   className,
+  href,
+  target,
+  rel,
   onClick,
+  type,
   ...rest
 }) => {
   const classes = classNames('euiLink', colorsToClassNameMap[color], className);
 
   if (onClick) {
     return (
       <button
-        type={type}
         className={classes}
         onClick={onClick}
+        type={type}
         {...rest}
       >
         {children}
       </button>
     );
   }
 
+  const secureRel = getSecureRelForTarget(target, rel);
+
   return (
     <a
       className={classes}
+      href={href}
+      target={target}
+      rel={secureRel}
       {...rest}
     >
       {children}
@@ -50,9 +63,12 @@ export const EuiLink = ({
 EuiLink.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+  href: checkHrefAndOnClick,
+  target: PropTypes.string,
+  rel: PropTypes.string,
   onClick: PropTypes.func,
-  color: PropTypes.oneOf(COLORS),
   type: PropTypes.string,
+  color: PropTypes.oneOf(COLORS),
 };
 
 EuiLink.defaultProps = {

src/services/index.js

@@ -23,6 +23,14 @@ export {
   Pager,
 } from './paging';
 
+export {
+  checkHrefAndOnClick,
+} from './prop_types';
+
+export {
+  getSecureRelForTarget,
+} from './security';
+
 export {
   SortableProperties,
 } from './sort';

src/services/prop_types/check_href_and_onclick.js

@@ -1,4 +1,4 @@
-export default function checkHrefAndOnClick(props, propName, componentName) {
+export function checkHrefAndOnClick(props, propName, componentName) {
   if (props.href && props.onClick) {
     throw new Error(
       `${componentName} must either specify an href property (if it should be a link) ` +

src/services/prop_types/index.js

@@ -0,0 +1 @@
+export { checkHrefAndOnClick } from './check_href_and_onclick';