{"id":2106,"date":"2021-06-10T16:13:36","date_gmt":"2021-06-10T13:13:36","guid":{"rendered":"https:\/\/www.scalahosting.com\/kb\/?p=2106"},"modified":"2025-11-27T11:35:34","modified_gmt":"2025-11-27T09:35:34","slug":"how-to-configure-frames-with-x-frame-options-header","status":"publish","type":"post","link":"https:\/\/www.scalahosting.com\/kb\/how-to-configure-frames-with-x-frame-options-header\/","title":{"rendered":"X-Frame-Options Header Setup Guide"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><b>The X-Frame-Options header is an HTTP response <\/b><span style=\"font-weight: 400;\">header indicating if a browser can use particular instructions such as \u201c<\/span><i><span style=\"font-weight: 400;\">frame,\u201d \u201ciframe,\u201d and \u201cembed.\u201d<\/span><\/i><span style=\"font-weight: 400;\"> This header is essential to prevent clickjacking attacks.<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400;\">By controlling permissible instructions, website owners can prevent content from being embedded on other sites. However, the instruction only works on web browsers that recognize and <\/span><b>support X-Frame-Options.<\/b><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400;\">Most popular web browsers today support <\/span><b>the X-Frame-Options header.<\/b><span style=\"font-weight: 400;\"> They include:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Google Chrome<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Mozilla Firefox<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Internet Explorer<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Microsoft Edge<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Safari<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Opera.<\/span><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">When to Configure the X-Frame-Options Header<\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400;\">On occasion, some frame content may not load in some browsers. This failure to load will result in an (<\/span><i><span style=\"font-weight: 400;\">often)<\/span><\/i><span style=\"font-weight: 400;\"> glaringly blank space on the web page. If this situation occurs, you may need to configure the <\/span><b>X-Frame-Options header<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400;\">You can also check for this error by loading the developer console or developer tools in your browser. The console should highlight X-Frame-Options header errors with messages such as \u201c<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400;\">Refused to display <\/span><b>&#8216;https:\/\/thewebsite.com\/&#8217; <\/b><span style=\"font-weight: 400;\">in a frame because it set &#8216;<\/span><b>X-Frame-Options&#8217; to &#8216;sameorigin.\u2019<\/b><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">How to Configure the X-Frame-Options Header<\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400;\">Most hosting accounts will set the default X-Frame-Options header as \u201csameorigin.\u201d This setting should work fine if that is your intention. If you want to share content on various websites, then the<\/span><b> X-Frame-Options header must be disabled.&nbsp;<\/b><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400;\">To disable the header:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><b>Step 1.<\/b><span style=\"font-weight: 400;\"> Log into the <\/span><a href=\"https:\/\/www.scalahosting.com\/spanel.html\"><b>SPanel<\/b><\/a><span style=\"font-weight: 400;\"> account for your website.<\/span><span style=\"font-weight: 400;\"><\/span><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"453\" height=\"456\" src=\"https:\/\/www.scalahosting.com\/kb\/wp-content\/uploads\/2022\/01\/40.png\" alt=\"X-Frame-Options Header Setup Guide, How to Configure the X-Frame-Options Header\" class=\"wp-image-2898\" srcset=\"https:\/\/www.scalahosting.com\/kb\/wp-content\/uploads\/2022\/01\/40.png 453w, https:\/\/www.scalahosting.com\/kb\/wp-content\/uploads\/2022\/01\/40-298x300.png 298w, https:\/\/www.scalahosting.com\/kb\/wp-content\/uploads\/2022\/01\/40-150x150.png 150w\" sizes=\"(max-width: 361px) 660px, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 910px, 1140px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li><b>Step 2. <\/b><span style=\"font-weight: 400;\">Click on \u201cFile Manager\u201d in the \u201cFiles\u201d section, then navigate to your public_html directory.<\/span><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"853\" height=\"237\" src=\"https:\/\/www.scalahosting.com\/kb\/wp-content\/uploads\/2021\/06\/349.png\" alt=\"X-Frame-Options Header Setup Guide, How to Configure the X-Frame-Options Header 2\" class=\"wp-image-4030\" srcset=\"https:\/\/www.scalahosting.com\/kb\/wp-content\/uploads\/2021\/06\/349.png 853w, https:\/\/www.scalahosting.com\/kb\/wp-content\/uploads\/2021\/06\/349-300x83.png 300w, https:\/\/www.scalahosting.com\/kb\/wp-content\/uploads\/2021\/06\/349-768x213.png 768w\" sizes=\"(max-width: 361px) 660px, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 910px, 1140px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li><b>Step 3.<\/b><span style=\"font-weight: 400;\"> Click the \u201c.htaccess\u201d file and select \u201cEdit\u201d to open it.<\/span><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"805\" height=\"461\" src=\"https:\/\/www.scalahosting.com\/kb\/wp-content\/uploads\/2021\/06\/350.png\" alt=\"X-Frame-Options Header Setup Guide, How to Configure the X-Frame-Options Header 3\" class=\"wp-image-4031\" srcset=\"https:\/\/www.scalahosting.com\/kb\/wp-content\/uploads\/2021\/06\/350.png 805w, https:\/\/www.scalahosting.com\/kb\/wp-content\/uploads\/2021\/06\/350-300x172.png 300w, https:\/\/www.scalahosting.com\/kb\/wp-content\/uploads\/2021\/06\/350-768x440.png 768w\" sizes=\"(max-width: 361px) 660px, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 910px, 1140px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li><b>Step 4.<\/b><span style=\"font-weight: 400;\"> Add the following instruction to the .htaccess file, then save the file when exiting.<\/span><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><em><strong># X-Frame-Options<\/strong><\/em><br><em><strong>&lt;IfModule mod_headers.c&gt;<\/strong><\/em><br><em><strong>Header set X-Frame-Options &#8220;SAMEORIGIN&#8221;<\/strong><\/em><br><em><strong>&lt;\/IfModule&gt;<\/strong><\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">Understanding Clickjacking<\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400;\">While frames are helpful to <\/span><a href=\"https:\/\/www.scalahosting.com\/blog\/optimize-web-site\/\"><b>optimize performance<\/b><\/a><span style=\"font-weight: 400;\"> in content display, they can also be made use of by attackers. These <\/span><b>attacks make use of frames to make them click on specific elements like buttons or links.<\/b><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400;\">The <\/span><b>term \u201cclickjacking\u201d<\/b><span style=\"font-weight: 400;\"> originates from this &#8211; the hijack of what should be regular content of a website and diverting visitor actions elsewhere. <\/span><b>Clickjacking is bad for site owners and visitors.<\/b><span style=\"font-weight: 400;\"> The former loses potential clicks and may suffer reputational damage.&nbsp;<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400;\">Consequences for site visitors can range from mild (<\/span><i><span style=\"font-weight: 400;\">annoyance at diversion<\/span><\/i><span style=\"font-weight: 400;\">) to severe <\/span><i><span style=\"font-weight: 400;\">(diversion towards harmful content such as malware).<\/span><\/i><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The X-Frame-Options header is an HTTP response header indicating if a browser can use particular instructions such as \u201cframe,\u201d \u201ciframe,\u201d and \u201cembed.\u201d This header is essential to prevent clickjacking attacks. By controlling permissible instructions, website owners can prevent content from being embedded on other sites. However, the instruction only works on web browsers that recognize [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"none","_seopress_titles_title":"X-Frame-Options Header Setup Guide | ScalaHosting KB","_seopress_titles_desc":"","_seopress_robots_index":"","_seopress_analysis_target_kw":"","footnotes":""},"categories":[40],"tags":[],"class_list":["post-2106","post","type-post","status-publish","format-standard","hentry","category-security"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.scalahosting.com\/kb\/wp-json\/wp\/v2\/posts\/2106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.scalahosting.com\/kb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.scalahosting.com\/kb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.scalahosting.com\/kb\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.scalahosting.com\/kb\/wp-json\/wp\/v2\/comments?post=2106"}],"version-history":[{"count":7,"href":"https:\/\/www.scalahosting.com\/kb\/wp-json\/wp\/v2\/posts\/2106\/revisions"}],"predecessor-version":[{"id":5831,"href":"https:\/\/www.scalahosting.com\/kb\/wp-json\/wp\/v2\/posts\/2106\/revisions\/5831"}],"wp:attachment":[{"href":"https:\/\/www.scalahosting.com\/kb\/wp-json\/wp\/v2\/media?parent=2106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.scalahosting.com\/kb\/wp-json\/wp\/v2\/categories?post=2106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.scalahosting.com\/kb\/wp-json\/wp\/v2\/tags?post=2106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}