Fix resolving assets outside of the project root (#27932)

Summary:
When an asset is outside of the metro project root, it can lead to relative paths like `/assets/../../node_modules/coolpackage/image.png` as the `httpServerLocation`. This can happen for example when using yarn workspaces with hoisted node_modules.

This causes issues when bundling on iOS since we use this path in the filesystem. To avoid this we replace `../` with `_` to preserve the uniqueness of the path while avoiding these kind of problematic relative paths. The same logic is used when bundling assets in the rn-cli.

CLI part of this PR: react-native-community/cli#939

## Changelog

[General] [Fixed] - Fix resolving assets outside of the project root
Pull Request resolved: #27932

Test Plan: Tested that an asset in a hoisted node_modules package doesn't show up before this patch and does after in a release build.

Differential Revision: D19690587

Pulled By: cpojer

fbshipit-source-id: 8a9c68af04594ce1503a810ecf2e97ef5bfb8004

Libraries/Image/AssetSourceResolver.js

@@ -114,7 +114,12 @@ class AssetSourceResolver {
    */
   scaledAssetURLNearBundle(): ResolvedAssetSource {
     const path = this.jsbundleUrl || 'file://';
-    return this.fromSource(path + getScaledAssetPath(this.asset));
+    return this.fromSource(
+      // Assets can have relative paths outside of the project root.
+      // When bundling them we replace `../` with `_` to make sure they
+      // don't end up outside of the expected assets directory.
+      path + getScaledAssetPath(this.asset).replace(/\.\.\//g, '_'),
+    );
   }
 
   /**

Libraries/Image/__tests__/resolveAssetSource-test.js

@@ -143,6 +143,29 @@ describe('resolveAssetSource', () => {
         },
       );
     });
+
+    it('resolves an image with a relative path outside of root', () => {
+      expectResolvesAsset(
+        {
+          __packager_asset: true,
+          fileSystemLocation: '/module/a',
+          httpServerLocation: '/assets/../../module/a',
+          width: 100,
+          height: 200,
+          scales: [1],
+          hash: '5b6f00f',
+          name: 'logo',
+          type: 'png',
+        },
+        {
+          __packager_asset: true,
+          width: 100,
+          height: 200,
+          uri: 'file:///Path/To/Sample.app/assets/__module/a/logo.png',
+          scale: 1,
+        },
+      );
+    });
   });
 
   describe('bundle was loaded from assets on Android', () => {
@@ -175,6 +198,29 @@ describe('resolveAssetSource', () => {
         },
       );
     });
+
+    it('resolves an image with a relative path outside of root', () => {
+      expectResolvesAsset(
+        {
+          __packager_asset: true,
+          fileSystemLocation: '/module/a',
+          httpServerLocation: '/assets/../../module/a',
+          width: 100,
+          height: 200,
+          scales: [1],
+          hash: '5b6f00f',
+          name: 'logo',
+          type: 'png',
+        },
+        {
+          __packager_asset: true,
+          width: 100,
+          height: 200,
+          uri: '__module_a_logo',
+          scale: 1,
+        },
+      );
+    });
   });
 
   describe('bundle was loaded from file on Android', () => {