Sanitize html props with xss vulnerability.

CHANGELOG.md

@@ -4,8 +4,13 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ## [UNRELEASED]
 
-### Added
+## Added
 - [#2695](https://github.com/plotly/dash/pull/2695) Adds  `triggered_id` to `dash_clientside.callback_context`.  Fixes [#2692](https://github.com/plotly/dash/issues/2692)
+- [#2732](https://github.com/plotly/dash/pull/2732) Add special key `_dash_error` to `setProps`, allowing component developers to send error without throwing in render. Usage `props.setProps({_dash_error: new Error("custom error")})`
+
+## Fixed
+
+- [#2732](https://github.com/plotly/dash/pull/2732) Sanitize html props that are vulnerable to xss vulnerability if user data is inserted. Fix Validate url to prevent XSS attacks [#2729](https://github.com/plotly/dash/issues/2729)
 
 ## Changed
 - [#2652](https://github.com/plotly/dash/pull/2652) dcc.Clipboard supports htm_content and triggers a copy to clipboard when n_clicks are changed

components/dash-core-components/package.json

@@ -35,6 +35,7 @@
   "maintainer": "Alex Johnson <alex@plotly.com>",
   "license": "MIT",
   "dependencies": {
+    "@braintree/sanitize-url": "^7.0.0",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
@@ -49,7 +50,7 @@
     "moment": "^2.29.4",
     "node-polyfill-webpack-plugin": "^2.0.1",
     "prop-types": "^15.8.1",
-    "ramda": "^0.29.0",
+    "ramda": "^0.29.1",
     "rc-slider": "^9.7.5",
     "react-addons-shallow-compare": "^15.6.3",
     "react-dates": "^21.8.0",
@@ -64,11 +65,11 @@
     "uniqid": "^5.4.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.23.0",
-    "@babel/core": "^7.23.0",
+    "@babel/cli": "^7.23.4",
+    "@babel/core": "^7.23.7",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.22.20",
-    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-env": "^7.23.8",
+    "@babel/preset-react": "^7.23.3",
     "@plotly/dash-component-plugins": "^1.2.3",
     "@plotly/webpack-dash-dynamic-import": "^1.3.0",
     "babel-loader": "^9.1.3",
@@ -88,9 +89,10 @@
     "react-jsx-parser": "1.21.0",
     "style-loader": "^3.3.3",
     "styled-jsx": "^3.4.4",
-    "webpack": "^5.88.2",
+    "webpack": "^5.90.0",
     "webpack-cli": "^5.1.4"
   },
+  "optionalDependencies": { "fsevents": "*" },
   "files": [
     "/dash_core_components/*{.js,.map}",
     "/lib/"

components/dash-core-components/src/components/Link.react.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 
-import React, {Component} from 'react';
-
+import React, {useEffect, useMemo} from 'react';
+import {sanitizeUrl} from '@braintree/sanitize-url';
 import {isNil} from 'ramda';
 
 /*
@@ -33,15 +33,23 @@ CustomEvent.prototype = window.Event.prototype;
  * For links with destinations outside the current app, `html.A` is a better
  * component to use.
  */
-export default class Link extends Component {
-    constructor(props) {
-        super(props);
-        this.updateLocation = this.updateLocation.bind(this);
-    }
+const Link = props => {
+    const {
+        className,
+        style,
+        id,
+        href,
+        loading_state,
+        children,
+        title,
+        target,
+        refresh,
+        setProps,
+    } = props;
+    const sanitizedUrl = useMemo(() => sanitizeUrl(href), [href]);
 
-    updateLocation(e) {
+    const updateLocation = e => {
         const hasModifiers = e.metaKey || e.shiftKey || e.altKey || e.ctrlKey;
-        const {href, refresh, target} = this.props;
 
         if (hasModifiers) {
             return;
@@ -52,49 +60,40 @@ export default class Link extends Component {
         // prevent anchor from updating location
         e.preventDefault();
         if (refresh) {
-            window.location = href;
+            window.location = sanitizedUrl;
         } else {
-            window.history.pushState({}, '', href);
+            window.history.pushState({}, '', sanitizedUrl);
             window.dispatchEvent(new CustomEvent('_dashprivate_pushstate'));
         }
         // scroll back to top
         window.scrollTo(0, 0);
-    }
+    };
 
-    render() {
-        const {
-            className,
-            style,
-            id,
-            href,
-            loading_state,
-            children,
-            title,
-            target,
-        } = this.props;
-        /*
-         * ideally, we would use cloneElement however
-         * that doesn't work with dash's recursive
-         * renderTree implementation for some reason
-         */
-        return (
-            <a
-                data-dash-is-loading={
-                    (loading_state && loading_state.is_loading) || undefined
-                }
-                id={id}
-                className={className}
-                style={style}
-                href={href}
-                onClick={e => this.updateLocation(e)}
-                title={title}
-                target={target}
-            >
-                {isNil(children) ? href : children}
-            </a>
-        );
-    }
-}
+    useEffect(() => {
+        if (sanitizedUrl !== href) {
+            setProps({
+                _dash_error: new Error(`Dangerous link detected:: ${href}`),
+            });
+        }
+    }, [href, sanitizedUrl]);
+
+    return (
+        <a
+            data-dash-is-loading={
+                (loading_state && loading_state.is_loading) || undefined
+            }
+            id={id}
+            className={className}
+            style={style}
+            href={sanitizedUrl}
+            onClick={updateLocation}
+            title={title}
+            target={target}
+        >
+            {isNil(children) ? sanitizedUrl : children}
+        </a>
+    );
+};
 
 Link.propTypes = {
     /**
@@ -151,8 +150,10 @@ Link.propTypes = {
          */
         component_name: PropTypes.string,
     }),
+    setProps: PropTypes.func,
 };
 
 Link.defaultProps = {
     refresh: false,
 };
+export default Link;