woocommerce x-frame-options

Ошибка Refused to display in a frame because it set ‘X-Frame-Options’ to ‘SAMEORIGIN’

Вы можете получить ошибку Refused to display in a frame because it set ‘X-Frame-Options’ to ‘SAMEORIGIN’ например встроив видео из youtube. Это самый простой способ с которым я встретился на своей практике.

Ошибка SAMEORIGIN выводится потому что вы пытаетесь загрузить сайт в iframe, но сайт, который вы пытаетесь загрузить в заголовках указал, что делать этого нельзя.

Как исправить:

В заголовках сайта который вы пытаетесь загрузить необходимо прописать разрешение на загрузку:

В данном примере показано что все запрещено, но разрешено с адреса example.com. Более подробно почитать о таких настройках можно по ссылке.

Как исправить для Youtube

И решить эту проблему можно также легко. На примере youtube это решается следующим способом:

В iframe вы видите строку с урлом видео типа: watch?v=

Именно это watch?v= и нужно заменить. На /embed/ .

После этого видео будет загружаться и не выводить никаких ошибок.

Secure WordPress with X-Frame-Options & HTTPOnly Cookie

Netsparker Web Application Security Scanner – the only solution that delivers automatic verification of vulnerabilities with Proof-Based Scanning™.

by Chandan Kumar | February 16, 2018 | Security, WordPress

Protect WordPress website from XSS, Clickjacking Attacks

Securing your site is essential for your online business presence. Over the weekend, I did a security scan on my WordPress website through Acunetix and Netsparker and found following vulnerabilities.

  • Missing X-Frame-Options Header
  • Cookie Not Marked as HttpOnly
  • Cookie without Secure flag set

If you are on dedicated or VPS hosting, then you can directly inject these headers in Apache or Nginx to mitigate it. However, to do this directly in WordPress – you can do the following.

Are you wondering why to fix them? Well, here is a quick explanation of the solution.

A quick note on implementation verification: You can either use HTTP Header Checker online tool or F12 on your web browser to verify the response headers.

Implement X-Frame-Options Header in WordPress

Having this injected in Header will prevent Clickjacking attacks. Below was discovered by Netsparker.

Solution

  • Go to the path where WordPress is installed. If you are on shared hosting, you can log into cPanel >> File Manager
  • Take a backup of wp-config.php
  • Edit the file and add the following line
  • Save and refresh your website to verify.

Implement Cookie with HTTPOnly and Secure flag in WordPress

Having Cookie with HTTPOnly instructs the browser to trust the cookie only by the server, which adds a layer of protection against XSS attacks.

Secure flag in cookie instructs browser that cookie is accessible over secure SSL channels, which add a layer of protection for session cookie.

Note: This would work on HTTPS website. If you are still on HTTP, then you may consider switching to HTTPS for better security.

Solution: –

  • Take a backup of wp-config.php
  • Edit the file and add the following line

Save the file and refresh your website to verify.

If you don’t like to hack the code then alternatively, you can use Shield plugin which will help you to block iFrames & and protect from XSS attacks.

Once you install the plugin, go to HTTP headers and enable them.

I hope above helps you in mitigating WordPress vulnerabilities.

If you can looking for continuous WordPress security, then SUCURI will be very helpful.

Blank Page – X-FRAME-OPTIONS

One common cause of seeing a blank page when using external pages in your app is a common security settings called X-FRAME-OPTIONS. If this option is set to SAMEORIGIN, your content will be blocked by the browser.

The AppPresser plugin (v3.5.0) now has an option to add a Access-Control-Allow-Origin to your website. By default it adds "Access-Control-Allow-Origin: myapppresser.com" so you can always see your WordPress pages in the myapppresser.com customizer. If you need a more open setting you can to to your wp-admin area to the AppPresser settings, there you will find an option to "Enable CORS." The allows content from any location to appear in your app by adding "Access-Control-Allow-Origin: *" to your website.

Remove this setting

If you need to disable this option completely, add the following to a new file that you place into the mu-plugins folder. Create that folder if it doesn’t already exist.

Why are X-FRAME-OPTIONS Used?

Many site owners do not want other websites to display their content in an iframe. So by adding X-FRAME-OPTIONS: SAMEORIGIN to your page or entire website, browsers will not display your page inside of an iframe. This security feature is used on Woocommerce’s checkout and account pages to protect the content on those pages.

Is My Site Using X-FRAME-OPTIONS: SAMEORIGIN?

You can check if your site is adding this setting by using Chrome’s Developer Tools:

  1. Open the Developer Tools
  2. View the Network tab
  3. Reload your page
  4. Click the loaded page
  5. Read the x-frame-options.

If you do not see x-frame-options in the list, then you do not have this option. Your white page will be caused by another issue. Most likely you can find a JavaScript error in the Developer Tool console.

How is X-FRAME-OPTIONS: SAMEOPTIONS Added?

Knowing how this setting gets added will help you to adjust or remove this setting as needed. There are a few different ways this can be added to a page, site or your server. If using PHP directly, it gets added using this code:

WordPress adds this to your header using a hook. If you are familiar with hooks, you’ll know that using add_action() will add certain functions to your site, but using remove_action() will remove certain functions to your site. WordPress uses this ‘send_frame_options_header’ hook for the login page and Woocommerce uses the ‘wc_send_frame_options_header’ hook for their checkout page.

If your web server is using Apache, you can added this setting in the .htaccess file:

How to remove it?

As long as you understand the security reason it’s added, removing it can be done using a remove_action hook or modifying an .htaccess file.

Using this hook is how you can get the Woocommerce checkout and account pages to display in the app. You might have other plugins adding the x-frame-options in a very similar fashion; so removing it will be very similar to this remove_action.

Leave a Reply

Your email address will not be published. Required fields are marked *