Validate url to prevent XSS attacks

[Grant]

I've identified a Cross-Site Scripting (XSS) vulnerability in 'dash-core-components'

Vulnerability Details:

• Severity: High/Critical
• Description: There's a risk of malicious script execution when the href of the a tag is controlled by an adversary.

Steps to Reproduce:
In a React.js project:

import { Link } from 'dash-core-components'

<Link href={`javascript:alert(1)`} />

Then the malicious code alert(1) will be executed. Any React.js application using this package may be vulnerable to XSS.

Suggested Fix or Mitigation:

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

Lines 64 to 94 in 000ec18

     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> 

It is best practice for a React.js components package to sanitize the href attribute before passing it to an tag. React.js and many popular libraries such as react-router-dom and Next.js also ensure the safety of href attributes. For instance, React.js issues warnings about URLs starting with javascript: and is planning to block these in future versions, as indicated in this pull request.

Please consider validating the href to resolve this vulnerability, thanks!

[Alex Johnson]

Thank you @gtsp233 - we're aware of a matching vulnerability in the A component in dash-html-components and we're currently investigating whether any other components are susceptible. href validation is indeed the approach we intend to take.

I'll note that this would only be exploitable in Dash apps that include some mechanism to store user input to be reloaded by a different user. Very few public Dash apps do this, but private apps sometimes do.

[Ann Marie Ward]

Could other community libraries have the same vulnerability such as the NavLink in Dash Bootstrap Components, and NavLink in Dash Mantine Components?

[Alex Johnson]

@AnnMarieW quite possibly - it depends whether the underlying bootstrap & mantine components do anything to sanitize their inputs. Would you be up for trying them? I'm sure they would be grateful for help demonstrating that this either is or is not an issue. Reproducing in Dash is simple, put dcc.Link('dcc-link', href='javascript:alert(1)') in your layout - if you see an alert when you click the link it's vulnerable. Should be very similar for these other libraries.

[Ann Marie Ward]

Hi @alexcjohnson - I just tried it and it's a vulnerability in both libraries. I'll open an issue in each and link it here for more info.