DEV - 15413 - Create a link util and allow-list for urls that are coming from the API

src/_scss/components/_externalLink.scss

@@ -4,6 +4,7 @@
 }
 
 .usda-external-link__card {
+  @include button-link;
   &:focus,
   &:active,
   &:hover {

src/_scss/layouts/default/header/nav/_megaMenu.scss

@@ -101,6 +101,7 @@
 
         // button overrides for the external links
         .usda-external-link {
+          @include button-link;
           background-color: $gray-cool-2;
           margin: 0;
           padding: 0;

src/_scss/layouts/default/header/nav/mobile/_dropdown.scss

@@ -20,6 +20,7 @@
 
     // button overrides for the external links
     .usda-external-link {
+      @include button-link;
       background-color: white;
       margin: 0;
       padding: 0;

src/_scss/pages/analystGuide/analystGuide.scss

@@ -108,7 +108,9 @@
     color: $color-base;
     font-weight: $font-normal;
     word-break: break-word;
-    .analyst-guide__external-link {
+    .analyst-guide__external-link,
+    .usda-external-link,
+    .usda-external-link__card {
       @include button-unstyled;
       color: $theme-color-1;
       font-size: inherit;

src/_scss/pages/covid19/index.scss

@@ -151,11 +151,17 @@
               font-size: $smallest-font-size;
 
               .usda-external-link {
+                @include button-link;
                 font-size: $smallest-font-size;
               }
             }
-            p a {
-              font-weight: $font-semibold;
+            p {
+              a,
+              .usda-external-link,
+              .usda-external-link__card {
+                @include button-link;
+                font-weight: $font-semibold;
+              }
             }
             .glossary-term {
               font-weight: $font-semibold;
@@ -248,6 +254,7 @@
               font-size: $smallest-font-size;
 
               .usda-external-link {
+                @include button-link;
                 font-size: $smallest-font-size;
               }
             }

src/_scss/pages/data-sources/index.scss

@@ -38,15 +38,22 @@
         padding: ($global-spacing-unit * 3) ($global-spacing-unit * 2)
           ($global-spacing-unit * 2) ($global-spacing-unit * 2);
       }
-
-      .about-section-content .usda-external-link {
-        @include button-unstyled;
-        display: inline;
-        padding: 0 rem(5);
-        font-size: rem(18);
-        color: $color-primary;
-        svg {
+      .about-padded-content {
+        padding: 1rem 4rem;
+        @media (min-width: $large-screen) {
+          width: 75%;
+          max-width: rem(975);
+          margin: auto;
+        }
+        .about-section-content .usda-external-link {
+          @include button-link;
+          display: inline;
+          padding: 0 rem(5);
+          font-size: rem(18);
           color: $color-primary;
+          svg {
+            color: $color-primary;
+          }
         }
       }
       .about-section-content ol {

src/_scss/pages/homepage/_featuredContent.scss

@@ -44,6 +44,7 @@
   }
 
   .usda-external-link__card {
+    @include button-link;
     &:focus,
     &:active {
       cursor: pointer;

src/_scss/pages/interactiveDataSources/index.scss

@@ -79,7 +79,7 @@
             overflow-x: auto;
           }
         }
-        
+
         .body-padded__content {
           @import "./_scrollerOverlayCard.scss";
           margin-top: 0;

src/js/components/covid19/assistanceListing/CFDADetailModal.jsx

@@ -9,6 +9,7 @@ import Modal from 'react-aria-modal';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import ReadMore from 'components/sharedComponents/ReadMore';
 import CFDAOpportunityTotals from 'containers/covid19/assistanceListing/CFDAOpportunityTotals';
+import { sanitizeUrl } from '../../../helpers/url';
 
 const propTypes = {
     mounted: PropTypes.bool,
@@ -69,7 +70,7 @@ const CFDADetailModal = ({
                             <h6>Program Website</h6>
                         </div>
                         <div className="usa-dt-modal__section__description">
-                            {data.cfda_website ?
+                            {sanitizeUrl(data.cfda_website) ?
                                 <button
                                     onClick={displayRedirectModal}
                                     value={data.cfda_website}>
@@ -84,7 +85,7 @@ const CFDADetailModal = ({
                             <h6>Assistance Listing on SAM.gov</h6>
                         </div>
                         <div className="usa-dt-modal__section__description">
-                            {data.resource_link ?
+                            {sanitizeUrl(data.resource_link) ?
                                 <button
                                     onClick={displayRedirectModal}
                                     value={data.resource_link}>

src/js/components/sharedComponents/ExternalLink.jsx

@@ -8,6 +8,7 @@ import PropTypes from 'prop-types';
 import { useDispatch } from 'react-redux';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { showModal } from 'redux/actions/modal/modalActions';
+import { sanitizeUrl } from '../../helpers/url';
 
 const propTypes = {
     url: PropTypes.string.isRequired,
@@ -19,26 +20,57 @@ const propTypes = {
 const ExternalLink = ({
     url, children, isCard, showIcon = false
 }) => {
+    const sanitized = sanitizeUrl(url);
+    const isSafe = sanitized !== null;
+    const href = isSafe ? sanitized : 'not available';
+
     const dispatch = useDispatch();
     const redirect = () => {
-        dispatch(showModal(url));
+        dispatch(showModal(href));
     };
 
     const keyPressHandler = (e) => {
         if (e.key === 'Enter') {
             e.preventDefault();
-            dispatch(showModal(url));
+            dispatch(showModal(href));
         }
     };
     if (isCard) {
         if (showIcon) {
-            return <a className="usda-external-link__card" role="link" onClick={redirect} onKeyPress={keyPressHandler} tabIndex={0}>{children} <FontAwesomeIcon icon="external-link-alt" /></a>;
+            return (
+                <button
+                    className="usda-external-link__card"
+                    role="link"
+                    onClick={redirect}
+                    onKeyPress={keyPressHandler}
+                    tabIndex={0}
+                    disabled={!isSafe}
+                    aria-disabled={!isSafe}>
+                    {children} 
+                    <FontAwesomeIcon icon="external-link-alt" />
+                </button>
+            );
         }
-        return <a className="usda-external-link__card" role="link" onClick={redirect} onKeyPress={keyPressHandler} tabIndex={0}>{children}</a>;
+        return (
+            <button
+                className="usda-external-link__card"
+                role="link"
+                onClick={redirect}
+                onKeyPress={keyPressHandler}
+                tabIndex={0} 
+                disabled={!isSafe}
+                aria-disabled={!isSafe}>
+                {children}
+            </button>
+        );
     }
     return (
-        <button className="usda-external-link" onClick={redirect}>
-            {children || url} <FontAwesomeIcon icon="external-link-alt" />
+        <button
+            className="usda-external-link"
+            onClick={redirect}
+            disabled={!isSafe}
+            aria-disabled={!isSafe}>
+            {children || href} <FontAwesomeIcon icon="external-link-alt" />
         </button>);
 };
 

src/js/components/sharedComponents/RedirectModal.jsx

@@ -8,97 +8,110 @@ import PropTypes from 'prop-types';
 import Modal from 'react-aria-modal';
 import { Button } from 'data-transparency-ui';
 import { Close, ExclamationTriangle } from 'components/sharedComponents/icons/Icons';
+import { sanitizeUrl } from '../../helpers/url';
 
 const propTypes = {
     mounted: PropTypes.bool,
     hideModal: PropTypes.func,
     url: PropTypes.string
 };
 
-export default class RedirectModal extends React.Component {
-    render() {
-        return (
-            <Modal
-                dialogId="usa-dt-modal__redirect-modal"
-                mounted={this.props.mounted}
-                onExit={this.props.hideModal}
-                titleText="You're leaving a Federal Government website."
-                dialogClass="usa-dt-modal"
-                verticallyCenter
-                escapeExits>
-                <div className="usa-dt-modal redirect-modal">
-                    <div className="usa-dt-modal__header">
-                        <button
-                            className="usa-dt-modal__close-button"
-                            onClick={this.props.hideModal}
-                            title="Close"
-                            aria-label="Close">
-                            <Close alt="Close modal" />
-                        </button>
+const RedirectModal = ({
+    mounted,
+    hideModal,
+    url
+}) => {
+    const isSafe = sanitizeUrl(url);
+
+    if (!isSafe) {
+        // modal shouldn't have shown.
+        // clean up and return
+        hideModal();
+        return;
+    }
+
+    return (
+        <Modal
+            dialogId="usa-dt-modal__redirect-modal"
+            mounted={mounted}
+            onExit={hideModal}
+            titleText="You're leaving a Federal Government website."
+            dialogClass="usa-dt-modal"
+            verticallyCenter
+            escapeExits>
+            <div className="usa-dt-modal redirect-modal">
+                <div className="usa-dt-modal__header">
+                    <button
+                        className="usa-dt-modal__close-button"
+                        onClick={hideModal}
+                        title="Close"
+                        aria-label="Close">
+                        <Close alt="Close modal" />
+                    </button>
+                </div>
+                <div className="usa-dt-modal__body">
+                    <div className="usa-dt-modal__title-icon">
+                        <i className="usa-da-icon">
+                            <ExclamationTriangle />
+                        </i>
                     </div>
-                    <div className="usa-dt-modal__body">
-                        <div className="usa-dt-modal__title-icon">
-                            <i className="usa-da-icon">
-                                <ExclamationTriangle />
-                            </i>
-                        </div>
-                        <div className="usa-dt-modal__text-wrapper">
-                            <div className="usa-dt-modal__title">
-                                <div className="usa-dt-modal__title-text">
+                    <div className="usa-dt-modal__text-wrapper">
+                        <div className="usa-dt-modal__title">
+                            <div className="usa-dt-modal__title-text">
                                 You&apos;re leaving a Federal Government website.
-                                </div>
                             </div>
-                            <div className="usa-dt-modal__directions">
+                        </div>
+                        <div className="usa-dt-modal__directions">
                             You have selected to visit:
-                            </div>
-                            <div className="usa-dt-modal__link">
-                                <a
-                                    href={this.props.url}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    tabIndex="-1">
-                                    {this.props.url}
-                                </a>
-                            </div>
-                            <div className="usa-dt-modal__explanation">
+                        </div>
+                        <div className="usa-dt-modal__link">
+                            <a
+                                href={url}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                tabIndex="-1">
+                                {url}
+                            </a>
+                        </div>
+                        <div className="usa-dt-modal__explanation">
                             You&apos;re going to a website that is not managed or controlled by the Federal Government. Its privacy policies may differ from ours.
-                            </div>
-                            <div className="usa-dt-modal__button-container">
-                                <Button
-                                    copy="Cancel"
-                                    buttonTitle="Cancel"
-                                    buttonSize="lg"
-                                    buttonType="secondary"
-                                    backgroundColor="light"
-                                    onClick={this.props.hideModal}
-                                    onKeyUp={(e) => {
-                                        if (e.key === 'Enter') {
-                                            this.props.hideModal();
-                                        }
-                                    }} />
-                                <Button
-                                    copy="Continue"
-                                    buttonTitle="Continue"
-                                    buttonSize="lg"
-                                    buttonType="primary"
-                                    backgroundColor="light"
-                                    onClick={() => {
-                                        window.open(this.props.url, "_blank");
-                                        this.props.hideModal();
-                                    }}
-                                    onKeyUp={(e) => {
-                                        if (e.key === 'Enter') {
-                                            window.open(this.props.url, "_blank");
-                                            this.props.hideModal();
-                                        }
-                                    }} />
-                            </div>
+                        </div>
+                        <div className="usa-dt-modal__button-container">
+                            <Button
+                                copy="Cancel"
+                                buttonTitle="Cancel"
+                                buttonSize="lg"
+                                buttonType="secondary"
+                                backgroundColor="light"
+                                onClick={hideModal}
+                                onKeyUp={(e) => {
+                                    if (e.key === 'Enter') {
+                                        hideModal();
+                                    }
+                                }} />
+                            <Button
+                                copy="Continue"
+                                buttonTitle="Continue"
+                                buttonSize="lg"
+                                buttonType="primary"
+                                backgroundColor="light"
+                                onClick={() => {
+                                    window.open(url, "_blank");
+                                    hideModal();
+                                }}
+                                onKeyUp={(e) => {
+                                    if (e.key === 'Enter') {
+                                        window.open(url, "_blank");
+                                        hideModal();
+                                    }
+                                }} />
                         </div>
                     </div>
                 </div>
-            </Modal>
-        );
-    }
+            </div>
+        </Modal>
+    );
 }
 
 RedirectModal.propTypes = propTypes;
+export default RedirectModal;