Allow navigation outside iframe
Hello!I have a dashboard running atVisual Vocabulary - a Hugging Face Space by vizrowhich contains links to some pages on GitHub, e.g.<a href="https://github.com/mckinsey/vizro">Vizro</a>When I click this link it doesn’t work inside the iframe becauseGitHub setsX-Frame-Options: deny.Hence I’ve addedtarget="_top"(ortarget="_parent") to the link to try and open it outside the iframe.Unfortunately this doesn’t work. Chrome says:Unsafe attempt to initiate navigation for frame with origin 'https://huggingface.co' from frame with URL 'https://vizro-demo-visual-vocabulary.hf.space/'. 
The frame attempting navigation of the top-level window is sandboxed, but the flag of 'allow-top-navigation' or 'allow-top-navigation-by-user-activation' is not set.Looking at the space source, the iframe looks like this:<iframe src="..." sandbox="allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-storage-access-by-user-activation"></iframe>Is there any chance thatallow-top-navigationorallow-top-navigation-by-user-activationcould be added here so that it’s possible to do this? Otherwise, as it stands it’s impossible to link to some websites (such at GitHub) from inside a HF space.(I know it’s possible to also view the dashboard directly through “Embed this space” but it would be great if this also worked from the iframe view.)Thank you!
2024-10-31T00:04:14Z
Looks like a Google issue.stackoverflow.comThe frame attempting navigation of the top-level window is sandboxed with the 'allow-top-navigation-by-user-activation'javascript, google-apps-script, iframe, web-applicationsasked byhemanton09:37AM - 22 Sep 21 UTCgithub.com/enuchi/React-Google-Apps-ScriptUnsafe attempt to initiate navigation for frame with origin 'https://docs.google.com' from frame with URL 'https://localhost:3000/taxonomytool-impl.html'. The frame attempting navigation of the top-level window is sandboxed, but the flag of 'allow-top-navigation' or 'allow-top-navigation-by-user-activation' is not set.opened04:05PM - 26 Apr 21 UTCclosed02:34PM - 28 Apr 21 UTCWillLiuMHHi!

I am trying to add a link for users to give feedback on my gsheets web ap…p. However I keep getting the error `Unsafe attempt to initiate navigation for frame with origin 'https://docs.google.com' from frame with URL 'https://localhost:3000/taxonomytool-impl.html'. The frame attempting navigation of the top-level window is sandboxed, but the flag of 'allow-top-navigation' or 'allow-top-navigation-by-user-activation' is not set.` whenever I click on the link. 

I understand I just need to set the 'allow-top-navigation-by-user-activation' sandbox attribute on the iframe, but am struggling how to do so from this library since we never declare the iframe itsself anywhere. When I ctrl+f for iframe, I only see one tag and it looks like its in the dev index.js. 

I suspect I can modify this code in the server `ui.js` file to add the attribute, but looks like I can't call `setAttribute` here. Anyone have any ideas?

```export const openTaxonomy = () => {
  const html = HtmlService.createHtmlOutputFromFile('taxonomytool')
    .setWidth(900)
    .setHeight(900);
  SpreadsheetApp.getUi().showModalDialog(html, 'Taxonomy Builder');
};
```
2024-10-31T10:20:20Z
I don’t think it’s a Google issue. Everything is behaving correctly as per theiframe’s settings. The way to fix this would be to change theiframe’s settings to includeallow-top-navigationorallow-top-navigation-by-user-activation.
2024-10-31T12:36:56Z
Oh it’s not Gradio, it’s Vizro. I found some issues.github.com/mckinsey/vizroHow to paste iframes and pure html in Vizro?opened07:49AM - 18 Jun 24 UTCclosed12:53PM - 03 Jul 24 UTCvks2General QuestionCustom Components### Question

hello!
1. is there's a way to paste regular html code in vizro?…2. is there's a way to paste an iframe in vizro?
3. is there's a way to paste custom js-code? in dash it's not so obvious, js code may be run in css only.
use case for 1-2 (dash code):

```import dash
import dash_core_components as dcc
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        # figure=fig  # commented out to make the example runnable
    ),

    html.Iframe(src="https://www.ons.gov.uk/visualisations/dvc914/map/index.html",
                style={"height": "1067px", "width": "100%"})
])

if __name__ == '__main__':
    app.run_server(debug=True, port=8049, host='127.0.0.1')
```
please note, that even importing [dbc.themes.BOOTSTRAP] breaks some bootstrap overrides that vizro uses :((

thanks much and sorry for tons of questions

### Code/Examples

_No response_

### Other information

_No response_

### Which package?

None

### Package version

_No response_

### Python version

_No response_

### OS

_No response_

### Code of Conduct

- [X] I agree to follow the [Code of Conduct](https://github.com/mckinsey/vizro/blob/main/CODE_OF_CONDUCT.md).
2024-10-31T15:14:36Z
This isn’t a Vizro issue either (for context I’m a maintainer of Vizro). The same issue would happen with Gradio or indeed just a static page hosted in Hugging Face spaces. Theiframein question is not part of the app I’ve written; it’s provided by Hugging Face, and the only way to solve this is by changing the code that’s owned by Hugging Face.If this is the wrong place to communicate with the people who run HuggingFace then please do say!P.S. I like your cat.
2024-10-31T15:21:29Z
github.comGitHub - LennardZuendorf/gradio-iFrame: Custom iframe component for Gradio, empowering the...Custom iframe component for Gradio, empowering the existing html component.It looks like there used to be a modified component for Gradio.If you want to contact HF staff, Discord is the fastest way.This cat looks like my old cat, but he is a famous talent cat who passed away a long time ago. His name is Nyaran.Gradio has a dedicated community, but even outside of that there are basically many active HF users.Join the Hugging Face Discord!Community CallsHey@John6666@mmty!Feel free to trythis link, or alternatively, you can try searching hugging face within Discord. Let me know if it works![image]
2024-11-14T17:17:49Z
Just to close the loop on this ask - we recommend opening links in a new tab. The current settings are intentional for security reasons.Super cool space, though@antonymilne!
2024-11-15T05:18:11Z
This topic was automatically closed 12 hours after the last reply. New replies are no longer allowed.