Webview 和js之间安全交互
当我们在混合开发的时候,会用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>
<!--JS调用android native方法有两种-->
<!--调用方法一:当设置chrome handler时,可采用如下方法,即 用JavaScript方法 调用android native方法-->
<input id="dialog"type="button"value="dialog"onclick="showAndroidDialog('hellow')"/>
<!--调用方法二:当没有设置chrome handler时,可采用window.addJavascriptInterface别名.方法名 js调用android native 方法
(此处的test,请看java文件中JavascriptInterface的别名)-->
<a onclick=" 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>
<!-- JavaScript脚本，主要包括了按钮要执行的函数，显示对话框等-->
<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>
<!--四个按钮调用JS函数-->
JavaScript函数调用 <br/>
<button onclick="myFunction()">点击这里!</button>
<br />
<input type="button"value="alert"onclick="onAlert()"/> <br />
<input type="button"value="confirm"onclick="onConfirm()"/> <br />
<input type="button"value="prompt"onclick="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