ESLint rule to detect components contains prop href but not rel

.eslintplugin.js

@@ -1,3 +1,4 @@
 exports.rules = {
   i18n: require('./scripts/eslint-plugin-i18n/i18n'),
+  'href-with-rel': require('./scripts/eslint-plugin-rel/rel')
 };

.eslintrc.js

@@ -36,6 +36,7 @@ module.exports = {
   rules: {
     "prefer-template": "error",
     "local/i18n": "error",
+    "local/href-with-rel": "error",
     "no-use-before-define": "off",
     "quotes": ["warn", "single", "avoid-escape"],
 

CHANGELOG.md

@@ -18,6 +18,7 @@
 - Fixed `initialSelectedTab` properties used in `EuiDatePopoverContent` ([#3254](https://github.com/elastic/eui/pull/3254))
 - Fixed `EuiSideNavItem` overriding custom `className` of item and icon ([#3283](https://github.com/elastic/eui/pull/3283))
 - Fixed `EuiFieldSearch` clear button inconsistencies ([#3270](https://github.com/elastic/eui/pull/3270))
+- Fixed components with `href` usage of `rel` ([#3258](https://github.com/elastic/eui/pull/3258))
 
 ## [`22.3.0`](https://github.com/elastic/eui/tree/v22.3.0)
 

scripts/eslint-plugin-rel/rel.js

@@ -0,0 +1,41 @@
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Enforce rel prop if href exists',
+    },
+  },
+  create: function(context) {
+    return {
+      /**
+       * Props of any component is defined in ArrowFunctions
+       * Example: const EuiButton = ({ foo, bar }) => {};
+       */
+      ArrowFunctionExpression(node) {
+        // Functional component contains only single argument
+        if (node.params && node.params.length === 1) {
+          // Extract object => { foo, bar }
+          const objectPattern = node.params[0];
+
+          if (objectPattern.properties && objectPattern.properties.length) {
+            // Iterate each Object property to find href or rel
+            let href = -1;
+            let rel = -1;
+            objectPattern.properties.forEach((property, index) => {
+              if (property.key && property.key.name === 'href') href = index;
+              if (property.key && property.key.name === 'rel') rel = index;
+            });
+
+            // Error => If href is preset and rel is not preset
+            if (href !== -1 && rel === -1) {
+              context.report({
+                node: objectPattern.properties[href],
+                message: 'Props must contain rel if href is defined',
+              });
+            }
+          }
+        }
+      },
+    };
+  },
+};

scripts/eslint-plugin-rel/rel.test.js

@@ -0,0 +1,27 @@
+const rule = require('./rel');
+const RuleTester = require('eslint').RuleTester;
+
+const ruleTester = new RuleTester({
+  parser: 'babel-eslint',
+});
+
+const valid = [
+  'const Component = ({ href, rel }) => {};',
+  'const Component = ({ foo, bar, baz}) => {};',
+];
+
+const invalid = [
+  {
+    code: 'const Component = ({ href }) => {};',
+    errors: [
+      {
+        message: 'Props must contain rel if href is defined',
+      },
+    ],
+  },
+];
+
+ruleTester.run('href-with-rel', rule, {
+  valid,
+  invalid,
+});

src/components/badge/__snapshots__/badge.test.tsx.snap

@@ -38,12 +38,34 @@ exports[`EuiBadge is rendered 1`] = `
 </span>
 `;
 
+exports[`EuiBadge is rendered with href and rel provided 1`] = `
+<span
+  class="euiBadge euiBadge--iconLeft testClass1 testClass2"
+  style="background-color:#d3dae6;color:#000"
+>
+  <span
+    class="euiBadge__content"
+  >
+    <a
+      aria-label="aria-label"
+      class="euiBadge__childButton"
+      data-test-subj="test subject string"
+      href="/#/"
+      rel="noopener noreferrer"
+    >
+      Content
+    </a>
+  </span>
+</span>
+`;
+
 exports[`EuiBadge is rendered with href provided 1`] = `
 <a
   aria-label="aria-label"
   class="euiBadge euiBadge-isClickable euiBadge--iconLeft testClass1 testClass2"
   data-test-subj="test subject string"
   href="/#/"
+  rel="noreferrer"
   style="background-color:#d3dae6;color:#000"
 >
   <span
@@ -71,6 +93,7 @@ exports[`EuiBadge is rendered with iconOnClick and href provided 1`] = `
       class="euiBadge__childButton"
       data-test-subj="test subject string"
       href="/#/"
+      rel="noreferrer"
     >
       Content
     </a>

src/components/badge/badge.test.tsx

@@ -86,6 +86,21 @@ describe('EuiBadge', () => {
     expect(component).toMatchSnapshot();
   });
 
+  test('is rendered with href and rel provided', () => {
+    const component = render(
+      <EuiBadge
+        {...requiredProps}
+        iconOnClick={jest.fn()}
+        iconOnClickAriaLabel="Example of onclick event for icon within the anchor"
+        href="/#/"
+        rel="noopener">
+        Content
+      </EuiBadge>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
   describe('props', () => {
     describe('iconType', () => {
       it('is rendered', () => {

src/components/badge/badge.tsx

@@ -9,7 +9,11 @@ import React, {
 import classNames from 'classnames';
 import { CommonProps, ExclusiveUnion, keysOf, PropsOf } from '../common';
 import chroma from 'chroma-js';
-import { euiPaletteColorBlindBehindText, isValidHex } from '../../services';
+import {
+  euiPaletteColorBlindBehindText,
+  isValidHex,
+  getSecureRelForTarget,
+} from '../../services';
 import { EuiInnerText } from '../inner_text';
 import { EuiIcon, IconColor, IconType } from '../icon';
 
@@ -30,6 +34,7 @@ type WithButtonProps = {
 type WithAnchorProps = {
   href: string;
   target?: string;
+  rel?: string;
 } & Omit<HTMLAttributes<HTMLAnchorElement>, 'href' | 'color'>;
 
 type WithSpanProps = Omit<HTMLAttributes<HTMLSpanElement>, 'onClick' | 'color'>;
@@ -118,6 +123,7 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
   iconOnClickAriaLabel,
   closeButtonProps,
   href,
+  rel,
   target,
   ...rest
 }) => {
@@ -187,6 +193,7 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
   const relObj: {
     href?: string;
     target?: string;
+    rel?: string;
     onClick?:
       | ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void)
       | ((event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void);
@@ -195,6 +202,7 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
   if (href && !isDisabled) {
     relObj.href = href;
     relObj.target = target;
+    relObj.rel = getSecureRelForTarget({ href, target, rel });
   } else if (onClick) {
     relObj.onClick = onClick;
   }

src/components/header/__snapshots__/header_logo.test.tsx.snap

@@ -5,6 +5,7 @@ exports[`EuiHeaderLogo is rendered 1`] = `
   aria-label="aria-label"
   class="euiHeaderLogo testClass1 testClass2"
   data-test-subj="test subject string"
+  rel="noreferrer"
 >
   <div
     aria-label="Elastic"
@@ -18,6 +19,21 @@ exports[`EuiHeaderLogo renders href 1`] = `
 <a
   class="euiHeaderLogo"
   href="#"
+  rel="noreferrer"
+>
+  <div
+    aria-label="Elastic"
+    class="euiHeaderLogo__icon"
+    data-euiicon-type="logoElastic"
+  />
+</a>
+`;
+
+exports[`EuiHeaderLogo renders href with rel 1`] = `
+<a
+  class="euiHeaderLogo"
+  href="#"
+  rel="noreferrer"
 >
   <div
     aria-label="Elastic"
@@ -30,6 +46,7 @@ exports[`EuiHeaderLogo renders href 1`] = `
 exports[`EuiHeaderLogo renders optional props 1`] = `
 <a
   class="euiHeaderLogo"
+  rel="noreferrer"
   style="color:red"
 >
   <div

src/components/header/header_logo.test.tsx

@@ -17,6 +17,12 @@ describe('EuiHeaderLogo', () => {
     expect(component).toMatchSnapshot();
   });
 
+  test('renders href with rel', () => {
+    const component = render(<EuiHeaderLogo href="#" rel="noreferrer" />);
+
+    expect(component).toMatchSnapshot();
+  });
+
   test('renders optional props', () => {
     const component = render(
       <EuiHeaderLogo

src/components/header/header_logo.tsx

@@ -7,10 +7,13 @@ import classNames from 'classnames';
 
 import { EuiIcon, IconType } from '../icon';
 import { CommonProps } from '../common';
+import { getSecureRelForTarget } from '../../services';
 
 export type EuiHeaderLogoProps = CommonProps &
   AnchorHTMLAttributes<HTMLAnchorElement> & {
     href?: string;
+    rel?: string;
+    target?: string;
     iconType?: IconType;
     iconTitle?: string;
     children?: ReactNode;
@@ -20,14 +23,21 @@ export const EuiHeaderLogo: FunctionComponent<EuiHeaderLogoProps> = ({
   iconType = 'logoElastic',
   iconTitle = 'Elastic',
   href,
+  rel,
+  target,
   children,
   className,
   ...rest
 }) => {
   const classes = classNames('euiHeaderLogo', className);
-
+  const secureRel = getSecureRelForTarget({ href, rel, target });
   return (
-    <a href={href} className={classes} {...rest}>
+    <a
+      href={href}
+      rel={secureRel}
+      target={target}
+      className={classes}
+      {...rest}>
       <EuiIcon
         aria-label={iconTitle}
         className="euiHeaderLogo__icon"

src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap

@@ -6,6 +6,7 @@ exports[`EuiKeyPadMenuItem is rendered 1`] = `
   class="euiKeyPadMenuItem testClass1 testClass2"
   data-test-subj="test subject string"
   href="#"
+  rel="noreferrer"
   role="menuitem"
 >
   <div
@@ -51,6 +52,31 @@ exports[`EuiKeyPadMenuItem renders href 1`] = `
 <a
   class="euiKeyPadMenuItem"
   href="#"
+  rel="noreferrer"
+  role="menuitem"
+>
+  <div
+    class="euiKeyPadMenuItem__inner"
+  >
+    <div
+      class="euiKeyPadMenuItem__icon"
+    >
+      Icon
+    </div>
+    <p
+      class="euiKeyPadMenuItem__label"
+    >
+      Label
+    </p>
+  </div>
+</a>
+`;
+
+exports[`EuiKeyPadMenuItem renders href with rel 1`] = `
+<a
+  class="euiKeyPadMenuItem"
+  href="#"
+  rel="noreferrer"
   role="menuitem"
 >
   <div

src/components/key_pad_menu/key_pad_menu_item.test.tsx

@@ -25,6 +25,16 @@ describe('EuiKeyPadMenuItem', () => {
     expect(component).toMatchSnapshot();
   });
 
+  test('renders href with rel', () => {
+    const component = render(
+      <EuiKeyPadMenuItem label="Label" href="#" rel="noreferrer">
+        Icon
+      </EuiKeyPadMenuItem>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
   test('renders button', () => {
     const onClickHandler = jest.fn();
 

src/components/key_pad_menu/key_pad_menu_item.tsx

@@ -11,6 +11,8 @@ import { CommonProps, ExclusiveUnion } from '../common';
 
 import { EuiBetaBadge } from '../badge/beta_badge';
 
+import { getSecureRelForTarget } from '../../services';
+
 import { IconType } from '../icon';
 
 const renderContent = (
@@ -59,6 +61,7 @@ interface EuiKeyPadMenuItemCommonProps {
   betaBadgeTooltipContent?: ReactNode;
   onClick?: () => void;
   href?: string;
+  rel?: string;
 }
 
 export type EuiKeyPadMenuItemProps = CommonProps &
@@ -77,6 +80,8 @@ export const EuiKeyPadMenuItem: FunctionComponent<EuiKeyPadMenuItemProps> = ({
   betaBadgeTooltipContent,
   betaBadgeIconType,
   href,
+  rel,
+  target,
   ...rest
 }) => {
   const classes = classNames(
@@ -93,11 +98,15 @@ export const EuiKeyPadMenuItem: FunctionComponent<EuiKeyPadMenuItemProps> = ({
     disabled?: boolean;
     type?: string;
     href?: string;
+    rel?: string;
+    target?: string;
   } = {};
 
   if (href && !isDisabled) {
     relObj.role = 'menuitem';
     relObj.href = href;
+    relObj.target = target;
+    relObj.rel = getSecureRelForTarget({ href, rel, target });
   } else {
     relObj.type = 'button';
     relObj.disabled = isDisabled;