Merge branch 'main' into merge-master-into-fork

Author: joaoloureirop

.github/workflows/android-ci.yml

@@ -8,7 +8,7 @@ jobs:
   build:
     strategy:
       matrix:
-        os: [ubuntu-latest, windows-latest]
+        os: [ubuntu-latest]
         newArchEnabled: [false, true]
     runs-on: ${{ matrix.os }}
     steps:
@@ -28,7 +28,7 @@ jobs:
         run: yarn --frozen-lockfile
         shell: bash
       - name: Build Android test app
-        uses: gradle/gradle-build-action@v2
+        uses: gradle/actions/setup-gradle@db19848a5fa7950289d3668fb053140cf3028d43 #v3.3.2
         with:
           gradle-version: wrapper
           arguments: -PnewArchEnabled=${{matrix.newArchEnabled}} --no-daemon clean build check test

.github/workflows/security-code-scanner.yml

@@ -0,0 +1,43 @@
+name: 'MetaMask Security Code Scanner'
+
+on:
+  push:
+    branches: ['main']
+  pull_request:
+    branches: ['main']
+
+jobs:
+  run-security-scan:
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+    steps:
+      - name: MetaMask Security Code Scanner
+        uses: MetaMask/Security-Code-Scanner@main
+        with:
+          repo: ${{ github.repository }}
+          paths_ignored: |
+            .storybook/
+            '**/__snapshots__/'
+            '**/*.snap'
+            '**/*.stories.js'
+            '**/*.stories.tsx'
+            '**/*.test.browser.ts*'
+            '**/*.test.js*'
+            '**/*.test.ts*'
+            '**/fixtures/'
+            '**/jest.config.js'
+            '**/jest.environment.js'
+            '**/mocks/'
+            '**/test*/'
+            docs/
+            e2e/
+            merged-packages/
+            node_modules
+            storybook/
+            test*/
+          rules_excluded: example
+          project_metrics_token: ${{ secrets.SECURITY_SCAN_METRICS_TOKEN }}
+          slack_webhook: ${{ secrets.APPSEC_BOT_SLACK_WEBHOOK }}

.github/workflows/windows-ci.yml

@@ -1,18 +1,18 @@
 # React Native WebView
 
-![star this repo](https://img.shields.io/github/stars/react-native-webview/react-native-webview?style=flat-square)
+![star this repo](https://img.shields.io/github/stars/MetaMask/react-native-webview-mm?style=flat-square)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
-[![NPM Version](https://img.shields.io/npm/v/react-native-webview.svg?style=flat-square)](https://www.npmjs.com/package/react-native-webview)
-![Npm Downloads](https://img.shields.io/npm/dm/react-native-webview.svg)
+[![NPM Version](https://img.shields.io/npm/v/@metamask/react-native-webview.svg?style=flat-square)](https://www.npmjs.com/package/@metamask/react-native-webview)
+![Npm Downloads](https://img.shields.io/npm/dm/@metamask/react-native-webview.svg)
 
 **React Native WebView** is a community-maintained WebView component for React Native. It is intended to be a replacement for the built-in WebView (which was [removed from core](https://github.com/react-native-community/discussions-and-proposals/pull/3)).
 
 ### Maintainers
 
-**Many thanks to these companies** for providing us with time to work on open source.  
+**Many thanks to these companies** for providing us with time to work on open source.
 Please note that maintainers spend a lot of free time working on this too so feel free to sponsor them, **it really makes a difference.**
 
-- [Thibault Malbranche](https://github.com/Titozzz) ([Twitter @titozzz](https://twitter.com/titozzz)) from [Brigad](https://www.brigad.co/en-gb/about-us)  
+- [Thibault Malbranche](https://github.com/Titozzz) ([Twitter @titozzz](https://twitter.com/titozzz)) from [Brigad](https://www.brigad.co/en-gb/about-us)
 [*Sponsor me* ❤️ !](https://github.com/sponsors/Titozzz)
 
 
@@ -50,7 +50,7 @@ Import the `WebView` component from `react-native-webview` and use it like so:
 ```tsx
 import React, { Component } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import { WebView } from 'react-native-webview';
+import { WebView } from '@metamask/react-native-webview';
 
 // ...
 const MyWebComponent = () => {
@@ -63,11 +63,11 @@ For more, read the [API Reference](./docs/Reference.md) and [Guide](./docs/Guide
 ### Common issues
 
 - If you're getting `Invariant Violation: Native component for "RNCWebView does not exist"` it likely means you forgot to run `react-native link` or there was some error with the linking process
-- If you encounter a build error during the task `:app:mergeDexRelease`, you need to enable multidex support in `android/app/build.gradle` as discussed in [this issue](https://github.com/react-native-webview/react-native-webview/issues/1344#issuecomment-650544648)
+- If you encounter a build error during the task `:app:mergeDexRelease`, you need to enable multidex support in `android/app/build.gradle` as discussed in [this issue](https://github.com/MetaMask/react-native-webview-mm/issues/1344#issuecomment-650544648)
 
 #### Contributing
 
-Contributions are welcome, see [Contributing.md](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Contributing.md)
+Contributions are welcome, see [Contributing.md](https://github.com/MetaMask/react-native-webview-mm/blob/master/docs/Contributing.md)
 
 ### License
 

README.md

@@ -3,20 +3,25 @@
 import android.Manifest;
 import android.annotation.TargetApi;
 import android.app.Activity;
+import android.app.AlertDialog;
+import android.content.DialogInterface;
 import android.content.pm.PackageManager;
 import android.net.Uri;
 import android.os.Build;
+import android.os.Handler;
 import android.os.Message;
 import android.view.Gravity;
 import android.view.View;
 import android.view.ViewGroup;
 import android.webkit.ConsoleMessage;
 import android.webkit.GeolocationPermissions;
+import android.webkit.JsPromptResult;
 import android.webkit.PermissionRequest;
 import android.webkit.ValueCallback;
 import android.webkit.WebChromeClient;
 import android.webkit.WebView;
 import android.webkit.WebViewClient;
+import android.widget.Button;
 import android.widget.FrameLayout;
 
 import androidx.annotation.RequiresApi;
@@ -55,6 +60,9 @@ public class RNCWebChromeClient extends WebChromeClient implements LifecycleEven
     protected View mVideoView;
     protected WebChromeClient.CustomViewCallback mCustomViewCallback;
 
+    // This boolean block JS prompts and alerts from displaying during loading
+    protected boolean blockJsDuringLoading = true;
+
     /*
      * - Permissions -
      * As native permissions are asynchronously handled by the PermissionListener, many fields have
@@ -150,11 +158,14 @@ public void onPermissionRequest(final PermissionRequest request) {
         ArrayList<String> requestedAndroidPermissions = new ArrayList<>();
         for (String requestedResource : request.getResources()) {
             String androidPermission = null;
+            String requestPermissionIdentifier = null;
 
             if (requestedResource.equals(PermissionRequest.RESOURCE_AUDIO_CAPTURE)) {
                 androidPermission = Manifest.permission.RECORD_AUDIO;
+                requestPermissionIdentifier = "microphone";
             } else if (requestedResource.equals(PermissionRequest.RESOURCE_VIDEO_CAPTURE)) {
                 androidPermission = Manifest.permission.CAMERA;
+                requestPermissionIdentifier = "camera";
             } else if(requestedResource.equals(PermissionRequest.RESOURCE_PROTECTED_MEDIA_ID)) {
                 if (mAllowsProtectedMedia) {
                   grantedPermissions.add(requestedResource);
@@ -168,10 +179,30 @@ public void onPermissionRequest(final PermissionRequest request) {
                    */
                   androidPermission = PermissionRequest.RESOURCE_PROTECTED_MEDIA_ID;
                 }            }
+            Uri originUri = request.getOrigin();
+            String host = originUri.getHost();
             // TODO: RESOURCE_MIDI_SYSEX, RESOURCE_PROTECTED_MEDIA_ID.
+            String alertMessage = String.format("Allow " + host  + " to use your " + requestPermissionIdentifier + "?");
             if (androidPermission != null) {
                 if (ContextCompat.checkSelfPermission(this.mWebView.getThemedReactContext(), androidPermission) == PackageManager.PERMISSION_GRANTED) {
-                    grantedPermissions.add(requestedResource);
+                    AlertDialog.Builder builder = new AlertDialog.Builder(this.mWebView.getContext());
+                    builder.setMessage(alertMessage);
+                    builder.setCancelable(false);
+                    String finalAndroidPermission = androidPermission;
+                    builder.setPositiveButton("Allow", (dialog, which) -> {
+                        permissionRequest = request;
+                        grantedPermissions.add(finalAndroidPermission);
+                        requestPermissions(grantedPermissions);
+                    });
+                    builder.setNegativeButton("Don't allow", (dialog, which) -> {
+                        request.deny();
+                    });
+                    AlertDialog alertDialog = builder.create();
+                    alertDialog.show();
+                    //Delay making `allow` clickable for 500ms to avoid unwanted presses.
+                    Button posButton = alertDialog.getButton(AlertDialog.BUTTON_POSITIVE);
+                    posButton.setEnabled(false);
+                    this.runDelayed(() -> posButton.setEnabled(true), 500);
                 } else {
                     requestedAndroidPermissions.add(androidPermission);
                 }
@@ -180,8 +211,10 @@ public void onPermissionRequest(final PermissionRequest request) {
 
         // If all the permissions are already granted, send the response to the WebView synchronously
         if (requestedAndroidPermissions.isEmpty()) {
-            request.grant(grantedPermissions.toArray(new String[0]));
-            grantedPermissions = null;
+            if (!grantedPermissions.isEmpty()) {
+                request.grant(grantedPermissions.toArray(new String[0]));
+                grantedPermissions = null;
+            }
             return;
         }
 
@@ -192,6 +225,10 @@ public void onPermissionRequest(final PermissionRequest request) {
         requestPermissions(requestedAndroidPermissions);
     }
 
+    private void runDelayed(Runnable function, long delayMillis) {
+        Handler handler = new Handler();
+        handler.postDelayed(function, delayMillis);
+    }
 
     @Override
     public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback) {
@@ -208,7 +245,23 @@ public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermiss
             requestPermissions(Collections.singletonList(Manifest.permission.ACCESS_FINE_LOCATION));
 
         } else {
-            callback.invoke(origin, true, false);
+            String alertMessage = String.format("Allow %s to use your location?", origin);
+            AlertDialog.Builder builder = new AlertDialog.Builder(this.mWebView.getContext());
+            builder.setMessage(alertMessage);
+            builder.setCancelable(false);
+            builder.setPositiveButton("Allow", (dialog, which) -> {
+                callback.invoke(origin, true, false);
+            });
+            builder.setNegativeButton("Don't allow", (dialog, which) -> {
+                callback.invoke(origin, false, false);
+            });
+            AlertDialog alertDialog = builder.create();
+            alertDialog.show();
+            //Delay making `allow` clickable for 500ms to avoid unwanted presses.
+            Button posButton = alertDialog.getButton(AlertDialog.BUTTON_POSITIVE);
+            posButton.setEnabled(false);
+            this.runDelayed(() -> posButton.setEnabled(true), 500);
+
         }
     }
 
@@ -336,6 +389,16 @@ public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathC
         return this.mWebView.getThemedReactContext().getNativeModule(RNCWebViewModule.class).startPhotoPickerIntent(filePathCallback, acceptTypes, allowMultiple, fileChooserParams.isCaptureEnabled());
     }
 
+    @Override
+    public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
+        if (blockJsDuringLoading) {
+            result.cancel();
+            return true;
+        } else {
+            return super.onJsPrompt(view, url, message, defaultValue, result);
+        }
+    }
+
     @Override
     public void onHostResume() {
         if (mVideoView != null && mVideoView.getSystemUiVisibility() != FULLSCREEN_SYSTEM_UI_VISIBILITY) {