[Android] Android 9 can not access bundler via cleartext request without additional config #22375

TikiTDO · 2018-11-21T22:41:38Z

Environment

  React Native Environment Info:
    System:
      OS: Linux 4.18 Arch Linux undefined
      CPU: x64 AMD Ryzen 7 1700X Eight-Core Processor
      Memory: 682.77 MB / 7.79 GB
      Shell: 5.6.2 - /bin/zsh
    Binaries:
      Node: 10.7.0 - /usr/local/bin/node
      Yarn: 1.12.3 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
      Watchman: 4.7.0 - /usr/local/bin/watchman
    SDKs:
      Android SDK:
        Build Tools: 23.0.1, 23.0.3, 25.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.2, 27.0.3, 28.0.1, 28.0.3
        API Levels: 23, 24, 26, 27, 28
    npmPackages:
      react-native: 0.57.x => 0.57.4 
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-git-upgrade: 0.2.7

Description

As of Android 9 (API Level 28), the default behavior is to now block all clear text requests, unless a domain is specifically configured to allow this behavior. As a result the bundler URL is not reachable in development mode, with a generic error that offers no context to what the problem could be, or what solutions are available.

The issue is fairly trivial to resolve once the root cause is apparent, but getting to that root cause can take a bit of searching.

Reproducible Demo

Start a react-native app on an Android 9 devices (I only tested physical device), in development mode. The app will not start, and will complain that the bundle can not be fetched.

The text was updated successfully, but these errors were encountered:

meatwallace · 2018-11-25T14:52:12Z

sorry @TikiTDO but can you provide an example of a working network_security_config.xml?

TikiTDO · 2018-11-26T03:39:52Z

@meatwallace I'm using the block almost verbatim from the example:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">localhost</domain>
    </domain-config>
</network-security-config>

Obviously this will only work if you're connecting using USB, and using adb reverse to connect to the bundler, and any servers that the app may need to talk to. If you want connectivity over the network then you will need elements to set it to the values that you require.

hey99xx · 2018-11-26T18:46:55Z

For localhost development these are the domains that we put in our debug app in src/debug/res/xml/network_security_config.xml

<domain includeSubdomains="false">localhost</domain>
<domain includeSubdomains="false">10.0.2.2</domain>
<domain includeSubdomains="false">10.0.3.2</domain>

It's based on

react-native/ReactAndroid/src/main/java/com/facebook/react/modules/systeminfo/AndroidInfoHelpers.java

Lines 20 to 22 in 5939d07

    
           public static final String EMULATOR_LOCALHOST = "10.0.2.2"; 
        
           public static final String GENYMOTION_LOCALHOST = "10.0.3.2"; 
        
           public static final String DEVICE_LOCALHOST = "localhost";

iamdurui · 2018-11-29T03:20:57Z

where is the network_security_config.xml? my apk don't have this !!! @TikiTDO

TikiTDO · 2018-11-29T05:02:44Z

@iamdurui You create it.

Salakar · 2019-01-22T20:10:49Z

Came across this issue today, I used a one-liner to work around this for now;

Added android:usesCleartextTraffic="true" inside <application ...here...></application> in my AndroidManifest.xml. Diff: invertase/react-native-firebase@b887849

Though adding a network-security-config file should be the recommended workaround for now.

Have pushed up a PR that adds the network security config as part of RN devsupport (not part of release builds) 👇

cpojer · 2019-01-23T10:10:12Z

Thanks to @Salakar's PR this will be fixed in RN soon :)

Summary: This fixes #22375. Android API level 28 and above now blocks all [clear text requests](https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted) unless a network configuration rule is added to exclude it specifically. The packager falls into this category and therefore gets blocked; resulting in the app being unable to connect to it. Domains/IPs for the config have been taken from [here](https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/modules/systeminfo/AndroidInfoHelpers.java#L20-L22). This change only adds to DevSupport android resources - so won't affect builds without DevSupport, e.g. release builds. Changelog: ---------- [ANDROID] [DevSupport] add Network Security Config file to allow access to packager via cleartext requests in Android API 28 and above. (fixes #22375) Pull Request resolved: #23105 Differential Revision: D13781516 Pulled By: cpojer fbshipit-source-id: f7574f3e1b0fe6984efe1d0598ef631385c245bc

hey99xx · 2019-01-23T19:46:00Z

@Salakar How is devsupport files filtered out of release builds, I cannot find such information. RN only releases one AAR file, not for debug and release separately.

Also as far as I know having this XML file alone does not do anything, the application needs to point to it in AndroidManifest.xml through:

<application android:networkSecurityConfig="@xml/network_security_config" ... >

Did you confirm your commit fixes the issue in debug build and does not make localhost usable in relase builds? If it doesn't work, maybe we can move the file into template/android/app/src/debug folder path.

…book#23105)" This reverts commit 9f14ac2

…23135) Summary: This is a follow-up PR for #23105 - as mentioned on discord. --- This PR applies the network security config for the RN template project only. New RN projects started with the updated template will be able to connect to the packager on builds built with Android API 28 & above. See https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted for more information about this newly required config, specifically: ![image](https://user-images.githubusercontent.com/5347038/52124287-b3de2580-2620-11e9-958d-bc2da15c6f01.png) Changelog: ---------- [ANDROID] [Template] add Network Security Config file to allow access to packager via cleartext requests in Android API 28 and above. (fixes #22375) Pull Request resolved: #23135 Differential Revision: D13917058 Pulled By: cpojer fbshipit-source-id: 0e66f2cde712c1285d217e3625b73028c3770b65

Summary: This fixes facebook#22375. Android API level 28 and above now blocks all [clear text requests](https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted) unless a network configuration rule is added to exclude it specifically. The packager falls into this category and therefore gets blocked; resulting in the app being unable to connect to it. Domains/IPs for the config have been taken from [here](https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/modules/systeminfo/AndroidInfoHelpers.java#L20-L22). This change only adds to DevSupport android resources - so won't affect builds without DevSupport, e.g. release builds. Changelog: ---------- [ANDROID] [DevSupport] add Network Security Config file to allow access to packager via cleartext requests in Android API 28 and above. (fixes facebook#22375) Pull Request resolved: facebook#23105 Differential Revision: D13781516 Pulled By: cpojer fbshipit-source-id: f7574f3e1b0fe6984efe1d0598ef631385c245bc

…acebook#23105) (facebook#23135) Summary: This is a follow-up PR for facebook#23105 - as mentioned on discord. --- This PR applies the network security config for the RN template project only. New RN projects started with the updated template will be able to connect to the packager on builds built with Android API 28 & above. See https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted for more information about this newly required config, specifically: ![image](https://user-images.githubusercontent.com/5347038/52124287-b3de2580-2620-11e9-958d-bc2da15c6f01.png) Changelog: ---------- [ANDROID] [Template] add Network Security Config file to allow access to packager via cleartext requests in Android API 28 and above. (fixes facebook#22375) Pull Request resolved: facebook#23135 Differential Revision: D13917058 Pulled By: cpojer fbshipit-source-id: 0e66f2cde712c1285d217e3625b73028c3770b65

…23135) Summary: This is a follow-up PR for #23105 - as mentioned on discord. --- This PR applies the network security config for the RN template project only. New RN projects started with the updated template will be able to connect to the packager on builds built with Android API 28 & above. See https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted for more information about this newly required config, specifically: ![image](https://user-images.githubusercontent.com/5347038/52124287-b3de2580-2620-11e9-958d-bc2da15c6f01.png) Changelog: ---------- [ANDROID] [Template] add Network Security Config file to allow access to packager via cleartext requests in Android API 28 and above. (fixes #22375) Pull Request resolved: #23135 Differential Revision: D13917058 Pulled By: cpojer fbshipit-source-id: 0e66f2cde712c1285d217e3625b73028c3770b65

Exilz · 2019-02-21T14:02:00Z

@Salakar 's workaround worked right away on my MI8 with android 9. Thanks 👍

hey99xx · 2019-02-22T02:29:08Z

Well, we iterated on Salakar's work, accidentally broke it, and fixed it again. But by at this point in 0.59.0-rc.2 this should be completely fixed.

RodrigoAngeloValentini · 2019-04-09T13:28:21Z

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>

<application
...
android:usesCleartextTraffic="true"
...
...

`

Summary: This fixes facebook#22375. Android API level 28 and above now blocks all [clear text requests](https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted) unless a network configuration rule is added to exclude it specifically. The packager falls into this category and therefore gets blocked; resulting in the app being unable to connect to it. Domains/IPs for the config have been taken from [here](https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/modules/systeminfo/AndroidInfoHelpers.java#L20-L22). This change only adds to DevSupport android resources - so won't affect builds without DevSupport, e.g. release builds. Changelog: ---------- [ANDROID] [DevSupport] add Network Security Config file to allow access to packager via cleartext requests in Android API 28 and above. (fixes facebook#22375) Pull Request resolved: facebook#23105 Differential Revision: D13781516 Pulled By: cpojer fbshipit-source-id: f7574f3e1b0fe6984efe1d0598ef631385c245bc

…acebook#23105) (facebook#23135) Summary: This is a follow-up PR for facebook#23105 - as mentioned on discord. --- This PR applies the network security config for the RN template project only. New RN projects started with the updated template will be able to connect to the packager on builds built with Android API 28 & above. See https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted for more information about this newly required config, specifically: ![image](https://user-images.githubusercontent.com/5347038/52124287-b3de2580-2620-11e9-958d-bc2da15c6f01.png) Changelog: ---------- [ANDROID] [Template] add Network Security Config file to allow access to packager via cleartext requests in Android API 28 and above. (fixes facebook#22375) Pull Request resolved: facebook#23135 Differential Revision: D13917058 Pulled By: cpojer fbshipit-source-id: 0e66f2cde712c1285d217e3625b73028c3770b65

GihanMaheshWijesuriya · 2019-06-24T04:54:27Z

Came across this issue today, I used a one-liner to work around this for now;

Added android:usesCleartextTraffic="true" inside <application ...here...></application> in my AndroidManifest.xml. Diff: invertase/react-native-firebase@b887849

Though adding a network-security-config file should be the recommended workaround for now.

Have pushed up a PR that adds the network security config as part of RN devsupport (not part of release builds) 👇

thankz buddy you save my day

aryo · 2019-06-25T03:13:20Z

Just a heads up for people that have existing RN projects and just started targeting API level 28, to apply the whitelist for debug builds only:

Add the network_security_config.xml to the android/src/debug/res/xml directory (make the dir if it doesn't exist)
put <application android:networkSecurityConfig="@xml/network_security_config" ... /> in android/src/debug/AndroidManifest.xml

edit: updated wrong application attribute

npedrini · 2019-07-01T19:40:08Z

@aryo, thanks. Was wondering how to do this myself and found little documentation.

usrbowe · 2019-07-25T04:15:26Z

ℹThere were couple workarounds, but the final solution is documented here:

https://facebook.github.io/react-native/docs/integration-with-existing-apps#cleartext-traffic-api-level-28
This will fix issue, when packager server is not reachable on Android API28+.

nkraev · 2019-12-25T12:42:20Z

Please note that presence of android:networkSecurityConfig="@xml/network_security_config" in your AndroidManifest.xml will override android:usesCleartextTraffic="true" anyway.
So for bringing RN into existing app with existing network security config the only way to set up packager is to update network_security_config.xml.

Android api level 28+ seems to not allow http traffic by default. This breaks react-native debugging that relies on fetching artifacts over http for quick iteration. See react native github isse facebook/react-native#22375 for more details.

react-native-bot added Tech: Bundler 📦 This issue is related to the bundler (Metro, Haul, etc) used. 🔶Components Component: Text Platform: Android Android applications. Platform: Linux Building on Linux. labels Nov 21, 2018

hey99xx mentioned this issue Nov 28, 2018

fetch API not working in Android 9 (API Level 28) #22429

Closed

3 tasks

Salakar mentioned this issue Jan 22, 2019

[Android][DevSupport] Add Network Security Config file (fixes #22375) #23105

Closed

facebook-github-bot closed this as completed in 3b0b7ce Jan 23, 2019

Salakar mentioned this issue Jan 24, 2019

[android] apply Network Security Config file (fixes #22375) (part 2 of #23105) #23135

Closed

Salakar added a commit to react-native-firebase/react-native that referenced this issue Feb 1, 2019

Revert "Add Network Security Config file (fixes facebook#22375) (face…

3df598a

…book#23105)" This reverts commit 9f14ac2

kelset mentioned this issue Mar 4, 2019

"Error Unauthorized" in the command line after enabling "Remote JS debugging" #23719

Closed

BradHabenichtBB mentioned this issue Mar 11, 2019

Allow cleartext after upgrading to android SDK 28 brandingbrand/flagship#480

Closed

reime005 mentioned this issue Apr 6, 2019

feat: fixed and upgraded example projects react-native-camera/react-native-camera#2195

Closed

codypearce mentioned this issue Apr 30, 2019

Fetch not working on Android 9 API 28 #24627

Closed

thebylito mentioned this issue Jul 3, 2019

Getting NETWORK_ERROR after upgrade react-native to v0.59.9 infinitered/apisauce#218

Open

radko93 mentioned this issue Sep 30, 2019

Cannot not fetch android 10 react-native #26648

Closed

v-almonacid mentioned this issue Dec 5, 2019

fix metro server connection issue Emurgo/yoroi#749

Merged

emiljoha mentioned this issue Jan 12, 2020

Add debug network security config to allow http traffic. lightninglabs/lightning-app#1326

Open

facebook locked as resolved and limited conversation to collaborators Jan 23, 2020

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jan 23, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Android] Android 9 can not access bundler via cleartext request without additional config #22375

[Android] Android 9 can not access bundler via cleartext request without additional config #22375

TikiTDO commented Nov 21, 2018

meatwallace commented Nov 25, 2018

TikiTDO commented Nov 26, 2018

hey99xx commented Nov 26, 2018

iamdurui commented Nov 29, 2018

TikiTDO commented Nov 29, 2018

Salakar commented Jan 22, 2019 •

edited

cpojer commented Jan 23, 2019

hey99xx commented Jan 23, 2019

Exilz commented Feb 21, 2019

hey99xx commented Feb 22, 2019

RodrigoAngeloValentini commented Apr 9, 2019 •

edited

GihanMaheshWijesuriya commented Jun 24, 2019

aryo commented Jun 25, 2019 •

edited

npedrini commented Jul 1, 2019

usrbowe commented Jul 25, 2019

nkraev commented Dec 25, 2019

[Android] Android 9 can not access bundler via cleartext request without additional config #22375

[Android] Android 9 can not access bundler via cleartext request without additional config #22375

Comments

TikiTDO commented Nov 21, 2018

Environment

Description

Reproducible Demo

meatwallace commented Nov 25, 2018

TikiTDO commented Nov 26, 2018

hey99xx commented Nov 26, 2018

iamdurui commented Nov 29, 2018

TikiTDO commented Nov 29, 2018

Salakar commented Jan 22, 2019 • edited

cpojer commented Jan 23, 2019

hey99xx commented Jan 23, 2019

Exilz commented Feb 21, 2019

hey99xx commented Feb 22, 2019

RodrigoAngeloValentini commented Apr 9, 2019 • edited

GihanMaheshWijesuriya commented Jun 24, 2019

aryo commented Jun 25, 2019 • edited

npedrini commented Jul 1, 2019

usrbowe commented Jul 25, 2019

ℹThere were couple workarounds, but the final solution is documented here:

nkraev commented Dec 25, 2019

Salakar commented Jan 22, 2019 •

edited

RodrigoAngeloValentini commented Apr 9, 2019 •

edited

aryo commented Jun 25, 2019 •

edited