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

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/

htmlgoogle-chromeiframe


Solution 1:[1]

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.

Solution 2:[2]

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'.

Solution 3:[3]

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');
  }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Dale
Solution 3 Jakub Kurdziel

Related Questions