Sanitize html props with xss vulnerability.

Author: T4rk1n

components/dash-core-components/package-lock.json

@@ -35,6 +35,7 @@
   "maintainer": "Alex Johnson <[email protected]>",
   "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",

components/dash-core-components/package.json

@@ -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,45 @@ 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]);
+
+    /*
+     * 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={sanitizedUrl}
+            onClick={updateLocation}
+            title={title}
+            target={target}
+        >
+            {isNil(children) ? sanitizedUrl : children}
+        </a>
+    );
+};
 
 Link.propTypes = {
     /**
@@ -151,8 +155,10 @@ Link.propTypes = {
          */
         component_name: PropTypes.string,
     }),
+    setProps: PropTypes.func,
 };
 
 Link.defaultProps = {
     refresh: false,
 };
+export default Link;

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

@@ -28,10 +28,11 @@
   "author": "Chris Parmer <[email protected]>",
   "maintainer": "Alex Johnson <[email protected]>",
   "dependencies": {
+    "@braintree/sanitize-url": "^7.0.0",
     "prop-types": "^15.8.1",
     "ramda": "^0.29.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": ">=17",
+    "react-dom": ">=17"
   },
   "devDependencies": {
     "@babel/cli": "^7.23.0",

components/dash-html-components/package-lock.json

@@ -249,27 +249,68 @@ const customDocs = {
  * <body>.`
 };
 
+const customImportsForComponents = {
+    a: `import {sanitizeUrl} from '@braintree/sanitize-url';`,
+    form: `import {sanitizeUrl} from '@braintree/sanitize-url';`,
+    iframe: `import {sanitizeUrl} from '@braintree/sanitize-url';`,
+    object: `import {sanitizeUrl} from '@braintree/sanitize-url';`,
+    embed: `import {sanitizeUrl} from '@braintree/sanitize-url';`,
+    button: `import {sanitizeUrl} from '@braintree/sanitize-url';`,
+    img: `import {sanitizeUrl} from '@braintree/sanitize-url';`,
+}
+
+function createXSSProtection(propName) {
+    return `
+    const ${propName} = React.useMemo(() => props.${propName} ? sanitizeUrl(props.${propName}): undefined, [props.${propName}]);
+    
+    if (${propName}) {
+        extraProps.${propName} = ${propName};
+    }
+    
+    React.useEffect(() => {
+        if (${propName} && ${propName} !== props.${propName}) {
+            props.setProps({_dash_error: new Error(\`Dangerous link detected: \${props.${propName}}\`)})
+        }
+    }, [props.${propName}, ${propName}]);
+    `
+}
+
+
+const customCodesForComponents = {
+    a: createXSSProtection('href'),
+    form: createXSSProtection('action'),
+    iframe: createXSSProtection('src'),
+    object: createXSSProtection('data'),
+    embed: createXSSProtection('src'),
+    button: createXSSProtection('formAction'),
+    img: createXSSProtection('src'),
+}
+
 function generateComponent(Component, element, attributes) {
     const propTypes = generatePropTypes(element, attributes);
 
+    const customImport = customImportsForComponents[element] || '';
     const customDoc = customDocs[element] ? ('\n *' + customDocs[element] + '\n *') : '';
 
+    const customCode = customCodesForComponents[element] || '';
+
     return `
 import React from 'react';
 import PropTypes from 'prop-types';
 import {omit} from 'ramda';
+${customImport}
 
 /**
  * ${Component} is a wrapper for the <${element}> HTML5 element.${customDoc}
  * For detailed attribute info see:
  * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/${element}
  */
 const ${Component} = (props) => {
-    const dataAttributes = {};
+    const extraProps = {};
     if(props.loading_state && props.loading_state.is_loading) {
-        dataAttributes['data-dash-is-loading'] = true;
+        extraProps['data-dash-is-loading'] = true;
     }
-
+${customCode}
      /* remove unnecessary onClick event listeners  */
     const isStatic = props.disable_n_clicks || !props.id;
     return (
@@ -280,8 +321,8 @@ const ${Component} = (props) => {
                 n_clicks_timestamp: Date.now()
             })
             })}
-            {...omit(['n_clicks', 'n_clicks_timestamp', 'loading_state', 'setProps', 'disable_n_clicks'], props)}
-            {...dataAttributes}
+            {...omit(['n_clicks', 'n_clicks_timestamp', 'loading_state', 'setProps', 'disable_n_clicks', 'href'], props)}
+            {...extraProps}
         >
             {props.children}
         </${element}>

components/dash-html-components/package.json

@@ -23,7 +23,7 @@ import {
     pathOr,
     type
 } from 'ramda';
-import {notifyObservers, updateProps} from './actions';
+import {notifyObservers, updateProps, onError} from './actions';
 import isSimpleComponent from './isSimpleComponent';
 import {recordUiEdit} from './persistence';
 import ComponentErrorBoundary from './components/error/ComponentErrorBoundary.react';
@@ -138,9 +138,18 @@ class BaseTreeContainer extends Component {
         const {id} = oldProps;
         const changedProps = pickBy(
             (val, key) => !equals(val, oldProps[key]),
-            newProps
+            dissoc('_dash_error', newProps)
         );
 
+        if (newProps._dash_error) {
+            _dashprivate_dispatch(
+                onError({
+                    type: 'frontEnd',
+                    error: newProps._dash_error
+                })
+            );
+        }
+
         if (!isEmpty(changedProps)) {
             _dashprivate_dispatch((dispatch, getState) => {
                 const {graphs} = getState();

components/dash-html-components/scripts/generate-components.js

@@ -0,0 +1,50 @@
+from dash import Dash, html, dcc
+
+
+def test_xss001_banned_protocols(dash_duo):
+    app = Dash()
+
+    app.layout = html.Div(
+        [
+            dcc.Link("dcc-link", href="javascript:alert(1)", id="dcc-link"),
+            html.Br(),
+            html.A(
+                "html.A", href='javascr\nipt:alert(1);console.log("xss");', id="html-A"
+            ),
+            html.Br(),
+            html.Form(
+                [
+                    html.Button(
+                        "form-action",
+                        formAction="javascript:alert('form-action')",
+                        id="button-form-action",
+                    ),
+                    html.Button("submit", role="submit"),
+                ],
+                action='javascript:alert(1);console.log("xss");',
+                id="form",
+            ),
+            html.Iframe(src='javascript:alert("iframe")', id="iframe-src"),
+            html.ObjectEl(data='javascript:alert("data-object")', id="object-data"),
+            html.Embed(src='javascript:alert("embed")', id="embed-src"),
+            # older browser
+            html.Img(src="javascript:alert('img-sr')", id="img-src"),
+        ]
+    )
+
+    dash_duo.start_server(app)
+
+    for element_id, prop in (
+        ("#dcc-link", "href"),
+        ("#html-A", "href"),
+        ("#iframe-src", "src"),
+        ("#object-data", "data"),
+        ("#embed-src", "src"),
+        ("#button-form-action", "formAction"),
+        ("#img-src", "src"),
+    ):
+
+        element = dash_duo.find_element(element_id)
+        assert (
+            element.get_attribute(prop) == "about:blank"
+        ), f"Failed prop: {element_id}.{prop}"