脸谱网报错：“不安全的JavaScript试图访问带有URL的框架”-JavaScript中文网-JavaScript教程资源分享门户

最近，在开发前端页面时，你可能会遇到脸谱网（Facebook）提供的一个错误信息：“不安全的JavaScript试图访问带有URL的框架”。这意味着在某些情况下，你的JavaScript代码可能无法正确地访问一个嵌入式iframe中的内容。

问题分析

出现这个错误的原因是由于浏览器实施了一些安全策略，这些策略旨在保护用户免受跨站点攻击等安全威胁。其中之一就是“同源策略”（Same-origin policy），它要求所有进行跨站点资源访问的请求都必须和被请求资源位于同一域名、端口和协议下。当违反此策略时，浏览器将拒绝该请求并报告错误。

具体来说，在脸谱网上嵌入一个包含其他网站内容的iframe（通常称为“嵌入式框架”）时，如果该iframe的URL与当前网页的URL不匹配，就会导致所述错误的出现。例如，假设你从https://www.example.com网站上嵌入了一个iframe，并且该iframe内部的地址为https://www.google.com，那么当你尝试使用JavaScript访问这个iframe的内容时，就会收到上述错误信息。

解决方案

为了避免出现这个问题，我们需要确保嵌入的iframe与包含它的页面具有相同的协议、主机名和端口。如果我们不能更改iframe本身的URL，那么可以考虑通过代理服务器（Proxy server）或其他技术手段来解决跨域问题。

下面是一个可能导致此错误的示例代码：

-- -------------------- ---- -------
--------- -----
------
------
  -----------------
-------
------
  ------- ---------------------------------------
  --------
    --- ------ - ---------------------------------
    ------------------------------------- - ------- --------
  ---------
-------
-------

该代码将在页面中嵌入https://www.example.com网站，然后尝试使用JavaScript将其内容替换为“Hello, world!”。由于两个网站的域名不匹配，因此会触发上述错误。

要解决此问题，可以使用以下方法之一：

将iframe的URL更改为当前网页的URL，例如：

<iframe src="https://www.yourdomain.com/yourpage.html"></iframe>

如果无法更改iframe URL，则可以考虑使用代理服务器来解决跨域问题，例如：
```
<iframe src="https://proxyserver.com/https://www.example.com"></iframe>
```

更改页面脚本以使用postMessage API进行通信，例如：

<iframe src="https://www.example.com"></iframe>
<script>
  var iframe = document.querySelector("iframe");
  iframe.addEventListener("load", function() {
    iframe.contentWindow.postMessage("Hello, world!", "*");
  });
</script>

在第三种方法中，我们使用addEventListener()函数来监听iframe的load事件，并在iframe加载完毕后发送一个包含“Hello, world!”文本内容的消息。然后，我们可以在嵌入的iframe中使用window.addEventListener()函数来监听这个消息，并将其显示在iframe内部。

结论

在访问带有URL的嵌入式框架时，如果出现“不安全的JavaScript试图访问带有URL的框架”的错误，请确保所请求的资源与当前页面具有

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/13452