Environment Variables

Environment variables are dynamic values you define during importer initialization and then access in the sheet configuration. Use them to configure the environment of your importer. The values you pass at initialization replace the placeholders referenced in the sheet settings with double curly braces.

Defining environment variables

Create the environment object

Create an object named environment.

Add your variables

Add the variables to this object in <key>: <value> format.

Pass the object to the importer

Pass the environment object as a parameter to the importer initialization function.

Javascript
React
Angular
Vuejs

Pass the environment object to the CSVBoxImporter function:

<button class="btn btn-primary" data-csvbox disabled onclick="importer.openModal();">Import</button>
<script type="text/javascript" src="https://js.csvbox.io/script.js"></script>
<script type="text/javascript">
    function callback(result, data) {
        if(result){
            console.log("success");
            console.log(data.row_success + " rows uploaded");
            //custom code
        }else{
            console.log("fail");
            //custom code
        }
    }

    let importer = new CSVBoxImporter("YOUR_LICENSE_KEY_HERE", {}, callback, 
    {
	lazy: true,
	environment: {
           env_name: 'staging',
           base_url: "https://staging.mydomain.com",
           authorized_domain: "https://staging.myapp.com",
           user_id: "default123"                      
        }
    });

    importer.setUser({
        user_id: "default123"
    })
</script>

Minimum version 1.1.11 of the @csvbox/react library is required to use this feature.

Pass environment variables as an object to the environment property of the CSVBoxButton component.

<CSVBoxButton
  licenseKey="YOUR_LICENSE_KEY_HERE"
  user={{
    user_id: "default123"
  }}  
   environment={{
     env_name: 'staging',     
     base_url: "https://staging.mydomain.com",
     authorized_domain: "https://staging.myapp.com",
     user_id: "default123"   
  }}

  onImport={(result, data) => {
    if(result){
      console.log("success");
      console.log(data.row_success + " rows uploaded");
      //custom code
    }else{
      console.log("fail");
      //custom code
    }
  }} 
  render={(launch, isLoading)=>{
          return <button disabled={isLoading} onClick={launch}>Upload file</button>;
      }}
>
  Import
</CSVBoxButton>

Minimum version 1.1.12 of the @csvbox/angular library is required to use this feature.

Pass environment variables as an object to the environment property of the AppComponent.

@Component({
  selector: 'app-root',
  template: `
    <csvbox-button
      [licenseKey]="licenseKey"
      [user]="user"      
      [environment]="environment"     
      [imported]="imported.bind(this)">
      Import
    </csvbox-button>
  `
})

export class AppComponent {

  title = 'example';
  licenseKey = 'YOUR_LICENSE_KEY_HERE';
  user = { user_id: 'default123' };
  environment = {
    env_name: 'staging',
    base_url: "https://staging.mydomain.com",
    authorized_domain: "https://staging.myapp.com",
    user_id: "default123"     
  };

  imported(result: boolean, data: any) {
    if(result) {
      console.log("Sheet uploaded successfully");
      console.log(data.row_success + " rows uploaded");
    }else{
      console.log("There was some problem uploading the sheet");
    }
  }
}

Minimum version 1.1.8 of the @csvbox/vuejs library is required to use this feature. Minimum version 1.1.5 of the @csvbox/vuejs3 library is required to use this feature.

Pass environment variables as an object to the environment property of the CSVBoxButton component.

<template>
  <div id="app">
    <CSVBoxButton 
      :licenseKey="licenseKey"
      :user="user"        
      :environment="environment"        
      :onImport="onImport">
      Upload File
    </CSVBoxButton>
  </div>
</template>

<script>
import { CSVBoxButton } from '@csvbox/vuejs';

export default {
  name: 'App',
  components: {
    CSVBoxButton,
  },
  data: () => ({
    licenseKey: 'YOUR_LICENSE_KEY_HERE',
    user: {
      user_id: 'default123',
    },
     environment = {
      env_name: 'staging',
      base_url: "https://staging.mydomain.com",
      authorized_domain: "https://staging.myapp.com",
      user_id: "default123"    
    },
  }),
  methods: {    
    onImport: function (result, data) {    
       if(result){
          console.log("success");
          console.log(data.row_success + " rows uploaded");
          //custom code
      }else{
          console.log("fail");
          //custom code
      }
    }
  },
}
</script>

Environment variable names must not contain spaces or special characters other than _ (underscore).

env_name is a CSVbox reserved keyword that tags the environment. Each import is categorized by its value: pass values such as 'production', 'staging', or 'local'. If you don’t pass a value, env_name defaults to 'default'. You can filter individual imports by env_name in the CSVbox admin dashboard.

Filter via Environment on the Import page

Accessing the variables

Environment variable values replace all the environment placeholders in the sheet settings. Define a placeholder with double curly brackets: {{ environment_variable_name }}. For example, to reference an environment variable named base_url, wrap the variable name in double curly braces: {{base_url}}/route-endpoint Using environment variables in the webhook URL lets you adjust the webhook route to the specific environment.

Beyond defining the environment, these variables can configure the importer dynamically based on end users or any other system parameters. For example, define an environment variable user_id and pass it to the webhook URL to configure the URL per end user.

user_id environment variable in the webhook URL — user_id env variable

You can also access environment variables in Validation Functions, Virtual Columns, and Data Transforms JavaScript code.

// Usage
if(csvbox.environment["user_id"] && csvbox.environment["user_id"] == "abc123") {
 
 // code
 
}

Encrypting environment variables

You can encrypt environment variables with the AES Everywhere library to protect sensitive data.

AES Everywhere library

The AES Everywhere library provides a simple, effective way to encrypt and decrypt data with the Advanced Encryption Standard (AES) algorithm. It supports many platforms and programming languages, which makes it a versatile choice for securing environment variables. CSVbox supports multiple encryption schemes for securing sensitive importer data at rest. Choose the mode that best fits your security or compliance requirements.

Supported encryption types

Encryption mode	Notes
AES-256-CBC (legacy)	Still supported, but recommended to move to newer CBC/GCM variants.
Updated AES-256-CBC	Improved IV handling and hardened padding logic. Recommended if you prefer CBC mode.
AES-256-GCM	Most secure. Provides authenticity + integrity via GCM tags. Recommended for all new installs.

Steps

Install the library

Install the AES Everywhere library in your app.

Open the encryption key settings

In your app admin dashboard, go to Account Menu → API Keys page → Encryption Key section.

Choose the encryption settings

Select the Encryption Type and Encryption Mode.

Generate an encryption key

Generate a secure encryption key.

Encrypt the environment variables

Use your encryption key and the AES Everywhere library to encrypt the environment variables.

Encrypt all the required environment variables in one single object.

Here is an example in JavaScript:

const AES = require('aes-everywhere');
const secretKey = 'your-encryption-key';

const originalValue = {
                    base_url: "https://staging.mydomain.com",
                    authorized_domain: "https://staging.myapp.com",
                    user_id: "default123"
};

const encryptedValue = AES.encrypt(JSON.stringify(originalValue), secretKey);

console.log(`Encrypted Value: ${encryptedValue}`);
//encrypted value: U2FsdGVkX192dXI7yHGs/4Ed+xEC3ejXFINKO6Hufnc=

Pass the encrypted value

Add the encrypted value to the environment object, under the env_encrypted key.

Javascript

 let importer = new CSVBoxImporter("YOUR_LICENSE_KEY_HERE", {}, callback, 
    {
	lazy: true,
	environment: {
           env_name: 'staging',
           //encrypted values below
           env_encrypted: "U2FsdGVkX192dXI7yHGs/4Ed+xEC3ejXFINKO6Hufnc=",
	   module_id: 234234	                                  
        }
    });

The CSVbox importer decrypts the environment variables with the same AES Everywhere library.

Getting Started

Dashboard Settings

Sheet Settings

Advanced Installation

Data Destinations

Account

Resources

Legal

Environment Variables

Defining environment variables

Accessing the variables

Encrypting environment variables

AES Everywhere library

Supported encryption types

Steps

​Defining environment variables

​Accessing the variables

​Encrypting environment variables

​AES Everywhere library

​Supported encryption types

​Steps

Defining environment variables

Accessing the variables

Encrypting environment variables

AES Everywhere library

Supported encryption types

Steps