Iframe "(Site Name) Refused to Connect." Error

Question

EN : The content of the iframe element I use in my project is "(site name) refused to connect." I get the error how can I fix this error?

TR : Projemde kullandığım iframe öğesinin içeriği "(site adı) bağlanmayı reddetti." Hatası alıyorum, bu hatayı nasıl düzeltebilirim?

<iframe src="https://www.google.com/" frameborder="0"></iframe>

https://jsfiddle.net/fatihege/2he1nuyf/

Sites can block themselves from being framed. Nothing you can do about it. change it to https://www.example.com and it will load. — epascarello, Jul 06 '20 at 15:31

score 5 · Answer 1 · answered Mar 30 '21 at 18:57

5

I've been trying to get around this for months, and finally found a very easy solution that I haven't seen anyone mention. If you're trying to use an iframe to include a website that won't let you, create your own php file, I named mine iframe.php. In that file, put this:

<!DOCTYPE html><html><?php echo file_get_contents($_REQUEST['url']); ?></html>

Then, in your iframe, use the src url 'iframe.php?url=http://www.website.com'.

answered Mar 30 '21 at 18:57

Dale

51
1
2

This is the correct answer. Put this file anywhere on the net (where php is available), and you'll be able to query any site in iframes from anywhere (e.g. in a Jekyll reveal presentation). Tested with hackoverflow. Thanks! – Alex Dec 07 '21 at 09:35
https://stackoverflow.com/a/16625076/10630142 answered in 2013, still seem to work – 53c Jan 18 '22 at 19:50

scoochy · Accepted Answer · 2022-02-03T01:31:18.353

It's not your code as sites can block themselves from being framed.

This is because of a certain header set (X-Frame-Options) as per the mozilla docs: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <iframe src="https://www.google.com/" frameborder="0"></iframe>
</body>
</html>

But with another domain (example.com):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <iframe src="https://www.example.com/" frameborder="0"></iframe>
</body>
</html>

In cases where you aren't allowed to view the site, you can rely on the server side for this. Basically the concept is the server will fetch the file and append it at the given location.

As pointed out by @Dale's answer, this can be done with php. For those using other server side languages, basically the same principle is applied. An implementation of this in node will be something like:

const express = require('express');
const fs = require('fs');
const { execSync } = require('child_process');
const app = new express();
const PORT = 3000;

const fetchWebsite = (url) => {
  execSync(`wget -q -O - ${url} > site.html`,
    (error, stdout, stderr) => {
      if (error !== null) {
        return false;
      }
  });
}

app.get('/', async (req, res) => {
  fs.writeFileSync('site.html', '', () => console.log('Created site.html'));
  fs.createReadStream('site.html').pipe(res);
  fetchWebsite('https://www.stackoverflow.com');
});

app.listen(PORT, () => {console.log("Listening at port: ", PORT)} )

Of course this assumes you're using a standard Linux server and you've installed the express module.

score 0 · Answer 3 · edited Apr 17 '22 at 20:48

this might help a little if you need to write the above @scoochy's expressjs code in nestjs

import { Controller, Get, Response } from '@nestjs/common';

import { execSync } from 'child_process';
import { createReadStream, writeFileSync } from 'fs';

@Controller('iframe')
export class IFrameController {
  fetchWebsite = (url) => {
    execSync(`wget -q -O - ${url} > site.html`);
  };

  @Get()
  getFile(@Response() res) {
    writeFileSync('site.html', '');
    createReadStream('site.html').pipe(res);
    this.fetchWebsite('https://www.stackoverflow.com');
  }
}

Iframe "(Site Name) Refused to Connect." Error

3 Answers3