# iFrame Local File Issues

**URL:** <https://community.plotly.com/t/iframe-local-file-issues/69212>\
**Category:** Dash Python\
**Created:** [October 25, 2022, 8:43pm UTC](https://community.plotly.com/t/iframe-local-file-issues/69212 "2022-10-25T20:43:14Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![dash-beginner](https://avatars.discourse-cdn.com/v4/letter/d/d26b3c/32.png) [@dash-beginner](https://community.plotly.com/u/dash-beginner)\
**Post date:** [October 25, 2022, 8:43pm UTC](https://community.plotly.com/t/iframe-local-file-issues/69212/1 "2022-10-25T20:43:15Z")

</div>

Hey Everyone!

So I have some `.htm` files that I want to expose in my website through an iFrame, but I’m running into a lot of issues and a day’s worth of dredging / trial-and-error didn’t quite solve anything. I have all of my apps in a `/pages` folder (but am using my own routing as opposed to the new multipage routing option, and then within that `pages/` folder, I have a `web/` folder that contains the `.htm` files that I would like to expose. In one of my apps (in the pages folder), I’m trying to use something to the effect of this:

```python
html.Iframe(
            src="web/sample_html_page.htm",
            height="100%",
            width="100%",
            frameborder="0",
        )

```

to try to display it, but I can’t get it to work. Any help on this front would be a lifesaver. Thanks!

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [October 25, 2022, 8:49pm UTC](https://community.plotly.com/t/iframe-local-file-issues/69212/2 "2022-10-25T20:49:06Z")

</div>

Hello @dash-beginner,

What’s the dash.register\_page for that page, if it is registered, then you’d need that address. If not, then you’ll need to register and pass that address.

Is it rendered through Dash or is it actually html coding? If it is html coding, then you could actually render\_template from the flask server instead, using a route from the flask server.

---

<div class="post-metadata">

**Author:** ![dash-beginner](https://avatars.discourse-cdn.com/v4/letter/d/d26b3c/32.png) [@dash-beginner](https://community.plotly.com/u/dash-beginner)\
**Post date:** [October 25, 2022, 8:59pm UTC](https://community.plotly.com/t/iframe-local-file-issues/69212/3 "2022-10-25T20:59:07Z")

</div>

Well, so there is no dash.register\_page for the page, because my current setup handles all the routing through callbacks instead of the newer multipage setup. (i.e. takes a dcc.Location pathname as input, checks authentication status, and bumps the user to the login screen if they’re not authenticated). I’m also not sure if I’m understanding the register page component - it’s a `.htm` file that had been exported from Excel, that I would like to load into my application, below the header if that makes sense? (The htm file needs to be embedded within the page, which is why I figured an iFrame would be the direction of choice)

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [October 25, 2022, 9:10pm UTC](https://community.plotly.com/t/iframe-local-file-issues/69212/4 "2022-10-25T21:10:35Z")

</div>

Ok.

So, first pages:

`pages=True` and the pages folder tells Dash where to check to see about different layouts and routings. Each page that Dash finds that has a `dash.register_page`, the routing will be added as a valid url for the application. These routing layouts will be displayed in the app’s overall layout page container, if available.

Second:

It sounds like you need to render\_template from flask, this more than likely will be coded html.

My guess is something like this would work:

```auto
from flask import Flask, render_template
from dash import Dash, html

server = Flask( __name__ )

@server.route('/my_special_spreadsheet')
def my_special_spreadsheet():
    return render_template('pages/web/sample_html/page.htm')

app = Dash( __name__ , server = server)

html.Iframe(
            src="/my_special_spreadsheet",
            height="100%",
            width="100%",
            frameborder="0",
        )

```

---

<div class="post-metadata">

**Author:** ![dash-beginner](https://avatars.discourse-cdn.com/v4/letter/d/d26b3c/32.png) [@dash-beginner](https://community.plotly.com/u/dash-beginner)\
**Post date:** [October 25, 2022, 9:30pm UTC](https://community.plotly.com/t/iframe-local-file-issues/69212/6 "2022-10-25T21:30:07Z")

</div>

Ah I think I get what you’re doing here, but I guess I don’t quite understand how the Flask and Dash servers intermingle with one another when it comes to flask\_login? Right now, it is quite convenient to handle auth and routing through Dash with callbacks, because I’m able to use the library dash\_mantine\_components to keep styling across the entire app uniform, including the login screen. If I shifted to the Flask-based method of authentication, I guess I’m not quite sure how I would maintain that. Right now, I’m creating the flask app, passing that into the server parameter of the dash app, and then initializing flask\_login’s LoginManager class on dash\_app.server, which presumably is just the original flask application that I passed into the dash app. Does that mean that I would be able to toss on the auth\_required decorator to the server.route decorated function that you mentioned and that would solve things? (apologies of this rambling train of thought doesn’t make sense, I think I’m confusing myself more in the process here haha)

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [October 25, 2022, 10:04pm UTC](https://community.plotly.com/t/iframe-local-file-issues/69212/7 "2022-10-25T22:04:34Z")

</div>

It is possible to send the css of the dash app into the flask app routing. With the headers.
