I'm currently looking into XSS attacks, with the aim of using them in client demonstrations (I'm a pen tester). I've written a tool that will host a malicious version of a website's login page (that harvests usernames and passwords) and then redirects the victim back to the original website. However, I have been trying to get it to work using iframes instead, as it would look far more convincing as the url won't change.
I've googled about and this seems to be the appropriate code:
<iframe src="http://192.168.0.1/login.php" style="border: 0; width: 100%; height: 100%">
but the iframe created is by no means full screen (on internet explorer and firefox). Here is a screenshot
As you can see, the iframe login page is beneath the "what is your name?" area, thus no where near full screen. I've tried editing the css file of the malicious login page, to include full screen parameters, but this has no effect either.
Does anyone have any solutions? Thanks!
Not tested, but try this:
<iframe src="http://192.168.0.1/login.php" style="border: 0; position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%">
or
<iframe src="http://192.168.0.1/login.php" style="border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%">
This code works:
<html>
<head>
<style type="text/css">
body
{
margin: 0;
overflow: hidden;
}
#iframe1
{
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
}
</style>
</head>
<body>
<iframe id="iframe1" src="HERE PLACE YOUR URL" frameborder="0"></iframe>
</body>
</html>
Related
I am working with django_plotly_dash to render dashboards within django template (from the doc, the dashboard can either be integrated as an iframe or in the DOM elements of the page. I chose to go the iframe road.
The dashboard nevers takes the full screen on page. it is stucked on a small window.
Looking at the dev tools in my browser, I found which div element is causing the issue, however, I dont know where it is come from because it is nowhere to be found on my code.
here is my code:
{% load plotly_dash %}
<div class="{% plotly_class name='report' %}" style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
<div style="position:absolute,top:0"> {% plotly_app name='report' initial_arguments=context %}
</div>
</div>
but then now, here is what the source code look like with tools:
<div class="django-plotly-dash django-plotly-dash-iframe django-plotly-dash-app-report" style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
<div style="position:absolute,top:0">
<div style="
position: relative;
padding-bottom: 10.0%;
height: 0;
overflow:hidden;
">
<iframe src="/django_plotly_dash/app/report/initial/dpd-initial-args-8f2af15363304c6682112b8a6a3fc974/" style="
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
" frameborder="0" sandbox="allow-downloads allow-scripts allow-same-origin"></iframe>
</div>
</div>
</div>
there is a div tag with css between the declaration of my django dash app in template and the rendering of the iframe. Does someone knows where it comes from?
I am guessing it may be something buggy from django dash, in that case, how to override that css property?
EDIT: i went to search in the github of django plotly dash and here is the function causing the issue:
#register.inclusion_tag("django_plotly_dash/plotly_app.html", takes_context=True)
def plotly_app(context, name=None, slug=None, da=None, ratio=0.1, use_frameborder=False, initial_arguments=None):
'Insert a dash application using a html iframe'
fbs = '1' if use_frameborder else '0'
dstyle = """
position: relative;
padding-bottom: %s%%;
height: 0;
overflow:hidden;
""" % (ratio*100)
istyle = """
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
"""
cache_id = store_initial_arguments(context['request'], initial_arguments)
da, app = _locate_daapp(name, slug, da, cache_id=cache_id)
sandbox_settings = SANDBOX_STRING
return locals()
It looks like I need to find a way to use istyle and not dstyle
The plotly_app template tag expands as defined in plotly_app.html :
<div style="{{dstyle}}">
<iframe src="{{app.base_url}}" style="{{istyle}}" frameborder="{{fbs}}" sandbox="{{sandbox_settings}}"></iframe>
</div>
You might want to just comment out the outer div. You could also try to use another template, ie. :
plotly_app_bootstrap, for use with responsive layouts using the Bootstrap library
plotly_direct, allows the direct insertion of html into a template, instead of embedding it in an iframe.
I would suggest playing a bit with the different templates without any extra styles, before eventually adding them (specifically those you add in the outer divs) if necessary.
I am new to web development. I am using asp.net. Below is the CSS I use in a .aspx file. When I open it in my phone the UI looks fine although the #background is a little bit longer than the whole page.
<style type="text/css">
#form1 {
position: absolute;
z-index: 1;
}
#background {
position: absolute;
width: 100%;
height: 180%;
z-index: 0;
}
#Image1{
position:relative;
width:100%;
height:100%;
}
</style>
When I click the button, the UI refreshes to make the #background to be the same size as the whole page but extends the size of #Image1. Why does the refresh of page do this? How to avoid it? Thanks.
<div align="center">
<asp:Button ID="Reserve" runat="server" Width="800px" Text="Reserve" Font-Size="45px" BackColor="OrangeRed" ForeColor="White" OnClick="Reserve_Click"/>
</div>
Solved. The problem is in the back-end code
Response.Write("<script>alert(....)").
After changing it into
Page page=this.Page;
if (!page.ClientScript.IsStartupScriptRegistered(page.GetType(), "alert"))
{
page.ClientScript.RegisterStartupScript(page.GetType(), "alert", "<script>alert(....)");
}
the css is ok. referred from https://blog.csdn.net/woshixuye/article/details/7217261
I'm trying to load iframe of bing, that show its navbar, but something wierd happens. when I load this it doesnt show the navbar but the search bar, but if I change (in the chrome inspector)the hieght from 35px to 3500px and then back to 35px. it shows the navbar.
<iframe src="http://www.bing.com/" scrolling="no" style="border: 0px none; position:absolute; left=0px; top=0px; margin-top: 0px; z-index:0; width:1700px; height:35px;"></iframe>
anyone have ideas why it happens?
Thank you!
It looks like there's some JavaScript on Bing that's moving the search bar to the top on page load.
It seems you can get round this by hiding the iframe by default in CSS, then showing it on document ready using jQuery:
<iframe src="http://www.bing.com/" scrolling="no" style="border: 0px none;
position:absolute; left:0px; top:0px; margin-top: 0px; z-index:0; width:1700px;
height:35px; display: none;">
</iframe>
$(function () {
$("iframe").show();
});
DEMO
You do need to use some javascript here and hiding initially seems to be the best way forward. You can do it in pure javascript by listening to the load event of the iframe, and then showing it:
document.getElementById('f').addEventListener('load', function() {
document.getElementById('f').style.display = '';
});
<iframe id="f" src="http://www.bing.com/" scrolling="no" style="border: 0px none; position:absolute; left=0px; top=0px; margin-top: 0px; z-index:0; width:1700px; height:35px; display:none;"></iframe>
I have a full page iframe, but in chrome the scroll bar initially loads then disappears, the room is there for it, and you can use it but it's not visible. Works perfect in safari and firefox and chrome on pc, however on a mac you see the well of the scroll bar, but the bar itself is missing.
body,html{
height:100%;
overflow:hidden;
}
#me-branding-bar{
overflow:hidden;
width:100%;
height:40px;
position:relative;
background-color:#ff9900;
}
#me-content{
height:100%;
width:100%;
position:relative;
border:1px solid #ff9900;
}
#me-content iframe{
border:1px solid #000;
overflow:scroll;
}
<div id="me-branding-bar">
</div>
<div id="me-content">
<iframe border="0" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0" src="<?php echo $url;?>" style="overflow:visible;height:100%;width:100%;" height="100%" width="100%"></iframe>
</div>
http://jsfiddle.net/RYwty/
Why does the scrollbar disappear in an <iframe> when using Chrome on a Mac?
That's a pretty broad question when your <iframe> contains an entire page from an external site. Let's break it down into a few steps.
The following examples assumes that you use Chrome on a Mac.
Make a simple test
Create a very simple HTML page, put it in an <iframe>, and view it in Chrome on a Mac (DEMO).
The scrollbar does not disappear. Everything seems fine. So it's most likely something on the external site is causing the problem.
Debug the external site
The symptom is that the scrollbar actually appears for a very short time before it disappears, but the page is still scrollable. Maybe JavaScript is causing the problem? Let's disable JavaScript and try it out.
It turns out the scrollbar does not disappear when JavaScript is disabled. So something loaded by JavaScript is causing the problem. Further debugging reveals that a flash object is the culprit.
Make another test
Create two simple HTML test pages and add a flash object to one of them. Put them into different <iframe>s and compare them to see the difference.
<object type="application/x-shockwave-flash"></object>
It turns out the one with a flash object does not have a visible scrollbar.
Conclusion
The scrollbar does not disappear in a normal <iframe>, but the ones with a flash object. It may be a bug, or it may be an intentional dirty hack. Many flash ads and videos are served in <iframe>s and having a scrollbar in them isn't pretty.
But the point is, you are serving external contents in your <iframe> and these are things that you have no control of.
<iframe src="<?php echo $url;?>"></iframe>
Maybe you can try your best to solve an issue or two, but there are dozens of things happening in an external page that can break things here and there. People can even prevent their sites from being placed in an <iframe> with a little help from JavaScript and HTTP headers. As long as the page loads, you should be happy about it. Don't bother too much about minor details like the disappearing scrollbar. Only worry about it when the page isn't actually scrollable. You are talking a scrolling on a Mac. Most of the time this is done by gestures, not scrollbars.
If you do want more control of the external contents, consider loading it on server side with cURL and modifying the contents with HTML parsers.
The code below seems to solve the iframe scrollbar problem in Chrome on a Mac.
This fix is cross-browser compatible with Firefox, Safari, and Opera on Mac and PC.
jsfiddle
HTML:
<div id="me-branding-bar"></div>
<div id="me-content">
<iframe src="http://tsn.ca" height="100%" width="100%" class="iframeclass"></iframe>
</div>
CSS:
body,html{height:100%;overflow:hidden;}
#me-branding-bar{overflow:hidden;z-index:102;width:100%;height:40px;position:relative;background-color:#ff9900;}
#me-content{height:100%;width:100%;position:relative;border:1px solid #ff9900;}
#me-content iframe{border:1px solid #000;}
.iframeclass::-webkit-scrollbar {
width:10px;
}
.iframeclass::-webkit-scrollbar-track {
-webkit-border-radius:5px;
border-radius:5px;
background:rgba(0,0,0,0.02);
}
.iframeclass::-webkit-scrollbar-thumb {
-webkit-border-radius:5px;
border-radius:5px;
background:rgba(0,0,0,0.3);
}
.iframeclass::-webkit-scrollbar-thumb:hover {
background:rgba(0,0,0,0.3);
}
.iframeclass::-webkit-scrollbar-thumb:window-inactive {
background:rgba(0,0,0,0.3);
}
Remove the styles from your html and add scrolling="yes" >> http://jsfiddle.net/95Tes/
<!--same code as before just remove your css styles from the html -->
*{
margin:0;
padding:0;
}
html, body{
height:100%;
width:100%;
}
#me-branding-bar{
width:100%;
height:10%;
position:relative;
background-color:#ff9900;
display:block;
}
#me-content{
display:block;
height:90%;
width:100%;
position:relative;
border:none;
}
#me-content iframe{
border:none;
display:block;
overflow:auto;
}
::-webkit-scrollbar{-webkit-appearance: scrollbarthumb-vertical;}
ant try that link 1 link 2
jsfiddle
This code may help you.I do not have mac so please do not give any negative points,I hope.I want to say you do not use different style in css rule as well as html style.Here you used like that
<iframe border="0" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0" src="http://www.tsn.ca" style="overflow:visible;height:100%;width:100%;"></iframe>
#me-content iframe{
border:1px solid #000;
overflow:scroll;
}
See the image in the other tab or save the image at first and see it to more clear!
Please use this code which I have modified css as well as html
<style>
*{
margin:0px;
paddinig:0px;
}
body,html{
height:100%;
overflow:hidden;
}
#me-branding-bar{
overflow:hidden;
width:100%;
height:40px;
position:relative;
background-color:#ff9900;
}
#clearboth {
clear:both;
}
#me-content{
height:calc(100% - 40px);
width:100%;
position:relative;
border:1px solid #ff9900;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
}
#me-content iframe{
border:1px solid #000;
overflow:scroll;
width:100%;
height:100%;
}
</style>
Here is the modified html
<div id="me-branding-bar">
</div>
<div id="clearboth"></div>
<div id="me-content">
<iframe border="0" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"
src="http://www.tsn.ca"></iframe>
</div>
Hope it will work!
How can I make my iframe fill the window and not display any scrollbars?
This works for IE6, I would like to get it to work for all browsers if possible:
<iframe name=iframe1 src="theSiteToShow.html" width="100%" height="100%" frameborder="0" marginheight="10" marginwidth="10"></iframe>
<script type="text/javascript">
function resizeIframe() {
var height = document.documentElement.clientHeight;
height -= document.getElementById('frame').offsetTop;
// not sure how to get this dynamically
height -= 20; /* whatever you set your body bottom margin/padding to be */
document.getElementById('frame').style.height = height +"px";
};
document.getElementById('frame').onload = resizeIframe;
window.onresize = resizeIframe;
</script>
You should be able to do this using CSS only, without any need for javascript. The following works for me in IE6+, Google Chrome and Safari:
<style type="text/css">
body {
margin: 0;
overflow: hidden;
}
#iframe1 {
position:absolute;
left: 0px;
width: 100%;
top: 0px;
height: 100%;
}
</style>
<iframe id="iframe1" name="iframe1" frameborder="0"
src="theSiteToShow.html"></iframe>
Your frame margins should be set in the body of theSiteToShow.html.
UPDATE
Following your comment, I used the following as a test page:
<html>
<head>
<style type="text/css">
body {
margin: 0;
overflow: hidden;
}
#iframe1 {
position:absolute;
left: 0px;
width: 100%;
top: 0px;
height: 100%;
}
</style>
</head>
<body>
<iframe id="iframe1" src="http://stackoverflow.com" frameborder="0"></iframe>
</body>
</html>
Tested in IE6+, Chrome, Safari and Firefox, it works just fine and fills the entire window.
I was having the same issues with the scroll bars as well as the No Context Menu showing up, even though all these elements had been disabled. After a few days of trying to solve them, I stumbled on this post, which helped a bit, but led me onto finding a post on flexible webplayers with three code examples. Here're the links:
http://virtualplayground.d2.pl/?p=367#comment-224
Download package
Use the index file if you want a blank sheet to work from, replace your existing code in your exported .html file (from Unity export), replace the 'unityObject.embedUnity' link with your own link to your .html file located on your server.
To embed the player in your page using an iframe add:
Lock and load.
Hope this helps.
^_^