This article aims to deeply explore the technical details of the Huawei HarmonyOS Next system (up to API 12 as of now), and is summarized based on actual development practices.
It mainly serves as a vehicle for technical sharing and communication. Mistakes and omissions are inevitable. Colleagues are welcome to put forward valuable opinions and questions so that we can make progress together.
This article is original content, and any form of reprint must indicate the source and the original author.Introduction
The ArkWeb (Ark Web) application framework of the Huawei HarmonyOS Next system provides developers with powerful capabilities for Web application development. However, the security of Web applications is always an important issue that developers need to pay attention to, especially in terms of cross-domain requests. In the ArkWeb framework, cross-domain access of the file protocol and resource protocol is restricted, which may cause problems for developers when using Web components. This article will introduce common cross-domain problems in the ArkWeb framework and discuss corresponding solutions.
Cross-Domain Problems
The ArkWeb kernel restricts cross-domain access of the file protocol and resource protocol by default for security reasons. This means that if a Web component attempts to load resources of the file protocol or resource protocol from a different domain, it will be intercepted, resulting in the inability to load the resources.
For example, suppose your Web component is deployed on domain A, and you want to load local resources on domain B, such as image or script files. Due to the restrictions of the file protocol and resource protocol, even if your Web component can access the URL of domain B, it cannot load the local resources on domain B.
This cross-domain problem may lead to the following issues:
- Function Limitations: The Web component may not be able to load necessary resources normally, resulting in limited functionality.
- Poor User Experience: Users may encounter problems such as page loading failures and unusable functions, affecting the user experience.
- Security Risks: If developers do not handle cross-domain problems correctly, it may lead to security vulnerabilities, such as cross-site scripting attacks (XSS). ### Solutions To solve the cross-domain problems in the ArkWeb framework, you can adopt the following solutions: #### 1. Use the http or https Protocol Instead of the file or resource Protocol This is the most direct and effective solution. You can modify the resource URL from the file protocol or resource protocol to the http protocol or https protocol and ensure that the resource server supports cross-domain access. For example, suppose you want to load a local image on domain B. You can change the image URL from file://example.com/path/to/image.png to http://example.com/path/to/image.png or https://example.com/path/to/image.png. If the resource server has set a CORS policy to allow cross-domain access, then your Web component can successfully load the image. #### 2. Use a Custom Domain Name You can create a custom domain name for your local resources and ensure that the resolution of the domain name points to your local resources. In this way, even if your Web component accesses the custom domain name, it will not trigger the ArkWeb kernel's cross-domain access restrictions on the file protocol and resource protocol. For example, you can point the custom domain name example.com to the path of your local resources and access http://example.com/path/to/image.png in the Web component. Since you have resolved the custom domain name to the local resource path, the ArkWeb kernel will allow your Web component to load the image. #### 3. Use the onInterceptRequest Interface for Local Resource Interception and Replacement You can use the onInterceptRequest interface provided by the ArkWeb framework to intercept local resource requests and perform custom responses. In this way, you can construct the response content and send it back to the Web component, thus bypassing the cross-domain access restrictions. For example, you can use the onInterceptRequest interface to intercept resource requests of the file protocol or resource protocol and return a response containing custom content. In this way, your Web component can load the custom response content you created without worrying about cross-domain access restrictions. ### Other Network Security Basics In addition to solving cross-domain problems, you also need to understand the following basic network security knowledge to ensure the security and reliability of your Web application: #### 1. CORS Policy The CORS (Cross-Origin Resource Sharing) policy is used to control resource sharing between different domains. You can use the CORS policy to allow or prohibit cross-domain requests from specific domains. For example, you can set a CORS policy on the resource server to allow cross-domain requests from domain A and prohibit cross-domain requests from other domains. In this way, your Web component can access the resources of domain A without worrying about cross-domain problems. #### 2. Same-Origin Policy The same-origin policy is a built-in security mechanism of the browser used to prevent malicious websites from stealing data from other websites. The same-origin policy requires that the origin, protocol, and port of a Web application must be exactly the same in order to access resources. For example, if your Web component is deployed on domain A and you want to access resources on domain B, you need to ensure that the resources on domain B are also deployed on domain A or that the resource server on domain B has set a CORS policy to allow cross-domain requests from domain A. #### 3. HTTPS Protocol The HTTPS protocol is a secure version of the HTTP protocol. It uses SSL/TLS encryption technology to protect the security of data transmission. Using the HTTPS protocol can prevent data from being stolen or tampered with during transmission. For example, you should use the HTTPS protocol to access all sensitive data, such as user personal information and passwords. This can ensure the security of the data and prevent malicious attacks. ### Example Code The following example code shows how to use the onInterceptRequest interface to intercept local resource requests and replace them to solve cross-domain problems:
import { webview } from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: webview.WebviewController = new webview.WebviewController();
responseResource: webview.WebResourceResponse = new webview.WebResourceResponse();
build() {
Column() {
Web({ src: $rawfile("index.html"), controller: this.controller })
.onInterceptRequest((event) => {
if (event && event.request.getRequestUrl().startsWith("file://")) {
this.responseResource.setResponseData($rawfile("local.png"));
this.responseResource.setResponseEncoding('utf-8');
this.responseResource.setResponseMimeType('image/png');
this.responseResource.setResponseCode(200);
this.responseResource.setReasonMessage('OK');
return this.responseResource;
}
return null;
});
}
}
}
In this code, we used the onInterceptRequest interface to intercept all requests starting with file://. When intercepting a local resource request, we used the $rawfile() function to load a local image and sent it as the response content back to the Web component.
Summary
The ArkWeb framework provides powerful capabilities for Web application development, but at the same time, attention needs to be paid to network security issues, especially in terms of cross-domain requests. By understanding common cross-domain problems and their solutions and mastering relevant basic network security knowledge, you can develop more secure and reliable Web applications and protect users' privacy and data security.
Top comments (0)