Integrate Socket API into existing CloudFront Solution

Hi,

thanks for the sample, which helped us a lot to understand how to use WebSockets with Amazon API Gateway. We were able to create a new Socket API for our solution based on the samples. We wanted to integrate it created via Amazon CloudFront into our existing solution (according to the AWS Documentation WebSockets should work on CloudFront: https://goo.gl/4AMRPb).

Currently we do have a CloudFront distribution (incl. CNAME with e.g. mydomain,com) with multiple origins

• an S3 Origin where we do have the frontend (frontendOrigin)
• a custom origin for the API (apiOrigin)
• an additional S3 Origin, where we also store frontend pictures (picturesOrigin)

For these origins we created several Cache Behaviours:

• The Default (*) behaviour is pointing to frontendOrigin
• A Behaviour with Path Pattern /api/* which is pointing to apiOrigin
• A Behaviour with Path Pattern /pictures/* which is pointing to picturesOrigin

Now we wanted to integrate our new Socket API created via API Gateway to CloudFront and created a new Origin called socketOrigin with a Behaviour with Pattern /api/socket which is pointing to socketOrigin (with the correct precedence).

After redeploying the distribution we were not able to open a connection to the socket, because of a ** HTTP 403** Status code. I found a way to get more details by using a curl:

curl --include \
     --no-buffer \
     --header "Connection: Upgrade" \
     --header "Upgrade: websocket" \
     --header "Host: <cloudfrontid>.cloudfront.net" \
     --header "Origin: https://<cloudfrontid>.cloudfront.net/api/socket" \
     --header "Sec-WebSocket-Key: SGVsbG8sIHdvcmxkIQ==" \
     --header "Sec-WebSocket-Version: 13" \
     https://<cloudfrontid>.cloudfront.net/api/socket

We got the following response back by CloudFront:

HTTP/1.1 403 Forbidden
Content-Type: application/json; charset=UTF-8
Content-Length: 75
Connection: close
Date: Thu, 10 Jan 2019 09:57:07 GMT
X-Cache: Error from cloudfront
Via: 1.1 blahblahblah.cloudfront.net (CloudFront)
X-Amz-Cf-Id: YxowUpxLm6t3VEV1Foue36kmdrOilhVlxqHN0S59dy-7cca681LiHw==

We thought, that it might have something to do with the path pattern, as we don’t specify any wildcard, so we switched the path pattern to /api/socket/* , but this didn’t help. We checked the Viewer Protocol Policy (HTTP & HTTPS) and Origin Protocol Policy (Match Viewer), but this also didn’t help to solve the 403.

So, here is the question, if Amazon API Gateway & Amazon CloudFront is working with WebSocket APIs and if yes, how it must be configured to get to work. Can you provide any samples? If it is not working yet, we would like to open a feature request to support the above mentioned configuration.

Kind Regards, Marcell

[nzamosenchuk]

Hey there, I spent perhaps more than a day, but found the catch. You need to configure the Origin Request Policy properly. Here is an example for WebSockets : https://nickzamosenchuk.medium.com/configure-amazon-cloudfront-cdn-for-websocket-connection-43c44b3f877c

Cheers!

[bjorg]

@dgomesbr Please do. I already mentioned it to Katrina Bakas. This is really annoying, because it requires us to use the WebSocket stagename in our front-end application code, which is not ideal.