PDA

View Full Version : Javascript Image Preview



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)

jscheuer1
02-20-2016, 04:48 PM
I would say in general no. But I see that the fiddle works. If the pages update a lot, it might be a nice feature for a specific sort of use.

As for sandbox, looks like a good idea for more than just security. It should lower bandwidth as things like flash, other video, audio, etc. will not load. Scripts that force the page in the iframe to the top also will be overridden, as will code that focuses somewhere on the page in the iframe for various reasons (like a form). However you apparently don't need ="" part. <iframe sandbox></iframe> is said to be sufficient. Any values are strictly for exceptions to the full range of restrictions inherent with this attribute when used alone.