How to fix the 'iframe refused to connect' error?

As easy as web development has become recently thanks to frameworks and SDKs and programming languages becoming more powerful, it can still be a complicated thing when dealing with all sorts of different bugs and errors.

In this article, we’re talking about the “iframe refused to connect” error, its causes and what you can do to fix the problem.

What causes this error?

The error is mainly triggered when the URL you provided to the iframe isn’t initialising or has an issue that doesn’t let it load. Other common causes include:

Internet connectivity issues.
iframe code isn’t written properly.
iframe element isn’t parsing URL headers correctly.

Also read: How to fix unable to play video error 150 on YouTube?

How to fix this?

Here are four fixes you can try out.

Check internet connection

This is a good time to check whether or not you have an active internet connection. If you’re on WiFi, make sure you’ve got an active link and that there are no signal issues. On cellular data, ensure that it’s enabled and that you’re getting good network coverage. Restarting your router can help get rid of a bunch of seemingly random internet and connectivity issues that may be hindering your connection to the URL.

Check the embed URL

Some sites feature a different URL for embedding and a different URL for sharing content. Check to make sure you’re using the right URL, and that there aren’t any typos or missing characters as that can change the URL’s destination and cause errors.

Also read: How to fix error: read econnreset?

Check URL headers

Another thing that you should check is that the headers sent by your source URL are being properly read by the iframe element. Make sure to read the documentation to include any relevant headers that you might need for the URL to display. In case you’re experiencing a security-related issue, enable the content-security-policy: frame-ancestors ‘self’ flag to see if that resolves the problem.

Check the X-Frame-Options

Similar to checking the URL headers being sent by your source URL, check to make sure any relevant X-frame-options headers being sent by the source URL are being read properly by the iframe element. You can set these up as follows.

For IIS configurations:

<httpProtocol>
  <customHeaders>
      <add name="X-Frame-Options" value="sameorigin"/>
  </customHeaders>
</httpProtocol>

For Apache configurations:

Header always set X-Frame-Options "sameorigin"

Also read: Error loading preloads: Could not find renderer: 4 Fixes

How to fix ‘iframe refused to connect’ error?

What causes this error?