Cloudfront Location Headers

[Rafcin]

Is this related to a new or existing Amplify category?

hosting

Is this related to another service?

No response

Describe the feature you'd like to request

Cloudfront Headers Cloudfront introduced some neat headers for geolocation and I noticed when I deploy a Next app I'm able to access a few of the headers. The problem currently is you can only use those headers and no other cloudfront-viewer headers. It would be great if I could access the location or city headers to improve the experience of my app. I depend heavily on location information and without the headers I have to use the x-forwarded-for header, set up a geoip service, and do all of that.

Describe the solution you'd like

Ideally a configuration file under hosting to allow me to edit the preset config. Or a nice button in the Amplify console.

Describe alternatives you've considered

Painfully setting up a geoip service with apigateway and lambda and then crying myself to sleep as my AWS bill grows larger.

Additional context

No response

Is this something that you'd be interested in working on?

• [ ] 👋 I may be able to implement this feature request
• [ ] ⚠️ This feature might incur a breaking change

[Rafcin]

Stephen brought this up in the Amplify Office Hours.

NextJS 12 introduced middleware and server components. In the middleware demo when using Vercel you can use req.geo to resolve the user's location/country. I think this would be another useful feature to have if you use Amplify to host.

[renebrandel]

Transferring this to the Console repo because even though the title says "CloudFront", the description is specifically talking about Hosting.

[github-actions[bot]]

Hi :wave:, thanks for opening! While we look into this...

If this issue is related to custom domains, be sure to check the custom domains troubleshooting guide to see if that helps. Also, there is a more general troubleshooting FAQ that may be helpful for other questions.

Lastly, please make sure you've specified the App ID and Region in the issue!

[ferdingler]

Hi @Rafcin, we do forward the cloudfront-viewer-country header to NextJS SSR apps. Just so I understand, is your desire to also have us forward the other location headers: CloudFront-Viewer-City, CloudFront-Viewer-Postal-Code, etc?

[Rafcin]

@ferdingler Correct, I would like to be able to use the Lat & Lon headers as well as the other location-specific headers. At the moment I run the user's IP to a lambda I set up that uses Maxmind to resolve the location, although with the introduction of Middleware in Next12 I think having these headers would be extremely convenient and cost-effective.

[Rafcin]

@ferdingler I also had some follow-up questions if that's ok.

• Is there a rough timeline for when an update to the CloudFront config would release? I assume it's just a change to whatever preset is used currently for CloudFront when deploying an amplify app right?
• Would only some of the headers be added, all of them, or will devs get the option to set up a config file that dictates what headers are used?

[Rafcin]

@ferdingler Any updates?

[Rafcin]

@ferdingler Hey just wanted to check back in, have there been any updates for headers? If not, do you by chance have any ideas how I could work around it?

Having to run landa's to resolve location is starting to kick my butt in terms of cost.

[kirkmin-clearmarket]

@ferdingler Any updates on this?

[Rafcin]

@kirkmin-clearmarket I would recommend reaching out to the Amplify team over Discord or creating an AWS ticket during the day (PST timezone for ref) and then ask if they can enable the location headers. They were able to manually enable the headers for my deployed applications.

You'll also need to slightly tweak your deployment, I'm using Next and it uses @sls-next/serverless-components, so you'll need to create a new serverless config in your project (like this)

DEPLOYMENT ID:
  component: '@sls-next/[email protected]'
  inputs:
    timeout:
      defaultLambda: 30
      apiLambda: 30
      imageLambda: 30
      regenerationLambda: 30
    cloudfront:
      defaults:
        forward:
          headers:
            - CloudFront-Is-Desktop-Viewer
            - CloudFront-Is-Mobile-Viewer
            - CloudFront-Is-Tablet-Viewer
            - CloudFront-Viewer-Country
            - CloudFront-Viewer-Latitude
            - CloudFront-Viewer-Longitude
            - CloudFront-Viewer-Time-Zone
            - CloudFront-Viewer-City
            - Authorization
    build:
      env:
        AMPLIFY_DIFF_DEPLOY: 'false'
        AMPLIFY_MONOREPO_APP_ROOT: apps/fox

and after you do that, in your build script after you build the app and everything, simply just copy the config you made and overwrite the existing serverless config as such - cp config/serverless.yml serverless.yml Also if you want the deployment ID I don't remember where you can easily find it, however, if you want it the less easy way, just move the original serverless config to s3 using # - aws s3 cp serverless.yml s3://sandbox/public/ and just copy the ID from that.

This will work 100%, however, you need to have the ---> Amplify team <--- add the headers you want, if you modify the sls config it will work, however, the reverse proxy will strip those headers.

I think an update to this will come later down the line, they mentioned that the build system will most likely change (or is being changed I don't know exactly) and my guess is in the future we'll be able to do this more easily.

Hope this helps!

[Rafcin]

Also if anyone from the Amplify team stumbles upon this, don't close this until a working solution is added to the CLI or console. If you do close it, I'll open another one. I'm watching 👀

[kirkmin-clearmarket]

@Rafcin Thanks a ton, Raf! Will try that out! c:

[charlieboles]

@ferdingler Can you enable the location headers on this app: d2cou5stxzl22

[Rafcin]

I would open a ticket through the AWS console, @ through GitHub might not be ideal due to the number of issues on the repo.

On Thu, Feb 24, 2022, 1:12 PM charlieboles @.***> wrote:

@ferdingler https://github.com/ferdingler Can you enable the location headers on this app: d2cou5stxzl22

— Reply to this email directly, view it on GitHub https://github.com/aws-amplify/amplify-console/issues/2348#issuecomment-1050268903, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACQCG64RALHYJHXJH4QQUNTU42NKRANCNFSM5G5V63CA . You are receiving this because you were mentioned.Message ID: @.***>

[fnavarrodev]

Hi everyone I was able to get those headers from my next.js application forwarding them from Cloudfront(the one created by Amplify). But maybe is not the best approach when we want those headers in all the available environments. For production with the definitive cloudfront is fine to have it this way, I see as a temporary solution.

So I'm thinking to open a ticket to AWS to see if those headers can be always available.

[fnavarrodev]

Here you can see what I mean:

• Going thru cloudfront as production would do -> https://d2uzplva7g9enx.cloudfront.net/test
• New branch environment -> https://amplify-test.d1umqss2anlknu.amplifyapp.com/test

[Rafcin]

The reverse proxy strips the headers, I definitely agree they should be allowed by default.

On Fri, Mar 4, 2022, 12:08 AM Francesc Navarro @.***> wrote:

Here you can see what I mean:

• Going thru cloudfront as production would do -> https://d2uzplva7g9enx.cloudfront.net/test
• New branch environment -> https://amplify-test.d1umqss2anlknu.amplifyapp.com/test

— Reply to this email directly, view it on GitHub https://github.com/aws-amplify/amplify-console/issues/2348#issuecomment-1058931049, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACQCG6YM362FZKUX42VCLTLU6HAHPANCNFSM5G5V63CA . You are receiving this because you were mentioned.Message ID: @.***>

[fnavarrodev]

Did anyone get any reply from AWS about it?

[fnavarrodev]

@ferdingler Is it possible to add those headers? I'm evaluating not to use Amplify because this is a real issue for us.

[Rafcin]

@fnavarrodev are you in the Discord? I would bring this up there in the hosting channel, I'll link the issue there as well.

[fnavarrodev]

Hi Raf, my username is fnavarrodev#3748

Thanks

El lun., 7 mar. 2022 20:27, Raf @.***> escribió:

@fnavarrodev https://github.com/fnavarrodev are you in the Discord? I would bring this up there in the hosting channel, I'll link the issue there as well.

— Reply to this email directly, view it on GitHub https://github.com/aws-amplify/amplify-hosting/issues/2348#issuecomment-1061051030, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJIZD6XPUR6VGUZ6DD3CITU6ZKAPANCNFSM5G5V63CA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>

[fnavarrodev]

@Rafcin I'm in discord but I don't get a reply about this issue. It would add a lot of value to forward those headers for geolocation.

[Rafcin]

@fnavarrodev Hello! I'm sorry no one was able to help you out, I suggest you open a ticket in the AWS console with the issue then, that way they can be notified better. Beyond that you can't do much but wait for a response, unfortunately for now parts of the hosting system are locked down so as devs we can't change much until the Amplify team adds that as a feature with the CLI or console.

[charlieboles]

@Rafcin @fnavarrodev and anyone else who needs headers, I would suggest lobbying for this feature to be rolled out officially by the amplify team. After opening a ticket with AWS support they got back to me and the internal amplify team is refusing to add headers to Amplify managed distributions.

After some discussion with the team, they informed me that they have added the "CloudFront-Viewer-Country" header by default to all Server-Side Rendered (SSR) applications. However, unfortunately they are currently not supporting adding other headers to Amplify managed distribution and SSR distribution. They have marked this as an internal feature request on their end and this will be taken into consideration in future roll-outs.

[Rafcin]

@charlieboles I managed to solve the header issue although it requires staff intervention to prevent the proxy from removing the headers, and I brought this up with Nikhil recently on a chime call. Hopefully this is something that's integrated.

If not I'm going to have to apply for an Amplify job and do it myself 😅. (That would actually be fun, I love Amplify)

[fnavarrodev]

@charlieboles thanks for the effort. We moved our next.js app to just serverless, we discarted using Amplify but I'm sure more people will be interested in having those headers. Is great that Cloudfront offers those headers, why not forward them?

[ghost]

Hello everyone following this thread! 👋🏽

We are aware of the desire to have location headers (and other CloudFront headers) available by default and are tracking this as a feature request for prioritization. Currently, we have found that manually adding these headers to individual distributions is not a scalable solution.

In the mean time, CloudFront-Viewer-Country is available for use. We appreciate all of your feedback and patience! We'll update this issue when we have more details.

[CauanCabral]

Hi, any update about this?

[pietrorea]

Hi there - we've also been tracking this request for a few months. Any updates would be very appreciated

[fnavarrodev]

Amplify now supports next.js 13 and a custom serverless setup doesn't. I'm thinking to move to Amplify again but I really need the cloudfront headers available in my next.js app in SSR and API routes. Any move about this?