How to Troubleshoot Website Embedding Restrictions: A Guide to Resolving X-Frame-Options Blocking

How to Troubleshoot Website Embedding Restrictions: A Guide to Resolving X-Frame-Options Blocking

**Description:**This article explains how to identify and resolve website embedding issues caused by the X-Frame-Options HTTP header, which often blocks your site from being loaded within an iframe. It’s especially useful for shared hosting customers wanting to embed their own content (e.g., ThemeForest previews, demos) or allow others to do so.

What is X-Frame-Options?

The X-Frame-Options HTTP response header controls whether your website can be embedded in an iframe on another site. If set to DENY or SAMEORIGIN, browsers will block your pages from being loaded in iframes on other domains, resulting in errors like:

• "Refused to display in a frame because it set 'X-Frame-Options' to 'DENY' or 'SAMEORIGIN'."
• Preview windows not working on ThemeForest or similar platforms

Diagnosing the Problem

Step 1: Check for X-Frame-Options Header

1. Browser Developer Tools
   • Open your website in Google Chrome.
   • Press F12 to open Developer Tools.
   • Go to the Network tab, refresh the page, and click on the main request.
   • Look under the Headers section for X-Frame-Options.
2. Online Tools
   • Use services like SecurityHeaders.com or websniffer.cc to inspect your site’s HTTP headers.

If you see X-Frame-Options: DENY or X-Frame-Options: SAMEORIGIN, embedding is restricted.

Resolving X-Frame-Options Blocking

Solution 1: Remove or Modify the Header via .htaccess

Most shared hosting customers can control headers using the .htaccess file in your website’s root directory.

1. Access .htaccess
   • Log in to cPanel.
   • Open File Manager and locate the .htaccess file (enable “Show Hidden Files” if needed).
2. Edit .htaccess
   • Right-click .htaccess and select Edit.
3. Remove or Update the X-Frame-Options Header

   • Look for a line like:

     Header set X-Frame-Options "SAMEORIGIN"
     

     or

     Header set X-Frame-Options "DENY"
     

   • To allow embedding from any site, remove this line or comment it out:

     # Header set X-Frame-Options "SAMEORIGIN"
     

   • Or, to allow embedding from specific domains (e.g., ThemeForest), use the Content-Security-Policy header instead:

     Header set Content-Security-Policy "frame-ancestors 'self' https://themeforest.net"
     

     > Note: The ALLOW-FROM value for X-Frame-Options is not widely supported—use Content-Security-Policy where possible.

4. Save Changes and clear your browser cache.

Solution 2: Check for Header Set by CMS or Plugins

Some CMS platforms (like WordPress) or security plugins may add these headers automatically.

• Temporarily disable security plugins and test again.
• Review plugin settings for “X-Frame-Options” or “Clickjacking Protection” and adjust as needed.

Solution 3: Contact Support

If you cannot find or modify the header, or your changes don’t take effect, your host may be sending the header at the server level. In this case:

• Open a support ticket with us, mention your domain and your need to allow iframe embedding, and provide details of where embedding is needed.

Troubleshooting

The Header Keeps Reappearing

• Check for multiple .htaccess files (in subfolders).
• Clear your browser and CDN cache (if using Cloudflare or similar).
• Disable any web application firewall (WAF) features that may apply security headers.

Embedding Still Fails on Some Platforms

• Use Content-Security-Policy (CSP) frame-ancestors for better compatibility.

• Example to allow embedding on ThemeForest and your own domain:

  Header set Content-Security-Policy "frame-ancestors 'self' https://themeforest.net"
  

Practical Example: Allow Embedding Only from ThemeForest

To allow only themeforest.net to embed your site:

Header always unset X-Frame-Options
Header set Content-Security-Policy "frame-ancestors 'self' https://themeforest.net"

Place the above in your .htaccess file. Save and test using browser tools or SecurityHeaders.com.

Summary

• Identify if X-Frame-Options is blocking iframe embedding.
• Edit .htaccess to remove or modify the header.
• Use Content-Security-Policy for more precise control.
• Test your changes using browser dev tools or online header checkers.
• Contact support if you cannot change the header yourself.

For further assistance, please submit a support ticket with details of your embedding requirements and affected domain.

Still need help?Submit a support ticket and our team will guide you through resolving embedding issues.