security: harden

Author: sparten11740

src/WebView.android.tsx

@@ -27,6 +27,7 @@ import {
 } from './WebViewTypes';
 
 import styles from './WebView.styles';
+import validateProps from './validation'
 
 const { getWebViewDefaultUserAgent } = NativeModules.RNCWebViewUtils;
 
@@ -58,39 +59,41 @@ const setSupportMultipleWindows = true;
 const mixedContentMode = 'never'
 const hardMinimumChromeVersion = '100.0' // TODO: determinime a good lower bound
 
-const WebViewComponent = forwardRef<{}, AndroidWebViewProps>(({
-  overScrollMode = 'always',
-  javaScriptEnabled = true,
-  thirdPartyCookiesEnabled = true,
-  scalesPageToFit = true,
-  saveFormDataDisabled = false,
-  cacheEnabled = true,
-  androidHardwareAccelerationDisabled = false,
-  androidLayerType = "none",
-  originWhitelist = defaultOriginWhitelist,
-  deeplinkWhitelist = defaultDeeplinkWhitelist,
-  setBuiltInZoomControls = true,
-  setDisplayZoomControls = false,
-  nestedScrollEnabled = false,
-  startInLoadingState,
-  onLoadStart,
-  onError,
-  onLoad,
-  onLoadEnd,
-  onMessage: onMessageProp,
-  onOpenWindow: onOpenWindowProp,
-  renderLoading,
-  renderError,
-  style,
-  containerStyle,
-  source,
-  onShouldStartLoadWithRequest: onShouldStartLoadWithRequestProp,
-  validateMeta,
-  validateData,
-  minimumChromeVersion,
-  unsupportedVersionComponent: UnsupportedVersionComponent,
-  ...otherProps
-}, ref) => {
+const WebViewComponent = forwardRef<{}, AndroidWebViewProps>((props, ref) => {
+  const {
+    overScrollMode = 'always',
+    javaScriptEnabled = true,
+    thirdPartyCookiesEnabled = true,
+    scalesPageToFit = true,
+    saveFormDataDisabled = false,
+    cacheEnabled = true,
+    androidHardwareAccelerationDisabled = false,
+    androidLayerType = "none",
+    originWhitelist = defaultOriginWhitelist,
+    deeplinkWhitelist = defaultDeeplinkWhitelist,
+    setBuiltInZoomControls = true,
+    setDisplayZoomControls = false,
+    nestedScrollEnabled = false,
+    startInLoadingState,
+    onLoadStart,
+    onError,
+    onLoad,
+    onLoadEnd,
+    onMessage: onMessageProp,
+    onOpenWindow: onOpenWindowProp,
+    renderLoading,
+    renderError,
+    style,
+    containerStyle,
+    source,
+    onShouldStartLoadWithRequest: onShouldStartLoadWithRequestProp,
+    validateMeta,
+    validateData,
+    minimumChromeVersion,
+    unsupportedVersionComponent: UnsupportedVersionComponent,
+    ...otherProps
+  } = validateProps(props)
+
   const messagingModuleName = useRef<string>(`WebViewMessageHandler${uniqueRef += 1}`).current;
   const webViewRef = useRef<NativeWebViewAndroid | null>(null);
 
@@ -197,10 +200,7 @@ const WebViewComponent = forwardRef<{}, AndroidWebViewProps>(({
     }
   }
 
-  if (typeof source === "object" && 'uri' in source && !passesWhitelist(source.uri)){
-    // eslint-disable-next-line
-    source = {uri: "about:blank"};
-  }
+  const safeSource = (typeof source === "object" && 'uri' in source && !passesWhitelist(source.uri)) ? { uri: 'about:blank' } : source;
 
   const NativeWebView = RNCWebView;
 
@@ -220,7 +220,7 @@ const WebViewComponent = forwardRef<{}, AndroidWebViewProps>(({
 
     ref={webViewRef}
     // TODO: find a better way to type this.
-    source={source}
+    source={safeSource}
     style={webViewStyles}
     overScrollMode={overScrollMode}
     javaScriptEnabled={javaScriptEnabled}

src/WebView.ios.tsx

@@ -26,6 +26,7 @@ import {
 } from './WebViewTypes';
 
 import styles from './WebView.styles';
+import validateProps from './validation'
 
 const codegenNativeCommands = codegenNativeCommandsUntyped as <T extends {}>(options: { supportedCommands: (keyof T)[] }) => T;
 
@@ -67,34 +68,36 @@ const enableApplePay = false;
 const dataDetectorTypes = 'none';
 const hardMinimumIOSVersion = '12.5.6 <13, 13.6.1 <14, 14.8.1 <15, 15.7.1'
 
-const WebViewComponent = forwardRef<{}, IOSWebViewProps>(({
-  javaScriptEnabled = true,
-  cacheEnabled = true,
-  originWhitelist = defaultOriginWhitelist,
-  deeplinkWhitelist = defaultDeeplinkWhitelist,
-  textInteractionEnabled= true,
-  injectedJavaScript,
-  injectedJavaScriptBeforeContentLoaded,
-  startInLoadingState,
-  onLoadStart,
-  onError,
-  onLoad,
-  onLoadEnd,
-  onMessage: onMessageProp,
-  renderLoading,
-  renderError,
-  style,
-  containerStyle,
-  source,
-  incognito,
-  validateMeta,
-  validateData,
-  decelerationRate: decelerationRateProp,
-  onShouldStartLoadWithRequest: onShouldStartLoadWithRequestProp,
-  minimumIOSVersion,
-  unsupportedVersionComponent: UnsupportedVersionComponent,
-  ...otherProps
-}, ref) => {
+const WebViewComponent = forwardRef<{}, IOSWebViewProps>((props, ref) => {
+  const {
+    javaScriptEnabled = true,
+    cacheEnabled = true,
+    originWhitelist = defaultOriginWhitelist,
+    deeplinkWhitelist = defaultDeeplinkWhitelist,
+    textInteractionEnabled= true,
+    injectedJavaScript,
+    injectedJavaScriptBeforeContentLoaded,
+    startInLoadingState,
+    onLoadStart,
+    onError,
+    onLoad,
+    onLoadEnd,
+    onMessage: onMessageProp,
+    renderLoading,
+    renderError,
+    style,
+    containerStyle,
+    source,
+    incognito,
+    validateMeta,
+    validateData,
+    decelerationRate: decelerationRateProp,
+    onShouldStartLoadWithRequest: onShouldStartLoadWithRequestProp,
+    minimumIOSVersion,
+    unsupportedVersionComponent: UnsupportedVersionComponent,
+    ...otherProps
+  } = validateProps(props)
+
   const webViewRef = useRef<NativeWebViewIOS | null>(null);
 
   const onShouldStartLoadWithRequestCallback = useCallback((

src/__tests__/validation-test.js

@@ -0,0 +1,39 @@
+import validateProps from '../validation'
+
+describe('validateProps', () => {
+
+  test('throws when providing static html without origin whitelist', () => {
+    expect(() => {
+      validateProps({
+        source: { html: '<h1>Wayne Foundation</h1>'}
+      })
+    }).toThrow('originWhitelist')
+  })
+
+  test('throws when providing static html with wildcard whitelist', () => {
+    expect(() => {
+      validateProps({
+        originWhitelist: ['*', 'http://localhost'],
+        source: { html: '<h1>Wayne Foundation</h1>'}
+      })
+    }).toThrow('originWhitelist')
+  })
+
+  test('throws when providing static html with empty whitelist', () => {
+    expect(() => {
+      validateProps({
+        originWhitelist: [],
+        source: { html: '<h1>Wayne Foundation</h1>'}
+      })
+    }).toThrow('originWhitelist')
+  })
+
+  test('returns props when origin whitelist present', () => {
+    const props = {
+      originWhitelist: ['http://localhost'],
+      source: { html: '<h1>Wayne Foundation</h1>'}
+    }
+
+    expect(validateProps(props)).toBe(props)
+  })
+})

src/validation.ts

@@ -0,0 +1,13 @@
+import invariant from 'invariant'
+import { AndroidWebViewProps, IOSWebViewProps } from './WebViewTypes'
+
+const validateProps = <P extends IOSWebViewProps | AndroidWebViewProps>(props: P): P => {
+  if(props.source && 'html' in props.source){
+    const { originWhitelist } = props
+    invariant(originWhitelist  && originWhitelist.length > 0 && !originWhitelist.includes('*'), 'originWhitelist is required when using html prop and cannot include *')
+  }
+
+  return props
+}
+
+export default validateProps