Add `allow-top-navigation` to iframe `sandbox` attribute

[dasmy]

Problem

I developed an application that relies on interactive database queries. The idea is to allow for digging deeper into the database by clicking onto interesting keywords in a results table. This has been implemented by HTML markup around keywords to generate hyperlinks with query params that are evaluated in my application using st.experimental_get_query_params.

The links look like the following

<a href="/?q=keyword target="_top">keyword</a>

The _target attribute should make sure, that links are opened in the same browser tab as the main streamline application. However, the interactive elements in streamlit are embedded in iframes with the sandbox attribute set in a way that _top navigation is not allowed.

Thus, depending on the browser links open in a new tab or do not open at all, both of which is undesired.

As I cannot invoke Python code from the hyperlink, I cannot use st.experimental_set_query_params to circumvent the issue.

Solution

MVP: Add allow-top-navigation or allow-top-navigation-by-user-activation to the default sandbox attribute of iframes.

Possible additions: Having this configurable via the .streamlit/config.toml might be useful to have a compromise between functionality and security, if needed.

Additional context

This request seems to have been asked for by multiple people, e.g. https://discuss.streamlit.io/t/is-there-a-way-to-allow-top-navigation-within-an-iframed-component/40193, https://discuss.streamlit.io/t/navigate-to-new-page-in-multi-page-app-using-link-in-aggrid-cell/26319

---

Community voting on feature requests enables the Streamlit team to understand which features are most important to our users.

If you'd like the Streamlit team to prioritize this feature request, please use the 👍 (thumbs up emoji) reaction in response to the initial post.

[sfc-gh-jrieke]

This is inside a custom component? Or in the normal app?

[dasmy]

I am representing my data inside Aggrid using st_aggrid inside an otherwise regular streamlit app. The clickable keywords are generated with a custom cell renderer that uses some Javascript to insert the respective HTML code (some div and an a tag, all with a bit of CSS).

However, I assume that being able to having usable hyperlinks in conjunction with st.experimental_query_params would be valuable independent of specific components.

[jaypinho]

I second this request: I have a use case where I need to directly link to another (external) page so it opens in the same top window that the Streamlit app is currently in, and there's no way to do so.

UPDATE: I've found a somewhat hacky workaround for the time being that seems to work. I'm using the combo of st.markdown and components.html() to create an invisible link on the topmost browser window, and then I trigger its click event whenever the user clicks on the visible link inside the standard Streamlit iframe:

st.markdown(f"""
                    <a id="stripe-btn" href="javascript:void(0);">
                        <div style="
                            display: inline-flex;
                            -webkit-box-align: center;
                            align-items: center;
                            -webkit-box-pack: center;
                            justify-content: center;
                            font-weight: 400;
                            padding: 0.25rem 0.75rem;
                            border-radius: 0.25rem;
                            margin: 0px;
                            line-height: 1.6;
                            width: auto;
                            user-select: none;
                            background-color: #FD504D;
                            color: rgb(255, 255, 255);
                            border: 1px solid rgb(255, 75, 75);
                            text-decoration: none;
                            ">
                            Pay ${price}
                        </div>
                    </a>
                """, unsafe_allow_html=True)

                html(f"""
                    <script>
                    
                        function redirectToStripe() {{
                            window.top.document.getElementById('stripe-link').click();
                        }}
                        window.parent.document.getElementById('stripe-btn').addEventListener("click", function(event) {{
                            redirectToStripe();
                            event.preventDefault();
                        }}, false);
                     
                        // Create iframe element
                        const redirect_link = document.createElement('a');
                        redirect_link.href = '{session.url}';
                        redirect_link.target = '_top';
                        redirect_link.innerText = 'Invisible Link';
                        redirect_link.style = 'display:none;';
                        redirect_link.id = 'stripe-link';
                        window.top.document.body.appendChild(redirect_link);

                    </script>
                """)

[marcosberghahn]

I also am needing this feature. People are doing all kinds of nasty work arounds becasuse of this.
https://discuss.streamlit.io/t/navigate-to-new-page-in-multi-page-app-using-link-in-aggrid-cell/26319/4
We need to prioritize this!