Deadweight
02-19-2016, 05:37 PM
So I was working on an live website previewer for a website; however, I found out that it is actually extremely bad and you can get attacked very easy (using iframes and what not). Is this true?
Here is the example: http://jsbin.com/busefimahi/1/edit?output
Also, is there a way to prevent redirects. (EG over value two Ill post the code below)
sandbox="" to prevent redirects
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script>
var enter = false;
$(document).on({
mouseenter:function(){
var srcx = $(this).attr('href');
app = '<div id="preview"><img src="http://www.chimply.com/coconut/images/955666"/><iframe sandbox=""></iframe></div>';
if($('#preview').length === 0){
$('body').append(app);
} $('#preview>iframe').attr('src',srcx);
$('#preview>iframe').load(function(){
$(this).parent().children('img').css('display','none');
$(this).fadeIn(200);
});
},
mousemove:function(e){ $('#preview').css('left',e.pageX+10+'px');
$('#preview').css('top',e.pageY+10+'px');
},
mouseleave:function(){
$("#preview").remove();
}
},'.box');
function la(x){
$('#l').append(x);
}
function lt(x){
$('#l').text(x);
}
</script>
<style>
#preview {
position:absolute;
}
#preview>iframe {
display:none;
}
</style>
</head>
<body>
<div id=l></div>
<a href="http://thebcelements.com/" target=_blank class=box>
Checking
</a>
<br />
<a href="http://phpfiddle.org/" target=_blank class=box>
Two
</a>
</body>
</html>
But my main question is doing a live preview like this a good idea? (I know that https and http websites cant cross and most websites wont work with iframes)
Here is the example: http://jsbin.com/busefimahi/1/edit?output
Also, is there a way to prevent redirects. (EG over value two Ill post the code below)
sandbox="" to prevent redirects
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script>
var enter = false;
$(document).on({
mouseenter:function(){
var srcx = $(this).attr('href');
app = '<div id="preview"><img src="http://www.chimply.com/coconut/images/955666"/><iframe sandbox=""></iframe></div>';
if($('#preview').length === 0){
$('body').append(app);
} $('#preview>iframe').attr('src',srcx);
$('#preview>iframe').load(function(){
$(this).parent().children('img').css('display','none');
$(this).fadeIn(200);
});
},
mousemove:function(e){ $('#preview').css('left',e.pageX+10+'px');
$('#preview').css('top',e.pageY+10+'px');
},
mouseleave:function(){
$("#preview").remove();
}
},'.box');
function la(x){
$('#l').append(x);
}
function lt(x){
$('#l').text(x);
}
</script>
<style>
#preview {
position:absolute;
}
#preview>iframe {
display:none;
}
</style>
</head>
<body>
<div id=l></div>
<a href="http://thebcelements.com/" target=_blank class=box>
Checking
</a>
<br />
<a href="http://phpfiddle.org/" target=_blank class=box>
Two
</a>
</body>
</html>
But my main question is doing a live preview like this a good idea? (I know that https and http websites cant cross and most websites wont work with iframes)