Revert href sanitization changes (#1015)

* Revert "Sanitize href props with xss vulnerability V2 (#1000)"

This reverts commit 86a883b.

* Update babel plugins

* Revert tagname changes

Author: tcbegley

.babelrc

@@ -1,12 +1,12 @@
 {
   "presets": ["@babel/preset-env", "@babel/preset-react"],
   "plugins": [
-    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-transform-object-rest-spread",
     "@babel/plugin-transform-runtime"
   ],
   "env": {
     "test": {
-      "plugins": ["@babel/plugin-proposal-class-properties"]
+      "plugins": ["@babel/plugin-transform-class-properties"]
     }
   }
 }

package-lock.json

@@ -34,12 +34,11 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@babel/core": "^7.15.0",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
+    "@babel/plugin-transform-class-properties": "^7.24.1",
+    "@babel/plugin-transform-object-rest-spread": "^7.24.1",
     "@babel/plugin-transform-runtime": "^7.15.0",
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.5",
-    "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.1",
     "@testing-library/user-event": "^13.2.1",
@@ -57,7 +56,6 @@
     "webpack-dev-server": "^4.7.4"
   },
   "dependencies": {
-    "@braintree/sanitize-url": "^7.0.0",
     "@plotly/dash-component-plugins": "^1.2.0",
     "classnames": "^2.2.6",
     "fast-isnumeric": "^1.1.3",

package.json

@@ -4,7 +4,6 @@ import {omit} from 'ramda';
 import RBBadge from 'react-bootstrap/Badge';
 import Link from '../../private/Link';
 import {bootstrapColors} from '../../private/BootstrapColors';
-import {sanitizeAndCheckUrl} from '../../private/util';
 
 /**
  * Badges can be used to add counts or labels to other components.
@@ -23,8 +22,6 @@ const Badge = props => {
     ...otherProps
   } = props;
 
-  const sanitizedUrl = sanitizeAndCheckUrl(href, setProps);
-
   const incrementClicks = () => {
     if (setProps) {
       setProps({
@@ -39,8 +36,8 @@ const Badge = props => {
 
   return (
     <RBBadge
-      as={sanitizedUrl && Link}
-      href={sanitizedUrl}
+      as={href && Link}
+      href={href}
       bg={isBootstrapColor ? color : null}
       text={text_color}
       className={class_name || className}

src/components/badge/Badge.js

@@ -3,33 +3,10 @@ import PropTypes from 'prop-types';
 import RBBreadcrumb from 'react-bootstrap/Breadcrumb';
 
 import Link from '../../private/Link';
-import {sanitizeAndCheckUrl} from '../../private/util';
 
 /**
  * Use breadcrumbs to create a navigation breadcrumb in your app.
  */
-
-const BreadcrumbItem = ({
-  href,
-  setProps,
-  external_link,
-  label,
-  ...otherProps
-}) => {
-  const sanitizedUrl = sanitizeAndCheckUrl(href, setProps);
-
-  return (
-    <RBBreadcrumb.Item
-      linkAs={sanitizedUrl && Link}
-      href={sanitizedUrl}
-      linkProps={sanitizedUrl && {external_link}}
-      {...otherProps}
-    >
-      {label}
-    </RBBreadcrumb.Item>
-  );
-};
-
 const Breadcrumb = ({
   items,
   tag,
@@ -39,7 +16,6 @@ const Breadcrumb = ({
   item_class_name,
   itemClassName,
   item_style,
-  setProps,
   ...otherProps
 }) => (
   <RBBreadcrumb
@@ -51,12 +27,16 @@ const Breadcrumb = ({
     {...otherProps}
   >
     {(items || []).map((item, idx) => (
-      <BreadcrumbItem
+      <RBBreadcrumb.Item
         key={`${item.value}${idx}`}
+        active={item.active}
+        linkAs={item.href && Link}
         className={item_class_name || itemClassName}
-        setProps={setProps}
-        {...item}
-      />
+        href={item.href}
+        linkProps={item.href && {external_link: item.external_link}}
+      >
+        {item.label}
+      </RBBreadcrumb.Item>
     ))}
   </RBBreadcrumb>
 );

src/components/breadcrumb/Breadcrumb.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import {omit} from 'ramda';
 import RBButton from 'react-bootstrap/Button';
 import Link from '../../private/Link';
-import {sanitizeAndCheckUrl} from '../../private/util';
 
 /**
  * A component for creating Bootstrap buttons with different style options. The
@@ -35,8 +34,6 @@ const Button = props => {
     ...otherProps
   } = props;
 
-  const sanitizedUrl = sanitizeAndCheckUrl(href, setProps);
-
   const incrementClicks = () => {
     if (!disabled && setProps) {
       setProps({
@@ -45,7 +42,7 @@ const Button = props => {
       });
     }
   };
-  const useLink = sanitizedUrl && !disabled;
+  const useLink = href && !disabled;
   otherProps[useLink ? 'preOnClick' : 'onClick'] = onClick || incrementClicks;
 
   if (useLink) {
@@ -59,7 +56,7 @@ const Button = props => {
       as={useLink ? Link : 'button'}
       variant={outline ? `outline-${color}` : color}
       type={useLink ? undefined : type}
-      href={disabled ? undefined : sanitizedUrl}
+      href={disabled ? undefined : href}
       disabled={disabled}
       download={useLink ? download : undefined}
       name={useLink ? undefined : name}

src/components/button/Button.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import {omit} from 'ramda';
 import RBCard from 'react-bootstrap/Card';
 import Link from '../../private/Link';
-import {sanitizeAndCheckUrl} from '../../private/util';
 
 /**
  * Use card link to add consistently styled links to your cards. Links can be
@@ -16,16 +15,12 @@ const CardLink = props => {
     disabled,
     className,
     class_name,
-    href,
-    setProps,
     ...otherProps
   } = props;
 
-  const sanitizedUrl = sanitizeAndCheckUrl(href, setProps);
-
   const incrementClicks = () => {
-    if (!disabled && setProps) {
-      setProps({
+    if (!disabled && props.setProps) {
+      props.setProps({
         n_clicks: props.n_clicks + 1,
         n_clicks_timestamp: Date.now()
       });
@@ -40,9 +35,8 @@ const CardLink = props => {
       as={Link}
       preOnClick={incrementClicks}
       disabled={disabled}
-      href={sanitizedUrl}
       className={class_name || className}
-      {...omit(['n_clicks', 'n_clicks_timestamp'], otherProps)}
+      {...omit(['setProps', 'n_clicks', 'n_clicks_timestamp'], otherProps)}
     >
       {children}
     </RBCard.Link>