Question

所以我在这里阅读了其他关于交叉原始请求的帖子，我不认为任何事情都与我试图做的事情有关。如果某处有重复的帖子，请原谅我！

简而言之，我创建了一个bookmarklet，它本质上是一个iframe，它执行一个脚本，该脚本（应该）抓取当前窗口的url并使用该url（和用户令牌）发送一个post请求到我的后端api。或多或少Instapaper bookmarklet的功能。

因此，我的网络应用程序是一个React应用程序，其组件为<a>，其href包含一个将iframe附加到当前页面的脚本。附加的iframe的src是我应用的公共文件夹中的html文件。那个html文件有一个脚本应该做我在上面段落中描述的内容。我将书签从我的网络应用程序拖到书签栏，然后从网页上的另一个页面中点击它，希望它将该网址保存到我的api。相反，我得到bookmarklet.js:4 Uncaught DOMException: Blocked a frame with origin "https://my-app.com" from accessing a cross-origin frame.。

书签（在页面上呈现的组件）是（代码缩小）：

<a href='javascript:!function(){var t=document.createElement("iframe");t.src="https://my-app.com/bookmarklet.html",window.parent.document.body.appendChild(t)}();' className="btn btn-default">Save</a>

bookmarklet.html文件包含以下脚本标记：<script src="https://my-app.com/bookmarklet.js"></script>

bookmarklet.js中的脚本是：

(function() {
  const token = localStorage.getItem("token");
  const url = window.parent.document.location.href
  axios.post('https://my-api.com/api/v1/links/bookmarklet', {
    user: { token },
    link: { url }
  })
  .then(alert('Link posted'))
  .catch(err => {
      console.log(err)
    })
})();

有没有办法绕过这种跨界限制？我可以从关于这个主题的其他问题中看到有window.postMessage的提及，但只有当我拥有这两个域时我才会收集到这些内容吗？非常感谢提前。

Bookmarklet：阻止访问跨源框架

0 个答案: