Fix: sanitize URLs before placing them on the page (#488)

package.json

@@ -23,6 +23,7 @@
   "dependencies": {
     "@atproto/api": "0.2.7",
     "@bam.tech/react-native-image-resizer": "^3.0.4",
+    "@braintree/sanitize-url": "^6.0.2",
     "@expo/webpack-config": "^18.0.1",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-regular-svg-icons": "^6.1.1",

src/view/com/util/Link.tsx

@@ -23,6 +23,7 @@ import {router} from '../../../routes'
 import {useStores, RootStoreModel} from 'state/index'
 import {convertBskyAppUrlIfNeeded} from 'lib/strings/url-helpers'
 import {isDesktopWeb} from 'platform/detection'
+import {sanitizeUrl} from '@braintree/sanitize-url'
 
 type Event =
   | React.MouseEvent<HTMLAnchorElement, MouseEvent>
@@ -51,7 +52,7 @@ export const Link = observer(function Link({
   const onPress = React.useCallback(
     (e?: Event) => {
       if (typeof href === 'string') {
-        return onPressInner(store, navigation, href, e)
+        return onPressInner(store, navigation, sanitizeUrl(href), e)
       }
     },
     [store, navigation, href],
@@ -63,7 +64,7 @@ export const Link = observer(function Link({
         testID={testID}
         onPress={onPress}
         // @ts-ignore web only -prf
-        href={asAnchor ? href : undefined}>
+        href={asAnchor ? sanitizeUrl(href) : undefined}>
         <View style={style}>
           {children ? children : <Text>{title || 'link'}</Text>}
         </View>
@@ -76,7 +77,7 @@ export const Link = observer(function Link({
       style={style}
       onPress={onPress}
       // @ts-ignore web only -prf
-      href={asAnchor ? href : undefined}>
+      href={asAnchor ? sanitizeUrl(href) : undefined}>
       {children ? children : <Text>{title || 'link'}</Text>}
     </TouchableOpacity>
   )
@@ -101,13 +102,13 @@ export const TextLink = observer(function TextLink({
   lineHeight?: number
   dataSet?: any
 }) {
-  const {...props} = useLinkProps({to: href})
+  const {...props} = useLinkProps({to: sanitizeUrl(href)})
   const store = useStores()
   const navigation = useNavigation<NavigationProp>()
 
   props.onPress = React.useCallback(
     (e?: Event) => {
-      return onPressInner(store, navigation, href, e)
+      return onPressInner(store, navigation, sanitizeUrl(href), e)
     },
     [store, navigation, href],
   )

yarn.lock

@@ -1326,6 +1326,11 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@braintree/sanitize-url@^6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-6.0.2.tgz#6110f918d273fe2af8ea1c4398a88774bb9fc12f"
+  integrity sha512-Tbsj02wXCbqGmzdnXNk0SOF19ChhRU70BsroIi4Pm6Ehp56in6vch94mfbdQ17DozxkL3BAVjbZ4Qc1a0HFRAg==
+
 "@cspotcode/source-map-support@^0.8.0":
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz#00629c35a688e05a88b1cda684fb9d5e73f000a1"