WebView with inline HTML

[rodrigobdz]

WebView not working any more as expected when used with inline HTML.

Goal

Discuss the breaking change before sending a PR to improve the current docs. It seems counterintuitive to add an originWhitelist wildcard in order to render inline HTML.

Background

This issue was migrated from facebook/react-native/issues/20464.

The regression was introduced in commit 634e7e1 by @mmmulani with commit message:

iOS only: Breaking Change: Restrict WebView to only http(s) URLs

Summary:
To prevent people from linking file:// or other URLs inside RN WebViews, default to not allowing those types of URLs.
This adds the originWhitelist to specify other schemes or domains to be allowed.
If the url is not allowed, it will be opened in Safari/by the OS instead.

This is not well documented in CHANGELOG which leads to unexpected breaking behavior. It is also not described as an iOS specific change.

What was the rationale behind the breaking change?

Expected Behavior

Use inline HTML in WebView by passing only the HTML code to render.

import React from 'react'
import { WebView } from 'react-native'

export default () => (
  <WebView
    source={{ html: '<h1>Hello world</h1>' }}
  />
)

Actual Behavior

WebView expects originWhitelist along with source to render inline HTML as suggested in in #19986's comment.

import React from 'react'
import { WebView } from 'react-native'

export default () => (
  <WebView
    originWhitelist={['*']}
    source={{ html: '<h1>Hello world</h1>' }}
  />
)

[axe-fb]

@rodrigobdz - This change was made for security reasons. I understand that this is a breaking change, but by enforcing this, we wanted to ensure that WebViews are secure by default.

Also, I am not sure if this issue belongs in this repo as opposed to the React Native core repo, where we discuss issues. Not sure if others feel the same.

[kelset]

Uhm I guess that since it's something that will not be reversed, and that @axe-fb provided an explanation for why it was changed, then yeah I think that we can close this and @rodrigobdz if you want to submit a PR to the docs clarifying how this affects WebView feel free to mention me in the PR so that I can review & merge asap.

[axe-fb]

@rodrigobdz - I am also sorry we had to make this breaking change. This was filed as a security issue for all existing RN apps :(

[rodrigobdz]

Thanks for the clarification @axe-fb. I will submit a PR this week to complement the docs with a minimal example on how to use inline HTML in WebView.