Question
I created a lightbox, with an iframe feature to load external websites. Some of the websites being iframed in the lightbox load, such as my own site www.scriptsconnect.com, as well as www.w3schools.com. But sites like google.com and yahoo.com don't load, and the error being thrown in my browser is the same domain policy.
A JSFiddle can be found here: http://jsfiddle.net/WZrmL/
Below is all my code. If someone could help me with an approach that would work to get around the same origin policy, I'd really appreciate it. Perhaps my approach is what is throwing the SOP?
https://stackoverflow.com/questions/20843868
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
<title>SC Popup</title>
<meta charset="windows-1252">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.clear { clear: both; margin: 0; padding: 0; width: 0; height: 0; font-size: 0; line-height: 0; overflow: hidden; }
/* Backdrop */
div.popupbackdrop {
position: fixed;
top: 0;
left: 0;
z-index: 999998;
display: none;
width: 100%;
height: 100%;
cursor: pointer;
background: rgba(0, 0, 0, 0.30);
}
/* Popup */
#scpopup {
position: absolute;
top: 50%;
left: 50%;
z-index: 999999;
display: none;
margin: 0;
padding: 0;
width: auto;
height: auto;
color: #000;
font-family: Arial, Helvetica, Sans-serif;
}
#scpopupouter {
padding: 15px;
height: 100%;
border: 15px solid #000;
border: 15px solid rgba(0, 0, 0, 0.80);
background-color: #fff;
background-color: rgba(255, 255, 255, 0.95);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.30);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.30);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.30);
}
#scpopupinner {
position: relative;
height: 100%;
}
/* Popup Title/Subtitle */
#scpopuptitle,
#scpopupsubtitle {
position: absolute;
z-index: 50;
width: 100%;
font-size: 13px;
text-align: center;
}
#scpopuptitle {
top: -60px;
font-weight: bold;
}
#scpopupsubtitle {
bottom: -60px;
}
#scpopupholder {
height: 100%;
}
#scpopupcontent {
height: 100%;
color: #131313;
font-family: Arial, Helvetica, Sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
line-height: 15px;
text-align: left;
}
#scpopupcontent iframe {
width: 100%;
height: 100%;
border: 0 none;
}
</style>
<script>
(function($){
$.fn.scpopup = function(options){
var defaults = {
// Settings Variables
linkType : "iframe", // iframe, inline, html, image
scWidth : "65%", // Width of popup container (in px, % or auto)
scHeight : "auto", // Height of popup container (in px, % or auto)
popupMaxWidth : "700px;", // Max width of popup container (in px, % or auto)
popupMaxHeight : "auto", // Max width of popup container (in px, % or auto)
popupTheme : "test", // Popup theme name (is an additional class added to parent)
activeClass : "active", // Class name to use for active elements
popupPosition : "fixed", // absolute, fixed
effectOpen : "", // Popup opening effect
effectClose : "", // Popup closing effect
htmlContent : "<h2>Title</h2><p>This content will go into the popup.</p>" // Must set linkType to html
};
var options = $.extend(defaults, options);
// Functions to Specify Width and Height of Popup
function scpopupWidth(scW) {
$('#scpopup').css({'position' : options.popupPosition, 'margin-left' : '-' + scW/2 + 'px'});
}
function scpopupHeight(scH) {
$('#scpopup').css({'position' : options.popupPosition, 'margin-top' : '-' + scH/2 + 'px'});
}
// Append Backdrop and Content Container
$('div.popupbackdrop').remove();
$('body').append('<div class="popupbackdrop"></div>');
$('body').append('<div id="scpopup" class="scpopup"><div id="scpopupouter"><div id="scpopupinner"><div id="scpopuptitle"></div><div id="scpopupsubtitle"></div><div id="scpopupholder"><div id="scpopupcontent"></div><div class="clear"></div></div><div class="clear"></div></div><div class="clear"></div></div>');
// Set Width and Height of Outer Container
$('#scpopup').width(options.scWidth).height(options.scHeight).addClass(options.popupTheme);
$(this).addClass('scpopuplink');
// Click Event: Open
$(this).on('click', function(e){
e.preventDefault();
// Margin/Width/Height for Popup
scpopupWidth($('#scpopup').width());
scpopupHeight($('#scpopup').height());
// Setting Body/HTML tags to 100% width and height
$('body', 'html').css({'width' : '100%', 'height' : '100%'});
$('body').addClass('scpopupactive');
// Transitions
$('div.popupbackdrop').fadeIn(150).addClass(options.activeClass);
$('#scpopup').fadeIn(300).addClass(options.activeClass);
// Empty Title/Subtitle Holders on Click
$('#scpopuptitle, #scpopupsubtitle').empty();
// Load Title/Subtitles on Click
$('<span></span>').text($(this).attr('title')).appendTo('#scpopuptitle');
$('<span></span>').text($(this).attr('alt')).appendTo('#scpopupsubtitle');
// Link Type (linkType)
if(options.linkType == 'iframe'){
$('#scpopupcontent').empty().append(
$('<iframe>', {src: this.href})
);
//$('#scpopupcontent').empty().append('<iframe src="' + this.href + '"></iframe>');
}else if(options.linkType == 'inline'){
//alert('inline');
}else if(options.linkType == 'html') {
$('#scpopupcontent').empty().append(options.htmlContent);
}else if(options.linkType == 'image') {
//alert('image');
}
});
// Click Event: Close
$('div.popupbackdrop').on('click', function(e){
e.preventDefault();
$('body').removeClass('scpopupactive');
$(this).delay(50).fadeOut(300).removeClass(options.activeClass);
$('#scpopup').delay(25).fadeOut(150).removeClass(options.activeClass);
});
};
})(jQuery);
$(document).ready(function(){
$('.itemlink').scpopup({ scHeight : "500px" });
$('.htmlcontent').scpopup({
linkType : "html",
scHeight : "350px",
htmlContent : "<h2>HTML Content Title</h2><p>This content will go into the popup. This content shows up in the popup only if linkType is set to html.</p>"
});
});
</script>
</head>
<body>
<a href="http://www.google.com" class="itemlink" target="_blank" title="Google Title" alt="Google Subtitle">Google</a>
<a href="http://www.yahoo.com" class="itemlink" target="_blank" title="Yahoo Title" alt="Yahoo Subtitle">Yahoo</a>
<a href="http://www.w3schools.com" class="itemlink" target="_blank" title="W3Schools Title" alt="W3Schools Subtitle">W3Schools</a>
<a href="http://www.scriptsconnect.com" class="itemlink" target="_blank" title="ScriptsConnect Title" alt="ScriptsConnect Subtitle">ScriptsConnect</a>
<a href="#" class="htmlcontent" target="_blank">html content</a>
</body>
</html>
Solution
Maybe the reason is google returns:
X-Frame-Options: SAMEORIGIN
you can read informations about it in this specification:
https://developer.mozilla.org/en-US/docs/HTTP/X-Frame-Options
If I understand it right, when you recieve X-Frame-Options: SAMEORIGIN, you are able open this window in IFrame but only on the same page.
OTHER TIPS
Enterting Cross-domain websites is a real security concern.
With that said, there are proxy sites that will allow you to load websites that don't allow cross-domain
so http://www.corsproxy.com/google.com will work anywhere.
Sites like Google and Yahoo have the X-Frame-Options set on SAMEORIGIN, which means unless you're Google or Yahoo, you're not allowed to load the website in an iframe. You can try curl and curl the page you're looking for and display the results or use some sort of proxy.
