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

发布于 1周前 作者 bupafengyu 来自 鸿蒙OS

HarmonyOS 鸿蒙Next iframe标签src内部访问top跨域：Uncaught DOMException: Blocked a frame with origin “null” from accessing a cross-origin frame.

web组件下的html通过iframe标签加载另一个html，在另一个html中访问top.navgator失效，报错：
two.html:18 Uncaught DOMException: Blocked a frame with origin “null” from accessing a cross-origin frame.

one.html: 
<!doctype html>
<html lang=“en”>
<head>
    <meta charset=“UTF-8”>
    <meta name=“viewport”
          content=“width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0”>
    <meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
    <title>Document</title>
</head>
<body>
<h1>1111111</h1>
<h1>1111111</h1>
<h1>1111111</h1>
<h1>1111111</h1>

<iframe width=“300px” height=“300px”  src="./two.html" frameborder=“0”></iframe>
<h1>3333333</h1>

</body>
</html>

two.html:
<!doctype html>
<html lang=“en”>
<head>
    <meta charset=“UTF-8”>
    <meta name=“viewport”
          content=“width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0”>
    <meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
    <title>Document</title>
</head>
<body >
<h2>222222222</h2>
<h2>222222222</h2>
<h2>222222222</h2>
<h2>222222222</h2>
<script>

    alert(“已经进入到iframe对应的界面”)
    console.log(“看下top的navigotor：”,top.navigator)
</script>

</body>
</html>


 


关于HarmonyOS 鸿蒙Next iframe标签src内部访问top跨域：Uncaught DOMException: Blocked a frame with origin “null” from accessing a cross-origin frame.的问题，您也可以访问：https://www.itying.com/category-93-b0.html 联系官网客服。

8 回复

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17

请参考 https://gitee.com/openharmony/docs/pulls/40207 的解决方式解决

期待HarmonyOS能在未来推出更多针对特定场景的优化功能。

贴个保姆级解决办法吧，假设你要访问$rawfile或getContext(this).filesDir目录里面的index.html,此index.html需要加载一个iframe.html

正常办法是用WebView加载下面的url

let indexPath = "file://" + getContext(this).filesDir + '/assets/index.html';

但是此方法会跨域，所以需要加载一个虚拟的域名（比如https://example.com），然后将此域名下的所有资源映射成本地资源，如https://example.com/index.html映射成indexPath，具体代码如下：

假设你本地的资源有如下几种类型：

// 构造本地文件和构造返回的格式mimeType
  mimeTypeMap = new Map([
    ["html", 'text/html'],
    ["js", "text/javascript"],
    ["css", "text/css"],
    ["png", "image/png"],
    ["jpg", "image/jpeg"],
    ["gif", "image/gif"],
    ["m3u8", "application/vnd.apple.mpegurl"],
    ["ts", "video/mp2t"]
  ])
  allowOriginHeader: Header[] = [
    {
      headerKey: "Access-Control-Allow-Origin",
      headerValue: "*"
    }
  ]<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

//拦截虚拟域名请求并替换成本地的文件资源

.onInterceptRequest((event) => { //拦截请求的资源并替换成自定义响应
    let url = event?.request.getRequestUrl() ?? "";

<span class="hljs-keyword"><span class="hljs-keyword">let</span></span> filesDir = getContext(<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>).filesDir;
<span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (url.includes(<span class="hljs-string"><span class="hljs-string">"https://example.com"</span></span>)) {
  <span class="hljs-comment"><span class="hljs-comment">// 去掉#号</span></span>
  <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> urlWithoutParam = url.split(<span class="hljs-string"><span class="hljs-string">"#"</span></span>).length &gt; <span class="hljs-number"><span class="hljs-number">1</span></span> ? url.split(<span class="hljs-string"><span class="hljs-string">"#"</span></span>)[<span class="hljs-number"><span class="hljs-number">0</span></span>] : url;
  <span class="hljs-comment"><span class="hljs-comment">// 去掉?号</span></span>
  urlWithoutParam = urlWithoutParam.split(<span class="hljs-string"><span class="hljs-string">"?"</span></span>).length &gt; <span class="hljs-number"><span class="hljs-number">1</span></span> ? urlWithoutParam.split(<span class="hljs-string"><span class="hljs-string">"?"</span></span>)[<span class="hljs-number"><span class="hljs-number">0</span></span>] : urlWithoutParam;
  <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> paths = urlWithoutParam.split(<span class="hljs-string"><span class="hljs-string">"/"</span></span>)
  <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> fileName = paths[paths.length - <span class="hljs-number"><span class="hljs-number">1</span></span>]
  <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> localFilePath = filesDir + <span class="hljs-string"><span class="hljs-string">"/assets/"</span></span> + urlWithoutParam.replace(<span class="hljs-string"><span class="hljs-string">"https://example.com"</span></span>, <span class="hljs-string"><span class="hljs-string">""</span></span>);
  <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> extension = fileName.split(<span class="hljs-string"><span class="hljs-string">'.'</span></span>)[fileName.split(<span class="hljs-string"><span class="hljs-string">'.'</span></span>).length - <span class="hljs-number"><span class="hljs-number">1</span></span>];
  <span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (!FileUtil.fileExists(localFilePath)) {
    LogUtils.w(<span class="hljs-string"><span class="hljs-string">"FileNotFound: "</span></span> + localFilePath);
    <span class="hljs-keyword"><span class="hljs-keyword">return</span></span> <span class="hljs-literal"><span class="hljs-literal">null</span></span>;
  }
  <span class="hljs-comment"><span class="hljs-comment">// 构造响应数据</span></span>
  <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> response = <span class="hljs-keyword"><span class="hljs-keyword">new</span></span> WebResourceResponse();
  <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> srcFile = fs.openSync(localFilePath, fs.OpenMode.READ_ONLY);
  response.setResponseData(srcFile.fd);
  response.setResponseEncoding(<span class="hljs-string"><span class="hljs-string">'utf-8'</span></span>);
  <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> mimeType = <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.mimeTypeMap.get(extension);
  response.setResponseMimeType(mimeType);
  response.setResponseCode(<span class="hljs-number"><span class="hljs-number">200</span></span>);
  response.setReasonMessage(<span class="hljs-string"><span class="hljs-string">'OK'</span></span>);
  response.setResponseIsReady(<span class="hljs-literal"><span class="hljs-literal">true</span></span>);
  <span class="hljs-comment"><span class="hljs-comment">// 响应头增加跨域响应头</span></span>
  response.setResponseHeader(<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.allowOriginHeader);
  <span class="hljs-keyword"><span class="hljs-keyword">return</span></span> response;
}
<span class="hljs-keyword"><span class="hljs-keyword">return</span></span> <span class="hljs-literal"><span class="hljs-literal">null</span></span>;<span class="hljs-comment"><span class="hljs-comment">//加载原始资源，不映射到本地</span></span>

}
)<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

正在定位问题

有要学HarmonyOS AI的同学吗，联系我：https://www.itying.com/goods-1206.html

好像是鸿蒙的安全性问题 不让访问 有没有什么解决方法啊 安卓和ios测试了一下，都是可以的，或者我们这边能提供一个开放的接口打开也行

有没有官方看一下呀@官方
回到顶部