Secure your WordPress site with the Content Security Policy (CSP) HTTP Header in Apache

Objective

Content Security Policy (CSP) is a HTTP security header to prevent cross-site scripting, clickjacking, and code injection attack.

CSP instruct browsers to load content only from allowed sources. It helps you to restrict the sources and types of content that may be loaded and processed by visitor browsers.

Solution

Edit your Apache configuration file/etc/apache2/httpd.conf and add the following to your VirtualHost.

Below is a good starter policy for a site. It allows images, scripts, AJAX, and CSS from the same origin, and does not allow any other resources to load (i.e., object, frame, media, etc).

# Load the headers module
LoadModule headers_module modules/mod_headers.so

<VirtualHost *:443>
    # Content-Security-Policy Header
    Header always set Content-Security-Policy "default-src 'self'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self';"

</VirtualHost>

However, you will need to customize this to meet your specific needs. Use the Chrome browser developer tools console to display blocks encountered by your browser. You may also want to disable browser extensions during your testing to avoid issues.

Below is a good starter policy for a WordPress site. It allows images, scripts, AJAX, and CSS from the same origin, and other resources to load only from specifically named sites.

# Load the headers module
LoadModule headers_module modules/mod_headers.so

<VirtualHost *:443>
    # Content-Security-Policy Header
    Header always set Content-Security-Policy "default-src 'self'; img-src 'self' data: http: https: *.gravatar.com *.wp.com *.wordpress.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' http: https: *.wp.com *.wordpress.com; style-src 'self' 'unsafe-inline' http: https: fonts.googleapis.com *.wp.com *.wordpress.com; font-src 'self' data: http: https: fonts.googleapis.com themes.googleusercontent.com *.wp.com *.wordpress.com; frame-src 'self' 'unsafe-inline' 'unsafe-eval' http: https: *.wp.com *.wordpress.com"
</VirtualHost>

Reload Apache

[root@nowherelan]# systemctl reload httpd.service

Go to Geek Flare’s Test Site and test your site . The output will tell you if you have everything correct.

My System Configuration

  • CentOS 7
  • Apache 2.4
  • WordPress version 5.0

References

Secure MIME Types with X-Content-Type-Options in Apache

Objective

Every resource served from a web server is associated with MIME type (also called content-type).

There is a possibility to execute style sheet and steal content from another site through content type doesn’t match.

You may prevent this vulnerability in Internet Explorer or Google Chrome by adding “nosniff” in the header.

Add X-Content-Type-Options header in Apache to reduce MIME types attack risk.

Solution

Edit your Apache configuration file/etc/apache2/httpd.conf and add the following to your VirtualHost.

# Load the headers module
LoadModule headers_module modules/mod_headers.so

<VirtualHost *:443>
    # Secure MIME Types with X-Content-Type-Options
    Header set X-Content-Type-Options nosniff
</VirtualHost>

Reload Apache

[root@nowherelan]# systemctl reload httpd.service

Go to Geek Flare’s Test Site and test your site . The output will tell you if you have everything correct.

My System Configuration

  • CentOS 7
  • Apache 2.4

References

Implement X-FRAME-OPTIONS in HTTP headers to prevent Clickjacking attacks in Apache

Objective

The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame> or <iframe>. Sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites.

Solution

Edit your Apache configuration file/etc/apache2/httpd.conf and add the following to your VirtualHost.

# Load the headers module
LoadModule headers_module modules/mod_headers.so

<VirtualHost *:443>
    # X-Frame-Options to prevent clickjacking attacks
    Header always append X-Frame-Options DENY
</VirtualHost>

Reload Apache

[root@nowherelan]# systemctl reload httpd.service

Go to Geek Flare’s Test Site and test your site . The output will tell you if you have everything correct.

My System Configuration

  • CentOS 7
  • Apache 2.4

References

HTTP Strict Transport Security (HSTS) In Apache

Objective

HTTP Strict Transport Security (HSTS) is a security feature that lets a web site tell browsers that it should only be communicated with using HTTPS, instead of using HTTP. This tutorial describes how to set up HSTS in Apache.

HSTS addresses the following threats:

  • User bookmarks or manually types http://example.com and is subject to a man-in-the-middle attacker
    • HSTS automatically redirects HTTP requests to HTTPS for the target domain
  • Web application that is intended to be purely HTTPS inadvertently contains HTTP links or serves content over HTTP
    • HSTS automatically redirects HTTP requests to HTTPS for the target domain
  • A man-in-the-middle attacker attempts to intercept traffic from a victim user using an invalid certificate and hopes the user will accept the bad certificate
    • HSTS does not allow a user to override the invalid certificate message

Solution

A minimum of Apache version 2.2.22 is needed to support HSTS.
Edit your Apache configuration file/etc/apache2/httpd.confand add the following to your VirtualHost. You have to set it on the HTTPS VirtualHost, and not in the HTTP VirtualHost .

# Load the headers module
LoadModule headers_module modules/mod_headers.so

<VirtualHost *:443>
    # HSTS (31536000 seconds = 1 year)
    Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains"
</VirtualHost>

Once a web browser has been to the site once and received the header it will remember that the site should only be accessed over HTTPS for the duration of the max-age value. This value is reset every time the site is accessed.

To always redirect your visitors to the HTTPS version of your website, use the following configuration:

<VirtualHost *:80>
    ServerName example.com
    Redirect permanent / https://example.com/
</VirtualHost>

Reload Apache

[root@nowherelan]# systemctl reload httpd.service

Go to SSL Labs Test Site and test your site. The output will tell you if you have everything correct.

My System Configuration

  • CentOS 7
  • Apache 2.4

References

Remove the “Proudly powered by WordPress” in WordPress Footer

Objective

To remove the “Proudly Powered by WordPress” link in the footer of a WordPress theme.

Solution

Add this CSS code to your website:

.site-info{display: none;}

  • Log in to your WordPress Dashboard, then go to Appearance -> Customize.
  • Click on Additional CSS.
  • Add the code .site-info{display: none;} in the CSS box to hide the link.
  • Press the Publish button in order for the change to be implemented.

The “Proudly powered by WordPress” link should disappear.

However, a more complete solution is to use a child theme so that your modifications remain persistent across theme updates. Follow the steps in this post for creating a child theme for a WordPress supplied theme.

My System Configuration

  • WordPress 5.0
  • WordPress Twenty Fourteen theme 2.4

References

Expand the Main Content Page on the WordPress Twenty Fourteen Theme

Objective

To expand the width of the main content page when using the WordPress Twenty Fourteen theme.

Solution

In order to expand the main content page, you need to modify the WordPress Twenty Fourteen theme by creating a new child theme. A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme. If do not use a child theme, and you modify a theme directly and it is updated, then your modifications may be lost. By using a child theme you will ensure that your modifications are preserved.

A child theme consists of at least one directory (the child theme directory) and two files (style.css and functions.php), which you will need to create:

  • The child theme directory
  • style.css
  • functions.php

The first step in creating a child theme is to create the child theme directory, which will be placed in wp-content/themes. It is recommended (though not required,) that the name of your child theme directory is appended with ‘-child’. You will also want to make sure that there are no spaces in your child theme directory name, which may result in errors. Forthis exercise, we will call our child theme ‘twentyfourteen-child’, indicating that the parent theme is the Twenty Fourteen theme.

[root@nowherelan www]# cd wp-content/themes/
[root@nowherelan themes]# ls -l
 total 24
 -rw-r--r-- 1 apache apache   28 Jun  5  2014 index.php
 drwxr-xr-x 6 apache apache 4096 Dec 22 04:50 twentyfifteen
 drwxr-xr-x 8 apache apache 4096 Dec 22 04:50 twentyfourteen
 drwxr-xr-x 8 apache apache 4096 Dec 22 04:50 twentynineteen
 drwxr-xr-x 5 apache apache 4096 Dec 22 04:50 twentyseventeen
 drwxr-xr-x 7 apache apache 4096 Dec 22 04:50 twentysixteen
[root@nowherelan themes]# mkdir twentyfourteen-child
[root@nowherelan themes]# chown apache.apache twentyfourteen-child/

The next step is to create your child theme’s stylesheet by copying the style.css file.

[root@nowherelan themes]# cp -p twentyfourteen/style.css twentyfourteen-child/style.css

Modify the style.css stylesheet file so that it begins with the following header:

/*
Theme Name: Twenty Fourteen Child
Theme URI: http://example.com/twenty-fourteen-child/
Description: Twenty Fourteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfourteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fourteen-child
*/

A couple things to note:

  • You will need to replace the example text with the details relevant to your theme.
  • The Template line corresponds to the directory name of the parent theme. The parent theme in our example is the Twenty Fourteen theme, so the Template will be “twentyfourteen”.

Find the section that says:

.page-content {
margin: 0 auto;
max-width: 474px;
}

Change it to:

.page-content {
margin: 0 auto;
max-width: 990px;
}

The final step is to enqueue the parent and child theme stylesheets
in your child theme’s functions.php. You will therefore need to create a functions.php in your child theme directory containing:

<?php
function my_theme_enqueue_styles() {
  $parent_style = 'twentyfourteen-style'; // This is 'twentyfourteen-style' for the Twenty Fourteen theme
  wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

where parent-style is the same $handle used in the parent theme when it registers its stylesheet. For example, if the parent theme is twentyfourteen, by looking in its functions.php for its wp_enqueue_style() call, you can see the tag it uses there is 'twentyfourteen-style'.

Your child theme is now ready for activation. Log in to your site’s administration panel, and go to Administration Panels > Appearance> Themes. You should see your child theme listed and ready for activation.

Note: You may need to re-save your menu (Appearance > Menus, or Appearance > Customize > Menus) and theme options (including background and header images) after activating the child theme.

My System Configuration

  • WordPress version 5.0.2
  • WordPress Twenty Fourteen theme version 2.4

References