0

I cant render the google or any another page in my site using iframe. show the error Refused to display 'https://www.google.co.in/ in a frame because it set 'X-Frame-Options' to 'sameorigin'.

  • 1
    What are you trying to achieve by adding google in an iframe? – EarthDragon Sep 14 '17 at 07:25
  • Are you trying to get integrated google search like [this](https://stackoverflow.com/questions/275153/how-can-i-add-an-integrated-google-search-to-my-website)? – EarthDragon Sep 14 '17 at 07:38
  • Sorry, for an example i have used a google to adding in iframe, but i need my project to adding another one project . From that project , i m getting that error – Premcoumar Djeabalane Sep 14 '17 at 10:03
  • This error means that the website you are trying to add doesn't allow you to show it inside an iframe. If you have control over the other project maybe you can just tell it to drop that `sameorigin` header – EarthDragon Sep 14 '17 at 10:39
  • Thanks for the reply and Please help me where i need to drop the sameorigin. – Premcoumar Djeabalane Sep 18 '17 at 10:09
  • What is the language you are using? Is this a project in VS? – EarthDragon Sep 19 '17 at 07:19
  • [This post](https://stackoverflow.com/questions/28647136/how-to-disable-x-frame-options-response-header-in-spring-security) might be relevant – EarthDragon Sep 19 '17 at 08:42

1 Answers1

1

You can use this solution:

<html>
<head>

</head>
<body>
<iframe src="http://google.co.in" width="800" height="500"></iframe>

<script>
var iframe = document.getElementsByTagName('iframe')[0];
var url = iframe.src;
var getData = function (data) {
    if (data && data.query && data.query.results && data.query.results.resources && data.query.results.resources.content && data.query.results.resources.status == 200) loadHTML(data.query.results.resources.content);
    else if (data && data.error && data.error.description) loadHTML(data.error.description);
    else loadHTML('Error: Cannot load ' + url);
};
var loadURL = function (src) {
    url = src;
    var script = document.createElement('script');
    script.src = 'http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20data.headers%20where%20url%3D%22' + encodeURIComponent(url) + '%22&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=getData';
    document.body.appendChild(script);
};
var loadHTML = function (html) {
    iframe.src = 'about:blank';
    iframe.contentWindow.document.open();
    iframe.contentWindow.document.write(html.replace(/<head>/i, '<head><base href="' + url + '"><scr' + 'ipt>document.addEventListener("click", function(e) { if(e.target && e.target.nodeName == "A") { e.preventDefault(); parent.loadURL(e.target.href); } });</scr' + 'ipt>'));
    iframe.contentWindow.document.close();
}

loadURL(iframe.src);
</script>
</body>
</html>

Source: http://jsfiddle.net/2gou4yen/