`react-native-render-html` default WebView props (`originWhitelist `)

Question

I am using react-native-render-html in my react-native application and successfully rendering HTML:

import RenderHtml from 'react-native-render-html'
import WebView from 'react-native-webview'

export const MyComponent = (props: {html: string, width: number}) => (
    <RenderHtml
        source={{html: props.html}}
        contentWidth={props.width}
        WebView={WebView}
     />
)

How can I specify the originWhitelist props for the WebView component (or any other WebView props for that matter)?

I intend to use originWhitelist to control the list of origins from which I can load content in an attempt to reduce the surface area for an attacker who could control the HTML content (I am using the '@native-html/iframe-plugin' to load iframes. Note that I have not included that code for brevity).

score 2 · Accepted Answer · answered Aug 03 '21 at 08:35

You can use defaultWebViewProps for that purpose:

import RenderHtml from 'react-native-render-html'
import WebView from 'react-native-webview'

const webViewProps = {
  originWhitelist: "*"
};

export const MyComponent = (props: {html: string, width: number}) => (
    <RenderHtml
        source={{html: props.html}}
        contentWidth={props.width}
        WebView={WebView}
        defaultWebViewProps={webViewProps}
     />
)

`react-native-render-html` default WebView props (`originWhitelist `)

1 Answers1

Linked