streamlit icon indicating copy to clipboard operation
streamlit copied to clipboard

Published 20 hours ago • verified publisher icon streamlit

Dataframe toolbar download button does not work when Streamlit app is iframed cross-origin

Open sfc-gh-jkinkead opened this issue 10 months ago • 3 comments

Checklist

  • [X] I have searched the existing issues for similar issues.
  • [X] I added a very descriptive title to this issue.
  • [X] I have provided sufficient information below to help reproduce this issue.

Summary

When a Streamlit app is hosted in an iframe in a different origin than the parent frame, the download button in the dataframe toolbar silently fails with a console error.

This is arguably a bug in the native-file-system-adapter library used by this widget.

It's a little surprising that this has very different behavior from st.download_button.

Reproducible Code Example

// Run this snippet with node.
// If saved in `server.js`, run with `node server.js`.
const http = require("http");

const requestListener = function (req, res) {
    res.setHeader("Content-Type", "text/html");
    res.setHeader("Content-Security-Policy", "frame-src http://localhost:3000;");
    res.writeHead(200);
    res.end('<html><body><h1>App below:</h1><iframe sandbox="allow-popups allow-same-origin allow-scripts allow-downloads" src="http://localhost:3000" /></body></html>');
};

const host = "localhost";
const port = 3001;
const server = http.createServer(requestListener);
server.listen(port, host, () => {
    console.log(`Server is running on http://${host}:${port}`);
});

# Run as a Streamlit on port 3000.
# If saved in a file `repro.py`, run with `streamlit run repro.py`.
import streamlit as st
import pandas as pd

ratings_df = pd.DataFrame(
    [
        {"command": "st.selectbox", "rating": 4, "is_widget": True},
        {"command": "st.balloons", "rating": 5, "is_widget": False},
        {"command": "st.time_input", "rating": 3, "is_widget": True},
    ]
)
st.dataframe(ratings_df, use_container_width=True)

Steps To Reproduce

  1. Run the Streamlit app above.
  2. Run the node server above, which iframes the Streamlit app cross-origin.
  3. Open the node server in chrome (localhost:3001).
  4. Hover over the dataframe table.
  5. Click the "download" icon.

Expected Behavior

The CSV downloads in some way (in the background, in a new tab, via a file picker).

Current Behavior

Nothing happens.

The following is printed in the console: image

Is this a regression?

  • [ ] Yes, this used to work in a previous version.

Debug info

  • Streamlit version: develop; 1.31.1; 1.29.0
  • Python version: N/A
  • Operating System: OS X
  • Browser: Chrome

Additional Information

No response

sfc-gh-jkinkead avatar Apr 18 '24 00:04 sfc-gh-jkinkead

If this issue affects you, please react with a 👍 (thumbs up emoji) to the initial post.

Your feedback helps us prioritize which bugs to investigate and address first.

Visits

github-actions[bot] avatar Apr 18 '24 00:04 github-actions[bot]

@sfc-gh-jkinkead Can I work on this issue?

SarthakNikhal avatar Apr 18 '24 04:04 SarthakNikhal

@SarthakNikhal - This is a duplicate of #8210 ; I didn't find it when searching.

@LukasMasuch has a draft patch up #8452 , so would be better to coordinate with.

sfc-gh-jkinkead avatar Apr 18 '24 16:04 sfc-gh-jkinkead

Closing this issue since I believe it was fixed by https://github.com/streamlit/streamlit/pull/8452

lukasmasuch avatar Jun 06 '24 13:06 lukasmasuch