Webview 和js之间安全交互

最新推荐文章于 2024-03-10 09:25:40 发布

NullPoints

最新推荐文章于 2024-03-10 09:25:40 发布

阅读量1.2k

点赞数 1

分类专栏：【Android应用开发】文章标签： webview js android

本文链接：https://blog.csdn.net/ccj659/article/details/51822607

版权

【Android应用开发】专栏收录该内容

26 篇文章 0 订阅

订阅专栏

当我们在混合开发的时候,会用h5和原生进行hybrid开发,自然而然,会运用到js和原生之间的交互问题. 比如,登录界面的交互等.

接下来,来给大家介绍

1.js调用android的方法

1.1.开启webview的JavaScript的权限.

WebView myWebView = (WebView) findViewById(R.id.webview);

WebSettings webSettings = myWebView.getSettings();

webSettings.setJavaScriptEnabled(true);

1.2 编写JavaScript与Android 的交互接口.

在JS和Android代码间绑定一个新的接口，这里的MyJavascriptInterface,它不是一个接口而一个类, 是java代码和js之间通信的桥梁, 在这类里面编写js调用的方法.要注意的有两点,

第一点.Android 4.1，API 17开始，只有被JavascriptInterface 注解标识的公有方法可以被JS代码访问;注意这个方法可以让JS代码控制宿主程序，这是一个非常有力的特性，但是同时也存在一些安全问题，因为进一步JS代码可以通过反射访问到注入对象的公有域。攻击者可能会在HTML和JavaScript中包含了有威胁性的代码。

第二点.与JS代码绑定的的这个Java对象运行在另一个线程中，与创建它的线程不是一个线程。所以当涉及到更新UI的操作时候,需要runOnUIThread.

/**
* app 和js之间的桥梁
*只有被JavascriptInterface注解标识的公有方法可以被JS代码访问。
*/

public class MyJavascriptInterface {
    private Context context;
    public MyJavascriptInterface(Context context) {
        this.context=context;
    }
    @JavascriptInterface
    public voidshowToast(finalString toast) {
        Toast.makeText(context,toast,Toast.LENGTH_SHORT).show();
    }
    /**
     * 由于webview和UI线程不是同一个,所以更新UI应该在主线程中更新
     *@parammesg
     */
    @JavascriptInterface
    public voidshowDialog(String mesg) {
        runOnUiThread(new Runnable() {
            @Override
            public voidrun() {
                AlertDialog.Builder builder =newAlertDialog.Builder(context);
                builder.setMessage("this Dialog is from js");
                builder.show();
            }
        });
    }

}

1.3 绑定JavaScript与Android 的交互接口.

在绑定MyJavascriptInterface 和webview的时候,需要重写WebChromeClient中的onJsAlert方法.

//如果不设置chrome handler，JS代码中的按钮会显示，但是按下去却不弹出对话框
//但是如果按照
webview.setWebChromeClient(newWebChromeClient()
{
    @Override
    public booleanonJsAlert(WebView view, String url, String message, JsResult result)
    {
        return super.onJsAlert(view, url, message, result);
    }

});
// 从assets目录下面的加载html
webview.loadUrl("file:///android_asset/test.html");
//绑定接口
webview.addJavascriptInterface(newMyJavascriptInterface(this),"test");

1.4 绑定html文件中的事件

在assets下的test.html(新建的)下,

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type"    content="text/html;charset=gb2312">
    <script type="text/javascript">
        function showAndroidDialog(msg){
        test.showDialog(msg);
       }
</script>
</head>
<body>


<input id="dialog"type="button"value="dialog"οnclick="showAndroidDialog('hellow')"/>


<a οnclick=" window.test.showToast('hellow')">window show toast</a>
</body>
</html>

5.编译运行,即可.

2.android 调用js的方法

调用的时候只需要一行代码,

    webview.getSettings().setJavaScriptEnabled(true);
    //想要android调用js方法,需要重写onjsAlert方法.

    webview.setWebChromeClient(newWebChromeClient() {
        @Override
        public booleanonJsAlert(WebView view, String url, String message,finalandroid.webkit.JsResult result)
        {
            new AlertDialog.Builder(AndroidCallJSActivity.this)
                    .setTitle("javaScript dialog")
                    .setMessage(message)
                    .setPositiveButton(android.R.string.ok,
                            new AlertDialog.OnClickListener()
                            {
                                public voidonClick(DialogInterface dialog,intwhich)
                                {
                                    result.confirm();
                                }
                            })
                    .setCancelable(false)
                    .create()
                    .show();

            return true;
        };
    });
    webview.loadUrl("file:///android_asset/androidtojs.html");
}

@OnClick(R.id.button1)
public void onClick() {
    // 用Android代码调用JavaScript函数：
    webview.loadUrl("javascript:myFunction()");
    // 这里实现的效果和在网页中点击第一个按钮的效果一致
}

Html文件如下,

<html>
<head>
    <h1>
        This is a HTML Page
    </h1>
    
    <scriptlanguage="javascript"type="text/javascript">
    //JavaScript方法，弹出对话框显示信息
    function myFunction()
    {
        alert("Hello World!");
    }
    function onAlert()
    {
        console.log("onAlert method");//显示调试信息
        alert("This is a alert sample from html");
    }
    function onConfirm()
    {
        console.log("onConfirm method");
        var b = confirm("are you sure to login?");
        alert("your choice is " + b);
    }
    function onPrompt()
    {
        console.log("onPrompt method");
        var b = prompt("please input your password", "aaa");
        alert("your input is " + b);
    }

</script>
</head>
<body>

<p>
    
    JavaScript函数调用 <br/>
    <button οnclick="myFunction()">点击这里!</button>
    <br />
    <input type="button"value="alert"οnclick="onAlert()"/> <br />
    <input type="button"value="confirm"οnclick="onConfirm()"/> <br />
    <input type="button"value="prompt"οnclick="onPrompt()"/><br/>

</p>

</body>
</html>

总结一下,webview 和js之间的交互,需要注意三点:

1.注意重写其中的方法.

2.注意添加注解 @JavascriptInterface

3.注意webview进行的线程和 UI进行的线程,不是同一个.

这里只是给大家简要介绍其中的用法,加载网页等并没有提及.关于webview的更深入的文章,请大家自行下载webview学习资料

http://download.csdn.net/detail/ccj659/9567080

代码下载地址 https://git.oschina.net/ccj659git/WebviewJs.git

NullPoints

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Webview 和js之间安全交互

当我们在混合开发的时候,会用h5和原生进行hybrid开发,自然而然,会运用到js和原生之间的交互问题. 比如,登录界面的交互等.接下来,来给大家介绍1.js调用android的方法 1.1.开启webview的JavaScript的权限.WebView myWebView = (WebView) findViewById(R.id.webview);WebSettings
复制链接

扫一扫

专栏目录