Erik Schwartz

I needed to experiment with 301 redirect behavior for a site under SSL.

The constraints

make sure redirects from https://mydomain.com aren’t spoiled by certificate errors because the certificate covers www.mydomain.com but not mydomain.com
Here’s the post that describes this problem and how to avoid it. But it’s 5 years old so I wanted to test it all out.
Use the Pantheon PaaS
Use letsencrypt to generate throw-away certificates for free

Generate a certificate

Given that I’m using a PaaS, I can’t install the lets encrypt certbot to automatically manage certificates the way others would. For my use case I just want to generate temporary certificates to test out the 301 behavior (in the long-term I’ll get a certificate from a provider with longer validity). So for now I’m ok using lets encrypt to create the cert manually.

To manually generate certificates with lets encrypt, I need a public web server that my domain resolves to so I point a throwaway domain “notabigdeal.club” at a DigitalOcean droplet ($.88 on namecheap for the domain!).

The DNS is set up like so on Namecheap:


URL redirect record	@	http://www.notabigdeal.club	Unmasked

ssh to the droplet and then:

openssl req -new -newkey rsa:2048 -nodes -out notabigdeal_club.csr -keyout notabigdeal_club.key -subj '/C=US/ST=Kentucky/L=Lexington/O=test/CN=notabigdeal.club'

certbot-auto certonly --authenticator manual --server https://acme-v01.api.letsencrypt.org/directory --text --email erik@erikschwartz.net --csr www_notabigdeal_club.csr

# Things that pantheon wants:

# The cert
cat 0000_cert.pem

# Intermediate cert
cat 0000_chain.pem

# The private key
cat www_notabigdeal_club.key

The 301 behavior

As expected, visiting ‘https://notabigdeal.club’ throws an error since the certificate is only for ‘www’

Lets try again with a Sans certificate that covers both domains

Namecheap DNS settings

record type
CNAME Record	www	my-site.pantheonsite.io.	30 min
A Record	@	104.130.89.68	30 min

Is generating a SAN CSR a pain?

According to the openssl CSR tool “Adding Subject Alternative Names to a CSR using OpenSSL is a complicated task. Our advice is to skip the hassle, use your most important server name as the Common Name, and specify the other names during the order process. Our Multi-Domain (SAN) Certificate ordering process will let you specify all the names you need without making you include them in the CSR.”

It’s not so bad to generate a SAN CSR with a good example in hand.

On the digital ocean droplet that hosts notabigdeal.club, create openssl.conf

[ req ]
default_bits        = 2048
default_keyfile     = privkey.pem
distinguished_name  = req_distinguished_name
req_extensions     = req_ext # The extentions to add to the self signed cert

[ req_distinguished_name ]
countryName           = Country Name (2 letter code)
countryName_default   = US
stateOrProvinceName   = State or Province Name (full name)
stateOrProvinceName_default = Iowa
localityName          = Locality Name (eg, city)
localityName_default  = Iowa City
organizationName          = Organization Name (eg, company)
organizationName_default  = The University of Iowa
commonName            = Common Name (eg, YOUR name)
commonName_max        = 64

[ req_ext ]
subjectAltName          = @alt_names

[alt_names]
DNS.1 = notabigdeal.club
DNS.2 = www.notabigdeal.club

Generate the CSR and the certificate:

# make sure to answer "Common Name (eg, YOUR name) []:" as notabigdeal.club
openssl req -new -newkey rsa:2048 -nodes -out notabigdeal_club.csr -keyout notabigdeal_club.key -config openssl.conf

Follow the instructions to add the files to .well-known/acme-challenge for each domain.

If it works, certbot will congratulate you and you can copy over the cert details to pantheon:

# The cert
cat 0000_cert.pem

# Intermediate cert
cat 0000_chain.pem

# The private key
cat notabigdeal_club.key

Pantheon-specific note

I had to enable both domains in Pantheon: www.notabigdeal.club and notabigdeal.club. Otherwise it gave a Pantheon boilerplate “Site not found” page.

When using Google Analytics (GA) directly, you can send custom events to GA in javascript like so:

ga('send', {
   'hitType': 'event',
   'eventCategory': 'Feedback',
   'eventAction': 'event action',
   'eventLabel': $(‘#feedback-text’).val(),
   'eventValue': 1
});

However, with Google Tag Manager (GTM), you don’t have the ga javascript object. Instead you can:

push variables to the GTM dataLayer object
create a tag in GTM that sends the variables along to GA

Here are the steps:

Replace your call to “ga(‘send’”

Let’s say you use the ga javascript object to send an event to GA on a form submission:

$('#feedback-form').submit(function(e) {
    ga('send', {
        'hitType': 'event',
        'eventCategory': 'Feedback',
        'eventAction': 'event action',
        'eventLabel': $(‘#feedback-text’).val(),
        'eventValue': 1
    });
    ...
});

With GTM, you’ll do this instead:

$('#feedback-form').submit(function(e) {
    dataLayer.push({
        'hitType': 'event',
        'eventCategory': 'Feedback',
        'eventAction': 'General',
        'eventLabel': $('#feedback-text').val(),
        'eventValue': 1
    });
    ...
});

Next you’ll configure a GTM tag to fire. In this tag you’ll pick up the values from the dataLayer and give them to GA.

In GTM: Map GTM variables to dataLayer variables

Variables > User Defined Variables > New > Data Layer Variable

> Configure Variable > Data Layer Variable Name: eventLabel (this is the variable name used in the javascript call to dataLayer.push)

I like to name the GTM variable as dataLayer.[variableName], in this case dataLayer.eventLabel.

In GTM: Create a tag to send the dataLayer variable(s) to GA

Tags > New > Google Analytics > Universal Analytics

Tracking Id: UA-1242343-12 (i.e. your tracking id)
Track Type: Event
Event Tracking Parameters
- Here you can use the GTM dataLayer variables you mapped earlier. In this example, I hard-code every value except for dataLayer.eventLabel
Create The trigger
- Fire On: Form > Form Submission > Some Forms > "Form Id” equals “feedback-form"

Test that the variable is sent to Google Analytics

Save the tag and trigger and click the GTM Preview and Debug (each time you make changes to GTM).

In a new tab, visit the site with the feedback form. You should see the GTM debugging pane at the bottom of the page. It should fire our newly created tag when the form is submitted.

Submit the feedback form.

In Google Analytics Reporting > Real-time > Events

You should see an entry for the just-submitted event. Click into it and you will see the eventLabel detail.

To use SSL throughout the Pantheon dev workflow

When using the dev-my-site.pantheon.io domain (or test or live), put this bad boy at the top of your settings. It will redirect HTTP to HTTPS.

/sites/default/settings.php
<?php

// Require HTTPS on pantheon
if (isset($_SERVER['PANTHEON_ENVIRONMENT']) &&
  $_SERVER['HTTPS'] === 'OFF') {
  if (!isset($_SERVER['HTTP_X_SSL']) ||
    (isset($_SERVER['HTTP_X_SSL']) && $_SERVER['HTTP_X_SSL'] != 'ON')) {
    header('HTTP/1.0 301 Moved Permanently');
    header('Location: https://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']);
    exit();
  }
}

...

Also see the related pantheon docs.

Erik Schwartz

Explorer, weirdo, developer of wonderful things.

Stay curious.