I have a tool in place that shows files from a specific directory in a data table. The user is able to click on those files and can show their contents in another div. I have this working for markdown files since there is a nice and easy component for rendering. However, the other file type is fairly complicated HTML (generated from converting word → html). Would it be best to display this content in an iframe? If so, whats the best way to offer local files. Or, is it possible to use the HTML core components to display it?
For security reasons (XSS), it is not possible to render raw HTML. However, a current workaround is to display the HTML string inside the srcDoc attribute of an IFrame. Here’s an example:
import dash
import dash_html_components as html
app = dash.Dash()
app.layout = html.Div([
html.Iframe(
# enable all sandbox features
# see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
# this prevents javascript from running inside the iframe
# and other things security reasons
sandbox='',
srcDoc='''
<h3>IFrame</h3>
<script type="text/javascript">
alert("This javascript will not be executed")
</script>
'''
)
])
if __name__ == '__main__':
app.run_server(debug=True)
2 Likes
Awesome! That did the trick, thank you!
1 Like
Im doing the same thing and this works great but the size is not right and i cant figure out how to resize the display??? this is the code…
//
html.Div([
html.Iframe(
# enable all sandbox features
# see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
# this prevents javascript from running inside the iframe
# and other things security reasons
srcDoc='''
<!-- TradingView Widget BEGIN -->
Technical Analysis for AAPL by TradingView
'''
)
]),
and this is what comes up on the screen
Everyone i try just comes out a little square on the top right of the screen that shows only a tine portion of the chart and i cant figure out how to get it to show the full chart, resize and place it in certain area of page?
Any help would be appreciated! Dash is great for Python people!
Hi @bbgroup
Try setting the width and height of the Iframe()
html.Div([
html.Iframe(
# enable all sandbox features
# see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
# this prevents javascript from running inside the iframe
# and other things security reasons
srcDoc='''
<!-- TradingView Widget BEGIN -->
Technical Analysis for AAPL by TradingView
''',
style={"height": 640, "width": 1000},
)
]),
THANKS! positioning on the screen is taking me while to get it… it seems like everything i do is causing something else to move or change positions and then i have to figure out how to move that… now that i got that displayed right it then caused one of them to move half way down the screen and halfway off the screen… it seems like these things have blocks/take up rows/columns that i dont see and so i have to consider the position of the unseen part because it moves other stuff… here is what im talking about… i have 2 of those iFrame… basically inside these i have widgets from other sites… and the screen shot is how they are displayed…
layout = html.Div([
html.H1(
children=‘The B & B News Room’,
style={
‘textAlign’: ‘center’,
# ‘color’: colors[‘text’]
}
),
html.Div(children='Our News Feed comes from over 60 Crypto Sites.', style={
'textAlign': 'center',
# 'color': colors['text']
}),
html.Div([
html.Iframe(
# enable all sandbox features
# see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
# this prevents javascript from running inside the iframe
# and other things security reasons
srcDoc='''
''',
style={"height": 640, "width": 1300, 'textAlign': 'center'},
)
], className='mb-5'),
html.Div([
html.Iframe(
# enable all sandbox features
# see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
# this prevents javascript from running inside the iframe
# and other things security reasons
srcDoc='''
''',
style={"height": 640, "width": 1000}
)
], className='mb-10'),
])
this is what it looks like… the 2nd one moved 3/4 of the way down the screen and its a scroller… its like the streaming news thing has a ton of unused space on the bottom of it and wont let anything go underneath it… i would think i need to place some kind of className under it, or top of the next one… im trying to use the cheetsheet i have but not really getting this…Do i space on top, bottom, both? how do i do multiple spaces to position how i want in the screen… it seems like i can only do the position thing once? How do i do multiple position arguements for one component? sorry so many questions… I also tried several things to make the news stream to fit the whole screen but couldnt get it to work… when i tried to adjust the width it just moved the right side of it… the left side wouldnt move…
className="mt-5"
Hi @bbgroup
I’m not sure exactly what you are asking, but it seems like you are struggling with the layout of the app. I don’t know what cheatsheet you are using, but here are some helpful sites for learning more:
-
Mozilla tutorial: Learn to style HTML using CSS - Learn web development | MDN
-
W3 schools tutorial: CSS Tutorial
-
Using Bootstrap can also make it easier to style an app. Here is a good introductory video Complete Guide to Bootstrap Dashboard Apps - Dash Plotly - YouTube
Note that using iframes can raise security risks in an app - especially if you have all the sandbox security settings disabled.
-
Here is more info on security risks with
iframe: From object to iframe — other embedding technologies - Learn web development | MDN -
See this thread for more information about writing secure dash apps: Writing Secure Dash Apps - Community Thread
Finally, it will be easier to help if you ask specific questions and provide a minimal working example. This post has more info on how to do that. How to Get your Questions Answered on the Plotly Forum
1 Like
Hi AnnMarie,
Thanks, I have been in contact with adam who made those vids, they are great! Im having a couple of problems both of us couldnt figure out. I already made a post about them but nobody answered me so i will try again. Thx!
In the tradingview widget, it has the option to have a fixed size or autosize. And you can also adjust your html.Iframe with style={“height”: 640, “width”: 1200} to get the dash and tradingview pieces to the right size.
“width”: “100%”,
“height”: “100%”,
“autosize”: true,