1

My setup is Vite-based development environment with React.js framework; GitHub Actions for CI/CD.

I can pass my environment variables into my app without an issue. But, in the event that I run a build of my web app and push that to GitHub (Actions) so my website gets the latest and greatest, I have now effectively exposed my environment variable values because the values of those environment variables appear in the index-<random-hash-of-characters-here>.js that gets output to my build folder /dist.

I have looked into application settings for Azure Static Web Apps (SWA) but to my understanding creating application setting variables is applicable for when the website has a backend attached (mine does not). See below for reference:

enter image description here

I also understand that I have the option to define an environment variable in the build configuration file if I want to set an environment variable for a frontend build. See below for reference:

enter image description here enter image description here

But I am also going to expose private information if I place my environment variables in my .yml configuration file since this is publicly available on the GitHub repository. So, what's the solution here? Does it have to do with secrets? Please help community!

jcomp_03
  • 127
  • 1
  • 8

2 Answers2

1

There is unfortunately no way around this. If your code is being downloaded by a browser (web site), then it is not secure by design. Hence, you shouldn't be exposing secrets within your front-end code.

You should have a backend that exposes an API and users of your web page should access secure content through it.

PramodValavala
  • 6,026
  • 1
  • 11
  • 30
0

hopefully I can be of some assistance.

IMPORTANT: All environment variables you make available to the react app will also be available to your site visitors

If you want to control environment variables for your GitHub Actions CI/CD without directly inputting them into your workflow file or your source, you can use variables. Just reference them in your .yml file with ${{ vars.VARIABLE_NAME_HERE }}. So in the example you provided, it might look like:

env:
  HUGO_VERSION: ${{ vars.HUGO_VERSION }}

I am going to assume you are using environment variables to retrieve content from some other source.

I suggest using an Azure Function. Your Azure Function can use your environment variables without exposing them to the web browser. The web browser will receive the entirety of your compiled / built react app, including all environment variables you pass to it. However, the web browser will only receive the output of your Azure Function calls.

Azure Static Web Apps makes this very easy. You can fetch data from your Azure Function without needing to specify a function URL. Furthermore, Azure Functions operate on a consumption plan as default. This means you only pay for what you use. If nobody is using your site or your function, you are not charged. I believe Azure SWA functions have this pricing plan by default.

The environment variables you set in the resource blade for your SWA are made available to the Azure Function, but not to the react app. If you want to protect your environment variables further, you can consider placing them into an Azure Key vault and assigning your SWA a managed identity to fetch them at runtime.

To conclude, your react app, or anything you are serving to your site visitors, should not contain or reference any information that you do not want them to access. If you need to utilize a secret to obtain content you want to show to your site visitors anonymously, you should offload that task to an api in the form of a server backend, or in the case of Azure Static Web Apps, an Azure Function App.

Hope that helps!

Phoebe F
  • 1
  • 2