Skip to content

Latest commit

 

History

History
157 lines (118 loc) · 4.8 KB

001.md

File metadata and controls

157 lines (118 loc) · 4.8 KB
Raw

Meetup 001 – 08.05.2018

Hosted by: moz://a Community Space Berlin

How To Proxy Requests To External Assets

Every request your site (i.e. its visitor) would make to an external source can be proxied. While you're losing the benefit of the CDN, you don't have to host the resource yourself and gain greater control over the request to the external resource.

One popular scenario is proxying the google analytics.js in order to leverage browser caching: https://www.johnvincent.io/nginx-proxy-google-analytics/; another is to server non-https content from an external source to your visitors via https: https://www.gservon.de/apache-reverse-proxy-http-https/.

In this example we have been using Google Fonts:

Example Apache Config

# Load required modules
LoadModule proxy_module /usr/libexec/apache2/mod_proxy.so
LoadModule proxy_http_module /usr/libexec/apache2/mod_proxy_http.so
LoadModule ssl_module /usr/libexec/apache2/mod_ssl.so

# default vhost 
<VirtualHost *:80>
  ServerName example.com
  DocumentRoot "/var/www/docroot"
  <Directory "/var/www/docroot">
    DirectoryIndex index.html
    AllowOverride all
    Order allow,deny
    Allow from all
  </Directory>
</VirtualHost>

# fonts subdomain, proxy to e.g. fonts.gstatic.com
<VirtualHost *:80>
  ServerName fonts.example.com
  ProxyRequests On
  SSLProxyEngine On
  ProxyPass /s/ https://fonts.gstatic.com/s/
  ProxyPassReverse /s/ https://fonts.gstatic.com/s/
</VirtualHost>

Example Nginx Config

More complete nginx config for Google domains

# default vhost
server {
  listen 80;
  server_name example.com;
  index index.html;

  location / {
    root /var/www/docroot;
  }
}

# fonts subdomain, proxy to e.g. fonts.gstatic.com
server {
  listen 80;
  server_name fonts.example.com;

  location / {
      proxy_pass https://fonts.gstatic.com/;
      proxy_set_header Host fonts.gstatic.com;
      
      # additional caching example 
      expires 31536000s;
      proxy_set_header Pragma "public";
      proxy_set_header Cache-Control "max-age=31536000, public";
  }
}

Content Security Policy (CSP)

CSP is best described as an HTTP header that tells the browser which resources are allowed to be loaded. By default, all scripts on a website are allowed to send and fetch data from and to any site they want which can be a security issue. Having a proper CSP can help to mitigate this issue.

Further reading: I’m harvesting credit card numbers and passwords from your site. Here’s how.

HTTP CSP header

Basic header:

Content-Security-Policy

Deprecated header:

X-Content-Security-Policy

Alternative:

<meta http-equiv="Content-Security-Policy" content="default-src 'self';">

Head request

Get the returned headers from a GET request via the CURL command. The head request is issued with -I (capital i) or --head:

curl -I https://tech.wpmeetup-berlin.de
curl --head https://tech.wpmeetup-berlin.de
  • Insomnia, HTTP client for Mac, Windows, and Linux

Basic CSP header

Content-Security-Policy: default-src 'self';

Browser support

CSP and WordPress

Set custom headers in WordPress via the wp_headers filter defined in class-wp.php

/**
 * Filters the HTTP headers before they're sent to the browser.
 *
 * @since 2.8.0
 *
 * @param string[] $headers Associative array of headers to be sent.
 * @param WP       $this    Current WordPress environment instance.
 */
$headers = apply_filters( 'wp_headers', $headers, $this );

Packages

Tools