segmentio · colinlohner · Mar 26, 2020 · Mar 26, 2020 · Mar 30, 2020 · Mar 30, 2020
diff --git a/README.md b/README.md
@@ -308,7 +308,7 @@ setClassNamePrefix('📦')
 
 ### Safe `href`s
 
-By default `ui-box` does not ensure that urls use safe protocols when passed to an element. But we built this functionality into `ui-box` to  protect the end users of the products you are building. You can alter this by using `configureSafeHref({enabled?: boolean, origin?: string})`. This will ensure that only safe protocols are used (`http:`, `https:`, `mailto:`, `tel:`, and `data:`) and that the correct `rel` values are added (`noopener`, `noreferrer`(for external links)).
+By default `ui-box` does not ensure that urls use safe protocols when passed to an element. But we built this functionality into `ui-box` to  protect the end users of the products you are building. You can alter this by using `configureSafeHref({enabled?: boolean, origin?: string, additionalProtocols?: string[]})`. This will ensure that only safe protocols are used (`http:`, `https:`, `mailto:`, and `tel:`), that the correct `rel` values are added (`noopener`, `noreferrer`(for external links)), and any additional protocols passed are treated as safe.
 
 ```js
 import { configureSafeHref } from 'ui-box'
@@ -320,14 +320,16 @@ configureSafeHref({
 import { configureSafeHref } from 'ui-box'
 configureSafeHref({
   enabled: true
-  origin: 'https://app.segmentio.com', 
+  origin: 'https://app.segmentio.com',
+  additionalProtocols: ['data:'], 
 })
 ```
 
-Additionally you can overwrite the behavoir on an individual component basis using the prop `allowUnsafeHref`
+Additionally you can overwrite the behavoir on an individual component basis using the prop `allowUnsafeHref` and `allowProtocol`. Setting `allowUnsafeHref` completely bypasses all safeHref functionality (protocol checks, rel checks) whereas `allowProtocol` only bypasses protocol checks.
 
 ```jsx
 <Box is="a" href="javascript:alert('hi')" allowUnsafeHref={true}>This is unsafe</Box>
+<Box is="a" href="data:text/html,<html><h1>Hi</h1><script>alert('hi')</script></html>" allowProtocol={true}>This is unsafe</Box>
 ```
 
 ### Server side rendering

diff --git a/src/box.tsx b/src/box.tsx
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types'
 import {BoxComponent} from './types/box-types'
 import {propTypes} from './enhancers'
 import enhanceProps from './enhance-props'
-import {extractAnchorProps, getUseSafeHref} from './utils/safeHref'
+import {extractAnchorProps, getUseSafeHref, HrefData} from './utils/safeHref'
 
-const Box: BoxComponent = ({ is = 'div', innerRef, children, allowUnsafeHref, ...props }) => {
+const Box: BoxComponent = ({ is = 'div', innerRef, children, allowUnsafeHref, allowProtocol, ...props }) => {
   // Convert the CSS props to class names (and inject the styles)
   const {className, enhancedProps: parsedProps} = enhanceProps(props)
 
@@ -22,7 +22,16 @@ const Box: BoxComponent = ({ is = 'div', innerRef, children, allowUnsafeHref, ..
    */
   const safeHrefEnabled = (typeof allowUnsafeHref === 'boolean' ? !allowUnsafeHref : getUseSafeHref()) && is === 'a' && parsedProps.href
   if (safeHrefEnabled) {
-    const {safeHref, safeRel} = extractAnchorProps(parsedProps.href, parsedProps.rel)
+    const hrefData:HrefData = {
+      href: parsedProps.href,
+      rel: parsedProps.rel,
+    }
+
+    if (allowProtocol) {
+      hrefData.allowProtocol = allowProtocol
+    }
+
+    const {safeHref, safeRel} = extractAnchorProps(hrefData)
     parsedProps.href = safeHref
     parsedProps.rel = safeRel
   }

diff --git a/src/types/box-types.ts b/src/types/box-types.ts
@@ -59,6 +59,11 @@ export type BoxProps<T extends Is> = InheritedProps<T> &
      * Allows the high level value of safeHref to be overwritten on an individual component basis
      */
     allowUnsafeHref?: boolean
+
+    /**
+     * Allows an unsafe protocol to be used on an individual component basis
+     */
+    allowProtocol?: boolean
   }
 
 export interface BoxComponent {

diff --git a/src/utils/safeHref.ts b/src/utils/safeHref.ts
@@ -3,13 +3,21 @@ export interface URLInfo {
     sameOrigin: boolean
 }
 
+export interface HrefData {
+    href: string
+    rel: string
+    allowProtocol?: boolean
+}
+
 export interface SafeHrefConfigObj {
     enabled?: boolean
     origin?: string
+    additionalProtocols?: string[]
 }
 
 const PROTOCOL_REGEX = /^[a-z]+:/
 const ORIGIN_REGEX = /^(?:[a-z]+:?:)?(?:\/\/)?([^\/\?]+)/
+const safeProtocols = ['http:', 'https:', 'mailto:', 'tel:']
 let useSafeHref = false
 let globalOrigin = typeof window !== 'undefined' ? window.location.origin : false
 
@@ -21,33 +29,32 @@ export function configureSafeHref(configObject: SafeHrefConfigObj) {
     if (configObject.origin) {
         globalOrigin = configObject.origin
     }
+
+    if (configObject.additionalProtocols && configObject.additionalProtocols.length) {
+        safeProtocols.push(...configObject.additionalProtocols)
+    }
 }
 
 export function getUseSafeHref(): boolean {
     return useSafeHref
 }
 
-export function getURLInfo(url: string): URLInfo {
-    /**
-     * An array of the safely allowed url protocols
-     */
-    const safeProtocols = ['http:', 'https:', 'mailto:', 'tel:', 'data:']
-
+export function getURLInfo(url: string, allowProtocol: boolean): URLInfo {
     /**
      * - Find protocol of URL or set to 'relative'
      * - Find origin of URL
      * - Determine if sameOrigin
      * - Determine if protocol of URL is safe
      */
-    const protocolResult = url.match(PROTOCOL_REGEX)
+    const protocolResult = url.replace(' ', '').match(PROTOCOL_REGEX)
     const originResult = url.match(ORIGIN_REGEX)
     const urlProtocol = protocolResult ? protocolResult[0] : 'relative'
     let sameOrigin = urlProtocol === 'relative'
     if (!sameOrigin && globalOrigin) {
         sameOrigin = globalOrigin === (originResult && originResult[0])
     }
 
-    const isSafeProtocol = sameOrigin ? true : safeProtocols.includes(urlProtocol)
+    const isSafeProtocol = (allowProtocol || sameOrigin) ? true : safeProtocols.includes(urlProtocol)
     if (!isSafeProtocol) {
         /**
          * If the url is unsafe, put a error in the console, and return the URLInfo object
@@ -72,11 +79,14 @@ export function getURLInfo(url: string): URLInfo {
     }
 }
 
-export function extractAnchorProps(href: string, rel: string) {
+export function extractAnchorProps(hrefData: HrefData) {
+    const {href, rel} = hrefData
+    const allowProtocol = hrefData.allowProtocol || false
+
      /**
      * Get url info and update href
      */
-    const urlInfo = getURLInfo(href)
+    const urlInfo = getURLInfo(href, allowProtocol)
     const safeHref = urlInfo.url
 
     /**

diff --git a/tools/story.tsx b/tools/story.tsx
@@ -36,7 +36,7 @@ storiesOf('Box', module)
   })
   .add('safe `href`', () => {
     configureSafeHref({
-      enabled: true
+      enabled: true,
     })
     return (
       <Box paddingTop={30} borderTop="1px solid" marginTop={30}>
@@ -45,6 +45,8 @@ storiesOf('Box', module)
         <Box is="a" href="http://localhost:9009/test">Same Origin Link</Box>
         <Box is="a" href="https://apple.com">External Link</Box>
         <Box is="a" href="javascript:alert('hi')">Javascript protocol Link</Box>
+        <Box is="a" href=" data:text/html,<html><h1>Hi</h1></html>">Data protocol Link</Box>
+        <Box is="a" href=" data:text/html,<html><h1>Hi</h1><script>alert('hi')</script></html>" allowProtocol={true}>Allow protocol Link</Box>
         <Box is="a" href="javascript:alert('hi')" allowUnsafeHref={true}>Overwride Safe Href</Box>
       </Box>
     )