[WebView] Error loading page - Error Code: -1022

[julesmoretti]

Description

Used a component to load a webpage for an iOS app. but upon propagating it I am getting:

Reproduction

Here is the code for it:

import React, {
  Component,
} from 'react';

import {
  StyleSheet,
  View,
  WebView,
} from 'react-native';

export default class Map extends Component {
  componentDidMount() {
    console.log('Map:: componentDidMount');
  }

  render() {
    return (
      <View
        style={styles.container}
      >
        <WebView
          source={{uri: 'http://google.com'}}
          style={[{
            position: 'absolute',
            top: 0,
            left: 0,
            height: 500,
            width: 100
          }]}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

Solution

Provide explanation on how to resolve this and update the readme to explain how to fix this issue through your doc.

Additional Information

• React Native version: ^0.41.2
• Platform: iOS
• Operating System: Mac OS - 10.12.3

[petermikitsh]

@julesmoretti Have you tried using https://google.com? Plain old http will throw errors, that's normal for iOS.

[julesmoretti]

@petermikitsh - https:// for google works. But the sites I am trying to get working does not have any https link to those. They use http:// So how can I make it work for http only addresses?

Do I have to do anything to the Xcode project?

Thank you for your help :)

[petermikitsh]

@julesmoretti You can carve out exceptions in your info.plist file (as described here), but it may impact your ability to ship those exception to the app store.

For cases of local development purposes, using http should be no issue once you create those exceptions.

[julesmoretti]

@petermikitsh - thank you for this info. That is a useful tip.

I am not able to see partially the content of the site I am trying to serve.

In my case the site I am trying to serve is: http://nhn.newhomesnavigator.com/

I am seeing some of the UI but not the google map. Are you aware if there are any more configurations or restrictions for me to include or be aware of for this implementation?

Or would it because I also need to include google maps url?

For your reference:

    <key>NSExceptionDomains</key>
    <dict>
      <key>localhost</key>
      <dict>
        <key>NSExceptionAllowsInsecureHTTPLoads</key>
        <true/>
      </dict>
      <key>newhomesnavigator.com</key>
      <dict>
        <key>NSIncludesSubdomains</key>
        <true/>
        <key>NSExceptionAllowsInsecureHTTPLoads</key>
        <true/>
        <key>NSExceptionRequiresForwardSecrecy</key>
        <true/>
      </dict>
    </dict>

EDIT:

I tried this with no success:

    <key>NSExceptionDomains</key>
    <dict>
      <key>localhost</key>
      <dict>
        <key>NSExceptionAllowsInsecureHTTPLoads</key>
        <true/>
      </dict>
      <key>newhomesnavigator.com</key>
      <dict>
        <key>NSIncludesSubdomains</key>
        <true/>
        <key>NSExceptionAllowsInsecureHTTPLoads</key>
        <true/>
        <key>NSExceptionRequiresForwardSecrecy</key>
        <true/>
      </dict>
      <key>google.com</key>
      <dict>
        <key>NSIncludesSubdomains</key>
        <true/>
        <key>NSExceptionAllowsInsecureHTTPLoads</key>
        <true/>
        <key>NSExceptionRequiresForwardSecrecy</key>
        <true/>
      </dict>
    </dict>

EDIT #2:

2017-03-07 09:50:49.859212 nhn[2246:636623] [DYMTLInitPlatform] platform initialization successful
2017-03-07 09:50:50.334117 nhn[2246:636630] Metal GPU Frame Capture Enabled
2017-03-07 09:50:50.334654 nhn[2246:636630] Metal API Validation Enabled
2017-03-07 09:50:51.265903 nhn[2246:636645] WF: === Starting WebFilter logging for process nhn
2017-03-07 09:50:51.266311 nhn[2246:636645] WF: _userSettingsForUser mobile: {
    filterBlacklist =     (
    );
    filterWhitelist =     (
    );
    restrictWeb = 1;
    useContentFilter = 0;
    useContentFilterOverrides = 0;
    whitelistEnabled = 0;
}
2017-03-07 09:50:51.267332 nhn[2246:636645] WF: _WebFilterIsActive returning: NO
2017-03-07 09:50:51.308774 nhn[2246:636651] App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.plist file.

I guess something else gets blocked off but not sure which one.

EDIT #3 (lol):

Probably means I have to add all these domains into the playlist right?

[petermikitsh]

Instead of editing the Info.plist directly, you might have more success through the XCode interface. Select Info.plist in the left hand pane and then add something like this -- this would allow non-secure traffic on localhost.

[julesmoretti]

@petermikitsh thank you :)

All working now

[d2rivendell]

@julesmoretti I have the some error like yours. But it still go wrong After I add domain in info.plist. Can you show me your setting please?

[julesmoretti]

@leonhwa

	<dict>
		<key>NSAllowsArbitraryLoads</key>
		<true/>
		<key>NSExceptionDomains</key>
		<dict>
			<key>bootstrapcdn.com</key>
			<dict>
				<key>NSExceptionAllowsInsecureHTTPLoads</key>
				<true/>
				<key>NSExceptionRequiresForwardSecrecy</key>
				<true/>
				<key>NSIncludesSubdomains</key>
				<true/>
			</dict>
			<key>cloudflare.com</key>
			<dict>
				<key>NSExceptionAllowsInsecureHTTPLoads</key>
				<true/>
				<key>NSExceptionRequiresForwardSecrecy</key>
				<true/>
				<key>NSIncludesSubdomains</key>
				<true/>
			</dict>
			<key>facebook.com</key>
			<dict>
				<key>NSExceptionAllowsInsecureHTTPLoads</key>
				<true/>
				<key>NSExceptionRequiresForwardSecrecy</key>
				<true/>
				<key>NSIncludesSubdomains</key>
				<true/>
			</dict>
			<key>facebook.net</key>
			<dict>
				<key>NSExceptionAllowsInsecureHTTPLoads</key>
				<true/>
				<key>NSExceptionRequiresForwardSecrecy</key>
				<true/>
				<key>NSIncludesSubdomains</key>
				<true/>
			</dict>
			<key>google.com</key>
			<dict>
				<key>NSExceptionAllowsInsecureHTTPLoads</key>
				<true/>
				<key>NSExceptionRequiresForwardSecrecy</key>
				<true/>
				<key>NSIncludesSubdomains</key>
				<true/>
			</dict>
			<key>googleapis.com</key>
			<dict>
				<key>NSExceptionAllowsInsecureHTTPLoads</key>
				<true/>
				<key>NSExceptionRequiresForwardSecrecy</key>
				<true/>
				<key>NSIncludesSubdomains</key>
				<true/>
			</dict>
			<key>gstatic.net</key>
			<dict>
				<key>NSExceptionAllowsInsecureHTTPLoads</key>
				<true/>
				<key>NSExceptionRequiresForwardSecrecy</key>
				<true/>
				<key>NSIncludesSubdomains</key>
				<true/>
			</dict>
			<key>localhost</key>
			<dict>
				<key>NSExceptionAllowsInsecureHTTPLoads</key>
				<true/>
			</dict>
			<key>newhomesnavigator.com</key>
			<dict>
				<key>NSExceptionAllowsInsecureHTTPLoads</key>
				<true/>
				<key>NSExceptionRequiresForwardSecrecy</key>
				<true/>
				<key>NSIncludesSubdomains</key>
				<true/>
			</dict>
			<key>toptennewhomes.com</key>
			<dict>
				<key>NSExceptionAllowsInsecureHTTPLoads</key>
				<true/>
				<key>NSExceptionRequiresForwardSecrecy</key>
				<true/>
				<key>NSIncludesSubdomains</key>
				<true/>
			</dict>
		</dict>
	</dict>