Set a browser cookie with user location using AWS Lambda@Edge

Question

I have a HTML content loaded from Cloudfront. Cloudfront adds a header (cloudfront-viewer-country) with the user's country in some of his Lambda@Edge functions. I tried to send the user's country to the browser and read it using a JS code.

When I added the code

response.headers['cloudfront-viewer-country'] = request.headers["cloudfront-viewer-country"];

to the function origin_reponse, the response from Cloudfront contained the header cloudfront-viewer-country with the user's country but this data is not accessible to the JS code on the page.

I also tried to send the country to the browser using a cookie:

let finalCookieArray = [];
const cookiePath = '/';
finalCookieArray.push('cloudfront-viewer-country1='+ countryCode +'; SameSite=Strict; Path=' + cookiePath + '}');    
response['headers']['set-cookie'] = [{
    'key': 'Set-Cookie',
    'value': finalCookieArray
}];

But the problem in this method is that Set-Cookie doesn't work from the function origin_reponse.

Finally I tried to use the code above in the function viewer_reponse but the request sent to the this function doesn't contain the header cloudfront-viewer-country.

Is there any way to send the country added by cloudfront to the browser in a way that it will be accessible through JS code (preferably using only 1 Lambda@Edge function)?

Answer 1

As you realised, you can only set cookies using viewer_reponse, and you can only access CloudFront-Viewer-Country in origin_reponse or origin_request. So it can not work with cookies. I guess the intention is to pass the information of country to the browser.

Several options:

1. if your origin is a server that can change the content based on headers, you could configure CF to cache based on CloudFront-Viewer-Country, and pass this header to the origin server, which will serve a different content for each country. It reduces the cache hits, but you can have the country name where you want without relying on browser logic.

2. if your origin is S3 or any static server, you could use an origin_request to modify the URL and add ?c=[country] to it. And then read that parameter from the url using Javascript.

See here how to modify: https://aws.amazon.com/blogs/networking-and-content-delivery/handling-redirectsedge-part1/

And how to read using JS:

function getURLParameter(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }

document.write(getURLParameter(c))

This can be tricky as you have to cache based on URL parameters and that can really reduce the cache hits.

3. if you do not mind an extra AJAX call (and having the information async), you could define a specific url in CloudFront, that calls an origin response lambda function. This function will intercept the response and replace it with a JSON array containing the contry code. This allows you to maintain the cache hits on the main content.

4. one other way would be to use geo detection API to do that for you: https://ipstack.com/ https://ipapi.com/

If you do still want to set a cookie with the country, you can do it with JavaScript once you get the information with one of the above-mentioned methods.

Answer 2

After some investigation it turns out that the OriginResponse Lambda@Edge function is capable to add a cookie that will be received in the browser.

To enable such behavior, the CloudFront's distribution must be defined Forward Cookies = Whitelist / All (depend on your needs) and incase of using Whitelist, add a custom cookie name (I used a cookie that never exists on my sessions and that will prevent caching by the cookies value and improve the cache's performance).

Cookie's settings in the CloudFront's distribution

In my case, I wanted to set a cookie with the value of the user's country (which is provided by CloudFront as a header named cloudfront-viewer-country). This header is only available when the distribution's settings is set with Cache Based on Selected Request Headers=Whitelist / All (depend on your needs) and incase of using Whitelist add the header cloudfront-viewer-country (as shown in the picture below)

Header's settings in the CloudFront's distribution

Finally, once that everything is ready, create the Lambda@Edge function with the following code:

exports.handler = (event, context, callback) => {
    
    // Extract the request from the CloudFront event that is sent to Lambda@Edge 
    var request = event.Records[0].cf.request;
    var response = event.Records[0].cf.response;
    
    if (!request)
    {
        callback(null, response);
        return;
    }
    
    var countryCode = "Unknown";
    // Get the user's country from CloudFront's header
    const headers = request.headers;
    if (!!headers &&
        !!headers["cloudfront-viewer-country"] &&
        0 < headers["cloudfront-viewer-country"].length &&
        !!headers["cloudfront-viewer-country"][0].value)
        countryCode = headers["cloudfront-viewer-country"][0].value;
        
    if (!!response)
    {
        let finalCookieArray = [];
        // Save previous set-cookies definitions
        if(!!response['headers'] && !!response['headers']['set-cookie']){
          for(var cookie of response['headers']['set-cookie']){
            finalCookieArray.push(cookie.value);
          }
        }
        
        // Add the country's value as a cookie
        const cookiePath = '/';
        finalCookieArray.push('user_country='+ countryCode +'; SameSite=Strict; Path=' + cookiePath);
        response['headers']['set-cookie'] = [{
            'key': 'Set-Cookie',
            'value': finalCookieArray
        }];
    }
    
    // Return to CloudFront
    callback(null, response);

};

And attach the function to the distribution

Lambda Function Associations in the CloudFront's distribution

Side note: Because the settings mentioned above will invoke the Lambda function for all the files in the distribution and may hurt the Cache hits, you should consider to create a new behavior (in CloudFront's distribution) with the settings above and set Path pattern only to the relevant files that you want to return the country's cookie.