search

binh-vu / streamlit-bridge

Streamlit components that allow client side (javascript) to send data to the server side (python) and render HTML content without being processed by Markdown.
MIT License
27 stars 7 forks source link

Cross origin issue when in iframe #2

Closed koenvo closed 2 years ago

koenvo commented 2 years ago

Thanks for this great library! It works very nicely in regular streamlit apps!

In my case I embed a streamlit application within a iframe. The parent and the streamlit are cross-origin and the iframe cannot access its parent. When streamlit-bridge tries to access window.top this will give a cross-origin issue.

This should be solved by changing

const global = window.top || window.parent;

to something like

let global;
try {
  window.top.stBridges; // try to access a attribute on window.top. this will raise an exception in cross-origin situations
  global = window.top;
} catch {
  global = window.parent;
}

If wanted I can create a PR for this.

binh-vu commented 2 years ago

Thank you for spotting this issue and posting a solution.

If wanted I can create a PR for this.

Yes, please. A PR would help me a lot. Thanks!

koenvo commented 2 years ago

I was also wondering when do you actually need ‘window.top’? Due to how streamlit works it should always be ‘window.parent’, right?

binh-vu commented 2 years ago

Sorry it has been a long time since I wrote the code so I couldn't remember all of the details. I think I may have thought to attach to the top most window to allow for a weird case that I want to communicate with streamlit outside of the streamlit embedded app. We may have security issue but CORS will prevent that --- and your PR did fix that.

One thing because you mentioned, I think the HTML component should only use window.parent. I'll merge the PR and fix that.

Thanks and I appreciate your help!

binh-vu commented 2 years ago

fixed @ version 1.1.1 - a5383f4