7

I had trouble getting AWS CloudFront to work with SquareSpace. Issues with forms not submitting and the site saying website expired. What are the settings that are needed to get CloudFront working with a Squarespace site?

Joel Duckworth
  • 5,455
  • 3
  • 20
  • 21
  • It seems like SquareSpace has a CDN already (at least for images/assets). Why are you wanting to put another one in front of it? – Joshua DeWald Apr 07 '16 at 15:50
  • Mainly to use the SSL from AWS and redirect paths to different orgins e.g. https://example.com/ > squarespace https://example.com/othersystem > something hosted elsewhere – Joel Duckworth Apr 13 '16 at 03:01

2 Answers2

17

This is definitely doable, considering I just set this up. Let me share the settings I used on Cloudfront, Squarespace, and Route53 to make it work. If you want to use a different DNS provide than AWS Route53, you should be able to adapt these settings. Keep in mind that this is not an e-commerce site, but a standard site with a blog, static pages, and forms. You can likely adapt these instructions for other issues as/if they come up.

Cloudfront (CDN)

To make this work, you need to create a Cloudfront Distribution for Web.

Origin Settings

  • Origin Domain Name should be set to ext-cust.squarespace.com. This is Squarespace's entry point for external domain names.
  • Origin Path can be left blank.
  • Origin ID is just the unique ID for this distribution and should auto-populate if you're on the distribution creation screen, or be fixed if you're editing Origin Settings later.
  • Origin Custom Headers do not need to be set.

Default Cache Behavior Settings / Behaviors

  • Path Patterns should be left at Default.
  • I have Viewer Protocol Policy set to Redirect HTTP to HTTPS. This dictates whether your site can use one or both of HTTP or HTTPS. I prefer to have all traffic routed securely, so I redirect all HTTP traffic to HTTPS. Note that you cannot do the reverse and redirect HTTPS to HTTP, as this will cause authentication issues (your browser doesn't want to expose what you thought was a secure connection).
  • Allowed HTTP Methods needs to be GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE. This is because forms (and other things such as comments, probably) use the POST HTTP method to work.
  • Cached HTTP Methods I left to just GET, HEAD. No need for anything else here.
  • Forward Headers needs to be set to All or Whitelist. Squarespace's entry point we mentioned earlier needs to know where what domain you're coming from to serve your site, so the Host header must be whitelisted, or allowed with everything else if set to All.
  • Object Caching, Minimum TTL, Maximum TTL, and Default TTL can all be left at their defaults.

  • Forward Cookies cookies is the missing component to get forms working. Either you can set this to All, or Whitelist. There are certain session variables that Squarespace uses for validation, security, and other utilities. I have added the following values to Whitelist Cookies: JSESSIONID, SS_MID, crumb, ss_cid, ss_cpvisit, ss_cvisit, test. Make sure to put each value on a separate line, without commas.

  • Forward Query Strings is set to True, as some Squarespace API calls use query strings so these must be passed along.

  • Smooth Streaming, Restrict Viewer Access, and Compress Objects Automatically can all be left at their default values, or chosen as required if you know you need them to be set differently.

Distribution Settings / General

  • Price Class and AWS WAF Web ACL can be left alone.
  • Alternate Domain Names should list your domain, and your domain with the www subdomain attached, e.g. example.com, www.example.com.
  • For SSL Certificate, please follow the tutorial here to upload your certificate to IAM if you haven't already, then refresh your certificates (there is a control next to the dropdown for this), select Custom SSL Certificate and select the one you've provisioned. This ensures that browsers recognize your SSL over HTTPS as valid. This is not necessary if you're not using HTTPS at all.
  • All following settings can be left at default, or chosen to meet your own specific requirements.

Route 53 (DNS)

  • You need to have a Hosted Zone set up for your domain (this is specific to Route 53 setup).
  • You need to set an A record to point to your Cloudfront distribution.
  • You should set a CNAME record for the www subdomain name pointing to your Cloudfront distribution, even if you don't plan on using it (later we'll go through setting Squarespace to only use the root domain by redirecting the www subdomain)

Squarespace

On your Squarespace site, you simply need to go to Settings->Domains->Connect a Third-Party Domain. Once there, enter your domain and continue. Under the domain's settings, you can uncheck Use WWW Prefix if you'd like people accessing your site from www.example.com to redirect to the root, example.com. I prefer this, but it's up to you. Under DNS Settings, the only value you need is CNAME that points to verify.squarespace.com. Add this CNAME record to your DNS settings on Route 53, or other DNS provider. It won't ever say that your connection has been fully completed since we're using a custom way of deploying, but that won't matter.

Your site should now be operating through Cloudfront pointing to your Squarespace deployment! Please note that DNS propogation takes time, so if you're unable to access the site, give it some time (up to several hours) to propogate.

Notes

I can't say exactly whether each and every one of the values set under Whitelist Cookies is necessary, but these are taken from using the Chrome Inspector to determine what cookies were present under the Cookie header in the request. Initially I tried to tell Cloudfront to whitelist the Cookie header itself, but it does not allow that (presumably because it wants you to use the cookie-specific whitelist). If your deployment is not working, see if there are more cookies being transmitted in your requests (under the Cookie header, the values you're looking for should look like my_cookie=somevalue;other_cookie=othervalue—my_cookie and other_cookie in my example are what you'd add to the whitelist).

The same procedure can be used to forward other headers entirely that may be needed via the Forward Headers whitelist. Simply inspect and see if there's something that looks like it might need to go through.

Remember, if you're not whitelisting a header or cookie, it's not getting to Squarespace. If you don't want to bother, or everything is effed (pardon my language), you can always set to allow all headers/cookies, although this adversely affects caching performance. So be conservative if you can.

Hope this helps!

Psiloc
  • 256
  • 2
  • 6
  • Thanks for sharing – Joel Duckworth Apr 19 '16 at 11:08
  • @JoelDuckworth you should mark the answer as correct answer and upvote it instead of commenting it – trudolf May 09 '16 at 06:36
  • 1
    This just saved me from a public relations link nightmare, thanks Psiloc! – Andrew2M Aug 30 '16 at 02:55
  • 1
    sometimes I got 504 error from CloudFront, do you have a clue? – zachguo Sep 26 '16 at 21:45
  • This worked perfect to get our squarespace site secure. Thanks Psiloc – jhanifen Oct 07 '16 at 04:43
  • @syg I see frequent 504 errors on our website as well. Have you found a fix? – evan.bovie May 08 '19 at 00:08
  • Trying these settings today, but form submissions (like a contact form) fail with 401 errors, even with passing all headers and cookies through. Are form submissions working for you? – Jeff Sheets Nov 12 '19 at 19:43
  • @JeffSheets a little late, sorry, but yes, at the time form submissions were working. I would attempt a cache invalidation and see if that works. 401 is, of course, forbidden, which is at least a clue. If you did figure this out, I'd be curious as to what the issues was, otherwise, I'd need to know more about your setup to really have a clue. One are I'd definitely check, though, is in your **Whitelist Cookie** and **Forward Headers** settings. Those can definitely trip you up. – Psiloc Mar 18 '20 at 01:24
  • @Psiloc we were never able to figure it out, so i'm not sure. The goal for us was to host iOS/android deep link files. We ended up using a workardound to host squarespace from www, and our aws layer from non-www and redirects to the www site. So example.com hits AWS, and www.example.com hits Squarespace. – Jeff Sheets Mar 20 '20 at 14:12
1

Here are the settings to get CloudFront working with Squarespace!

Behaviours:

  • Allowed HTTP Methods Ensure that you select: GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE. Otherwise forms will not work:
  • Forward Headers: Select whitelist and choose 'Host'. Otherwise squarespace will not know which website they need to load up and you get the message 'Website has expired' or similar.

Origins:

  • Origin Domain Name set as: ext-cust.squarespace.com

  • Origin Protocol Policy Select HTTPS so that traffic between the CDN and the origin is secure too

General

  • Alternate Domain Names (CNAMEs) put both your www and none www addresses here and let Squarespace decide on if to direct www to root or vice-versa (.e.g example.com www.example.com) You can now configure SSL on CloudFront

  • HTTPS You can now enforce HTTPS using a certificate for your site here rather than in Squarespace

Setting I'm unsure about still:

  • Forward Query Strings: recommended not for caching reasons but I think this could break things...

Route53

Create A records for www and root (e.g. example.com www.example.com) and set as an alias to your CloudFront distribution

Joel Duckworth
  • 5,455
  • 3
  • 20
  • 21
  • You need to forward query strings if either (a) your application actually uses them or (b) if you want to be able to use then for cache-busting at CloudFront and the browser. If you don't forward them, CloudFront pretends as though they never arrived, so you can only use them for browser-side cache-busting only. – Michael - sqlbot Apr 01 '16 at 02:44