iframe标签 src内部访问top跨域问题

iframe标签 src内部访问top跨域:Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.

HarmonyOS
2024-11-07 10:56:20
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

出于安全因素的考虑,在ArkWeb内核中,不允许file协议或者resource协议访问URL上下文中来自跨域的请求,如果要成功访问这些跨域资源,需要使用http或者https等协议进行加载(需要自己构造仅供自己个人或者阻止使用的域名),并且使用Web组件的onInterceptRequest进行本地资源拦截替换。可以参考以下代码main/ets/pages/index.ets。

import web_webview from '@ohos.web.webview' 
 
@Entry 
@Component 
struct Index { 
  @State message: string = 'Hello World'; 
  webviewController: web_webview.WebviewController = new web_webview.WebviewController(); 
  // 构造域名和本地文件的映射表 
  schemeMap = new Map([ 
    ["https://www.example.com/index.html", "index.html"], 
    ["https://www.example.com/js/script.js", "js/script.js"], 
  ]) 
  // 构造本地文件和构造返回的格式mimeType 
  mimeTypeMap = 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);
分享
微博
QQ
微信
回复
2024-11-07 15:15:16
相关问题
Web组件如何访问资源?
325浏览 • 1回复 待解决
HarmonyOS webview问题
474浏览 • 1回复 待解决
HarmonyOS web离线加载请求问题
386浏览 • 1回复 待解决
HarmonyOS Web组件请求问题
181浏览 • 1回复 待解决
HarmonyOS 本地webView方案
587浏览 • 1回复 待解决
webview中问题解决方案
2383浏览 • 1回复 待解决
HarmonyOS web iframe 注入.js 问题
382浏览 • 1回复 待解决
HarmonyOS 如何har访问resfile文件?
147浏览 • 1回复 待解决
基于原生的模块资源访问
614浏览 • 1回复 待解决
Zabbix6 LTS无法网段访问
2736浏览 • 0回复 待解决
kubectl top nodes 报错
2100浏览 • 1回复 待解决
关于HarmonyOS webview中iFrame的使用问题
126浏览 • 1回复 待解决
通过webView修改iframe的URL
838浏览 • 1回复 待解决
HarmonyOS Span标签样式问题
377浏览 • 1回复 待解决
HarmonyOS webview内部history问题
452浏览 • 1回复 待解决
HarmonyOS 调用内部资源问题
308浏览 • 1回复 待解决
HarmonyOS UI内部使用AppStorage问题
235浏览 • 1回复 待解决
HarmonyOS HAR组件复用问题
50浏览 • 1回复 待解决