Hello everyone,
When you are interacting with 3rd party services and making API calls that use both the public AND private API keys, how do you handle the storage/obfuscation of these variables away from the client-accessible javascript files?
By not using Webflow to access them without a middleware tier.
1 Like
@trynix - to elaborate on what @webdev said, generally you’ll have a third party backend hosted on something like AWS that will act as the middleman between two services and typically stores api keys and other sensitive data in environment variables.
2 Likes
@sam-g looking at doing something like this. Any recommendations on where to get started? Tutorial maybe?
1 Like
The way I handle this is with using a Glue Service like Make (Integromat) or Zapier. It’s really easy to setup and use.
I looks like this:
Webflow --> Make / Integromat --> API
(Secret API Key)
Make is designed to store your secret keys for you (or they just connect to a service via oAuth).
Most of my screencasts and tutorials will show you how to do this, here are some examples:
-
Walks through storing your credentials / api keys in Make to access Airtable
-
Another example, this one is a screencast. It connects to an email provide, Campaign Monitor, and Make is storing your secret key.
Make stores all that info for you securely.
Loads more examples if you dig around the blog.
1 Like
@learyjk - what are you trying to do specifically? I might be able to point you in the way of tutorial if I knew what you were after.
@sam-g just exploring how to pull data from external APIs (vice Webflow CMS). I’d prefer to be able to use the native JS fetch API but not sure how to do it without a 3rd party solution like Make. Wondering if I can host something on an AWS EC2 instance that I could send requests to from Webflow and then have that use the key.
Maybe I set up my own API using Express on an AWS EC2 and then forward those requests but now with an API key that is stored in the EC2 env vice somewhere on Webflow where the key would be public.
Another, very recent option is to use Webflow’s own native Logic: Automate and connect your website | Webflow Logic
It has an HTTP request action that allows you to store credentials in. But others may have better guidance for you.
2 Likes
@learyjk - you can use webhooks to send requests to an endpoint that you choose from Webflow without credentials. If you are trying to pass CMS data from Webflow to another service you can do so that way. If you are trying to pass data into Webflow or go both directions you’ll need to use something like Zapier or set up your own server to authenticate and make requests.
2 Likes
Hello, Not sure if this is the right thread, but I had a security researcher contact me about the weglot API key in plain text on the site. We are using the hosted webflow solution. How do we solve this?
My team and I use the ZAPTEST application. They provide automated API testing for various business situations. By accessing API secret key data, ZAPTEST helps speed up the application development and testing process. It provides flexible custom codes for testing various services. In addition, the application provides professional support and design assistance. With the help of this application, users can store and use data seamlessly. In this way, ZAPTEST provides an easier method for automated API testing, allowing you to make important changes to applications and processes quickly and efficiently. zaptest.com
Hey, I do not know if this is what you are looking for, but here is a solution (assuming you are using the script in the custom code section in your project) in steps:
- Start a new project in your code editor and install dotenv - npm
- Write whatever code you want and store the API keys in a .env file as described above.
- Make sure to modify .gitignore to ignore the .env file & upload it to a private Github repository
- Go into Netlify / Vercel, and when you set up the project you want to host, put in the environment variables and their values and deploy it.
- Put the following into your custom code section:
<script src="https://project-url.netlify.com/script.js"></script>
There you go; you can have the script on your Webflow project without exposing API keys. If you all need a video on this, I will record one.
cc: @trynix
Neither. Different 3rd party tool which is to be included on my webflow site with a script in which the tool provider puts the API key in the code as “example”.