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).
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}
/>
)