Copy to Clipboard doesn't work in Spaces

Spaces
1

We are trying to use copy to clipboard functionality in HF Spaces, following is the code:

import streamlit as st
from bokeh.models.widgets import Button
from bokeh.models import CustomJS
from streamlit_bokeh_events import streamlit_bokeh_events
from datetime import datetime


current_time = datetime.now().strftime("%H:%M:%S")
text = f"## Current time: {current_time}"
st.write(text)
copy_button = Button(label="Copy Text")
copy_button.js_on_event("button_click", CustomJS(args=dict(text=text), code="""
    navigator.clipboard.writeText(text);
    """))

no_event = streamlit_bokeh_events(
    copy_button,
    events="GET_TEXT",
    key="get_text",
    refresh_on_update=True,
    override_height=75,
    debounce_time=0)

It works well locally, but it doesn’t work on Spaces. It seems copy to clipboard is blocked in an iframe (errror message in the browser console: “Uncaught (in promise) DOMException: The Clipboard API has been blocked because of a permissions policy applied to the current document. See Deprecating Permissions in Cross-Origin Iframes - The Chromium Projects for more details.”), it needs to add specific allowance in iframe, which I don’t know how to do it. Maybe someone has a solution?

2

maybe this discussion is relevant Feature-Policy: clipboard-read and clipboard-write · Issue #322 · w3c/webappsec-permissions-policy · GitHub

3

Thanks for the link. It seems copy to clipboard in Spaces is not trivial. There is a workaround as mentioned at Feature-Policy: clipboard-read and clipboard-write · Issue #322 · w3c/webappsec-permissions-policy · GitHub but it work only if we have the control over the parent window and the parent window is not inside an iframe again. Unfortunately the main window of the streamlit app in Spaces is again inside an iframe, so the workaround doesn’t work.

4

Hi there! Is there a solution for this? I’m having the same issue (copy & past works when deploying the Streamlit app locally, but it doesn’t when deployed on HF Spaces).