So I have read through the other posts here on cross origin requests and I don't think anything is relevant to what I'm trying to do. Forgive me if there is a duplicate post out there somewhere!
In a nutshell, I have created a bookmarklet, which is essentially an iframe that executes a script which (is supposed to) grabs the url of the current window and makes a post request with that url (and user token) to my backend api. More or less what the Instapaper bookmarklet does.
So, my web app is a React app with a component that is an <a> with a href that contains a script that appends an iframe to the current page. The src of that appended iframe is a html file in my app's public folder. That html file has a script which is supposed to do what I've described in the paragraph above. I drag the bookmarklet from my web app to the bookmarks bar, and from another page on the web, click it, hoping it saves that url to my api. Instead I get bookmarklet.js:4 Uncaught DOMException: Blocked a frame with origin "https://my-app.com" from accessing a cross-origin frame..
The bookmarklet (the component rendered on the page) is (code is minified):
<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>
The bookmarklet.html file has this script tag: <script src="https://my-app.com/bookmarklet.js"></script>
The script in bookmarklet.js is:
(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)
})
})();
Is there any way around this cross-origin limitation? I can see from other questions on this topic that there is mention of window.postMessage but I gather that's only if I own both domains? Many thanks in advance.
