【每日学点HarmonyOS Next知识】Web跨域资源、Web长按菜单、Web拦截请求、禁止录屏、Base64图片宽高

1、HarmonyOS Web组件本地资源跨域问题？

关于资源跨域问题的解决，可以参考以下官网文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-cross-origin-V5

方法一

为了使Web组件能够成功访问跨域资源，开发者应采用http或https等协议，替代原先使用的file或resource协议进行加载。其中，替代的url域名为自定义构造的仅供个人或者组织使用的域名，以避免与互联网上实际存在的域名产生冲突。同时，开发者需利用Web组件的onInterceptRequest方法，对本地资源进行拦截和相应的替换。

以下结合示例说明如何解决本地资源跨域访问失败的问题。其中，index.html和js/script.js置于工程中的rawfile目录下。如果使用resource协议访问index.html，js/script.js将因跨域而被拦截，无法加载。在示例中，使用https://www.example.com/域名替换了原本的resource协议，同时利用onInterceptRequest接口替换资源，使得js/script.js可以成功加载，从而解决了跨域拦截的问题。

// main/ets/pages/Index.ets
import { webview } from '@kit.ArkWeb';@Entry
@Component
struct Index {@State message: string = 'Hello World';webviewController: webview.WebviewController = new webview.WebviewController();// 构造域名和本地文件的映射表schemeMap = new Map([["https://www.example.com/index.html", "index.html"],["https://www.example.com/js/script.js", "js/script.js"],])// 构造本地文件和构造返回的格式mimeTypemimeTypeMap = new Map([["index.html", 'text/html'],["js/script.js", "text/javascript"]])build() {Row() {Column() {// 针对本地index.html,使用http或者https协议代替file协议或者resource协议，并且构造一个属于自己的域名。// 本例中构造www.example.com为例。Web({ src: "https://www.example.com/index.html", controller: this.webviewController }).javaScriptAccess(true).fileAccess(true).domStorageAccess(true).geolocationAccess(true).width("100%").height("100%").onInterceptRequest((event) => {if (!event) {return;}// 此处匹配自己想要加载的本地离线资源，进行资源拦截替换，绕过跨域if (this.schemeMap.has(event.request.getRequestUrl())) {let rawfileName: string = this.schemeMap.get(event.request.getRequestUrl())!;let mimeType = this.mimeTypeMap.get(rawfileName);if (typeof mimeType === 'string') {let response = new WebResourceResponse();// 构造响应数据，如果本地文件在rawfile下，可以通过如下方式设置response.setResponseData($rawfile(rawfileName));response.setResponseEncoding('utf-8');response.setResponseMimeType(mimeType);response.setResponseCode(200);response.setReasonMessage('OK');response.setResponseIsReady(true);return response;}}return null;})}.width('100%')}.height('100%')}
}

<!-- main/resources/rawfile/index.html -->
<html>
<head><meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<script crossorigin src="./js/script.js"></script>
</body>
</html>

// main/resources/rawfile/js/script.js
const body = document.body;
const element = document.createElement('div');
element.textContent = 'success';
body.appendChild(element);

方法二

通过setPathAllowingUniversalAccess设置一个路径列表。当使用file协议访问该列表中的资源时，允许进行跨域访问本地文件。此外，一旦设置了路径列表，file协议将仅限于访问列表内的资源(此时，fileAccess的行为将会被此接口行为覆盖)。路径列表中的路径必须符合以下任一路径格式：

应用文件目录通过Context.filesDir获取，其子目录示例如下：
- /data/storage/el2/base/files/example
- /data/storage/el2/base/haps/entry/files/example
应用资源目录通过Context.resourceDir获取，其子目录示例如下：
- /data/storage/el1/bundle/entry/resource/resfile
- /data/storage/el1/bundle/entry/resource/resfile/example
  当路径列表中的任一路径不满足上述条件时，系统将抛出异常码401，并判定路径列表设置失败。若设置的路径列表为空，file协议的可访问范围将遵循fileAccess的规则，具体示例如下。

// main/ets/pages/Index.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';@Entry
@Component
struct WebComponent {controller: WebviewController = new webview.WebviewController();build() {Row() {Web({ src: "", controller: this.controller }).onControllerAttached(() => {try {// 设置允许可以跨域访问的路径列表this.controller.setPathAllowingUniversalAccess([getContext().resourceDir,getContext().filesDir + "/example"])this.controller.loadUrl("file://" + getContext().resourceDir + "/index.html")} catch (error) {console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as   BusinessError).message}`);}}).javaScriptAccess(true).fileAccess(true).domStorageAccess(true)}}
}

<!-- main/resource/rawfile/index.html -->
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>Demo</title><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no,   viewport-fit=cover"><script>function getFile() {var file = "file:///data/storage/el1/bundle/entry/resources/resfile/js/script.js";// 使用file协议通过XMLHttpRequest跨域访问本地js文件。var xmlHttpReq = new XMLHttpRequest();xmlHttpReq.onreadystatechange = function(){console.log("readyState:" + xmlHttpReq.readyState);console.log("status:" + xmlHttpReq.status);if(xmlHttpReq.readyState == 4){if (xmlHttpReq.status == 200) {// 如果ets侧正确设置路径列表，则此处能正常获取资源const element = document.getElementById('text');element.textContent = "load " + file + " success";} else {// 如果ets侧不设置路径列表，则此处会触发CORS跨域检查错误const element = document.getElementById('text');element.textContent = "load " + file + " failed";}}}xmlHttpReq.open("GET", file);xmlHttpReq.send(null);}</script>
</head><body>
<div class="page"><button id="example" onclick="getFile()">stealFile</button>
</div>
<div id="text"></div>
</body></html>

// main/resources/rawfile/js/script.js
const body = document.body;
const element = document.createElement('div');
element.textContent = 'success';
body.appendChild(element);

2、HarmonyOS web里需要实现长按弹出菜单保存图片，有类似getHitTestResult的方法吗？

可以参考下web组件中的onContextMenuShow事件，长按特定元素（例如图片，链接）或鼠标右键，跳出菜单。具体参考下面文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#oncontextmenushow9
暂时无法控制长按弹框的条件，可以尝试下从h5侧通过控制事件和CSS方式控制选择框

3、HarmonyOS web拦截应用跳转和自定义请求响应对应demo？

web拦截和自定义请求响应，可以参考官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-resource-interception-request-mgmt-V5

Web组件支持在应用拦截到页面请求后自定义响应请求能力。开发者通过onInterceptRequest()接口来实现自定义资源请求响应。自定义请求能力可以用于开发者自定义Web页面响应、自定义文件资源响应等场景。

Web网页上发起资源加载请求，应用层收到资源请求消息。应用层构造本地资源响应消息发送给Web内核。Web内核解析应用层响应信息，根据此响应信息进行页面资源加载。

4、HarmonyOS 如何禁止单个page页面录屏截屏；禁止某个dialog 录屏截屏如dialog 安全密码键盘？

现在需要在某些page 页面、dialog，不让录屏和截屏
可以通过setWindowPrivacyMode设置窗口为隐私模式后，截屏录屏或分享屏幕，屏幕会显示灰色蒙层（隐私窗口不允许这些操作）

可参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5#setwindowprivacymode9

setWindowPrivacyMode

setWindowPrivacyMode(isPrivacyMode: boolean, callback: AsyncCallback): void

设置窗口是否为隐私模式，使用callback异步回调。设置为隐私模式的窗口，窗口内容将无法被截屏或录屏。此接口可用于禁止截屏/录屏的场景。

#### 5、HarmonyOS 如何获取 base64图片的图片原始宽高？图片验证码场景，服务端返回两张base64 格式图片背景图与验证图，需要根据背景图、原图大小计算缩放系数，从而计算验证图的大小与定位信息

使用Image Kit的能力，参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-image-V5#imageinfo

demo：

import util from '@ohos.util';
import { image } from '@kit.ImageKit';
@Entry
@Component
struct Index {@State message: string = 'getImage';@StorageLink('test') test: object = new Object;@State imageBase64: string ='iVBORw0KGgoAAAANSUhEUgAAADwAAAAUCAYAAADRA14pAAABN0lEQVR42mP4P8IAAy0Mjf6xAYxHnIcHo6cZaOlZYj38VbESjIech5E9SayHYZ5FxnT1cL7uFwxMbt4lxtPYPElLjzNg8ywhMWp6GOZBeiVzDA/jinFySmZSkzUpHn5oLosXk+1hYj2NXliRUnjh8hy5MYzP0wzEeIzUvEyNGCY3WZMUw5Qm61EPjzQPkwIGjYfp4VlsnianIULIs3gbHvT2LLZWFzVLZ7xNS3p7lBqAGM+CPZy6o+w/DGfvrv5ffagTjtuOT/4/8cxcOF50Zc3/5dc3wvHeh0fh+PDjk/8vv74Bx/c+PPz/8utrOP7559fg8LD/uqT/A4GpHdB7Q/XBmFBAMyBLPv70DCWWTjw7h2L42pvbUCxGdlTPqRkoji7Y24DiqdCN6f8HKnCRMcNA5bmBCmgACwohlRAJ3H4AAAAASUVORK5CYII='@State pixelMap: image.PixelMap | undefined = undefined;build() {Column() {Text(this.message).id('HelloWorld').fontSize(50).fontWeight(FontWeight.Bold).onClick(async () => {let helper = new util.Base64Helper();let buffer: ArrayBuffer = helper.decodeSync(this.imageBase64, util.Type.MIME).buffer as ArrayBuffer;let imageSource = image.createImageSource(buffer);let opts: image.DecodingOptions = { editable: true };this.pixelMap = await imageSource.createPixelMap(opts);this.pixelMap.getImageInfo().then((imageInfo : image.ImageInfo) => {if (imageInfo == undefined) {console.error(`Failed to obtain the image pixel map information.`);}let wit = imageInfo.size.width;let hig = imageInfo.size.height;console.log(`Succeeded in obtaining the image pixel map information., ${JSON.stringify(wit)}, ${JSON.stringify(hig)}`);})})}.height('100%').width('100%')}
}