【挙動メモ】Android JavascriptInterfaceの基本動作を見る

注意
前書き
挙動確認
セキュアな使い方について
参考リンク

注意

個人のメモです。

事実は確認しながら作成していますが、間違っている可能性があります。

前書き

JavascriptからJavaコードが実行可能なJavascriptInterfaceのAPIの挙動を見る。

使用する際はWebviewオブジェクトに対して以下を設定する。

addJavascriptInterface(new WebAppInterface(this), "名前")

Android4.2以降は、Javascriptから実行を許可するメソッドに「@JavascriptInterface」をつける必要がある。

挙動確認

基本的にコードはChatGPTに作ってもらった。

もろもろと弱い設定を許可にした。

Javascriptインタフェースの名前は「Android」にしている。

読み込むURLは、Androidをエミュレータで動かしているため、ローカルPCに向けてのURLになっている。

「@JavascriptInterface」を設定するメソッドは、文字列を受け取ってそれをToast表示するだけのものになっている。

private void setupWebView() {
        // Enable JavaScript
        WebSettings settings = webView.getSettings();

        settings.setJavaScriptEnabled(true);
        settings.setAllowUniversalAccessFromFileURLs(true);
        settings.setAllowFileAccessFromFileURLs(true);
        settings.setAllowFileAccess(true);
        // Set WebViewClient to override the default behavior when new page is loaded
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                // Return false to let the WebView handle the URL
                return false;
            }
        });
        webView.addJavascriptInterface(new WebAppInterface(this), "Android");

        // Set WebChromeClient to handle JavaScript dialogs and other browser interactions
        webView.setWebChromeClient(new WebChromeClient());

        // Load a web page
        webView.loadUrl("http://10.0.2.2:8000/webpage.html");
    }

public class WebAppInterface {
        MainActivity mActivity;

        /** Instantiate the interface and set the context */
        WebAppInterface(MainActivity c) {
            mActivity = c;
        }

        @JavascriptInterface
        public void showToast(String toast) {
            Toast.makeText(mActivity, toast, Toast.LENGTH_SHORT).show();
        }
    }

HTML。

名前が「Android」のインタフェースを使用して、「showToast」メソッドを呼び出している。

文字列を渡す必要があるので、引数に文字列を設定している。

<!DOCTYPE html>
<html>
<head>
    <title>Sample Page</title>
</head>
<body>
    Test
    <button onclick="Android.showToast('Hello Android!')">Click me</button>
</body>
</html>

実際の挙動。

「Hello Android!」と表示された。