Re: Trouble Retrieving API Key in Shopify Contact Form JavaScript

Solved

Trouble Retrieving API Key in Shopify Contact Form JavaScript

Frozbee
Shopify Partner
12 0 1

Hello !

 

I've integrated the OpenAI API directly into my contact-form.liquid on my Shopify store.

However, this poses a security risk as the API key is visible if someone inspects the element.

To address this, I've attempted to store the API key in a separate liquid file named api-key.liquid :

 

 

{% assign openai_api_key = "My_API_KEY" %}

 

 

I then included this file in my contact-form.liquid and integrated a console log to check if this works correctly :

 

 

$(document).ready(function() {
    var apiKey = "{{ openai_api_key }}"; 
    console.log("Your API key is :", apiKey); 
});

 

 

 

Despite these efforts, when trying to access the openai_api_key variable in my JavaScript code, it returns apiKey instead of the actual API key value. Could someone assist me in troubleshooting this issue?

 

Thank you for your help.

Accepted Solution (1)

Xipirons
Shopify Partner
136 25 32

This is an accepted solution.

HI @Frozbee 

 

I must strongly advise against storing your OpenAI API key in a Liquid file and accessing it from your JavaScript code.

 

Even though you've moved the key to a separate file, it will still be visible to anyone who inspects the rendered page's source code. This poses a significant security risk as anyone could use your API key to make unauthorized requests to the OpenAI API.

 

Instead, here's a secure solution:

 

  1. Create a server-side endpoint (e.g., using Node.js, Python, PHP, or any server-side language of your choice) that handles the communication with the OpenAI API. This endpoint should be hosted on your server or a serverless function platform like AWS Lambda or Google Cloud Functions.
  2. Store your OpenAI API key securely on the server-side, either as an environment variable or in a secure configuration file that is not accessible from the client-side.
  3. In your contact-form.liquid file, instead of making a direct request to the OpenAI API, send a request to your server-side endpoint. You can do this using an AJAX request or by submitting the form to the server-side endpoint.
  4. On the server-side, retrieve the form data from the request, make the necessary API call to OpenAI using your securely stored API key, and then send the response back to the client-side.

By implementing this approach, your API key remains secure on the server-side and is never exposed to the client. The client-side code only communicates with your own server-side endpoint, which acts as a proxy between your Shopify store and the OpenAI API.

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed

View solution in original post

Replies 8 (8)

Xipirons
Shopify Partner
136 25 32

This is an accepted solution.

HI @Frozbee 

 

I must strongly advise against storing your OpenAI API key in a Liquid file and accessing it from your JavaScript code.

 

Even though you've moved the key to a separate file, it will still be visible to anyone who inspects the rendered page's source code. This poses a significant security risk as anyone could use your API key to make unauthorized requests to the OpenAI API.

 

Instead, here's a secure solution:

 

  1. Create a server-side endpoint (e.g., using Node.js, Python, PHP, or any server-side language of your choice) that handles the communication with the OpenAI API. This endpoint should be hosted on your server or a serverless function platform like AWS Lambda or Google Cloud Functions.
  2. Store your OpenAI API key securely on the server-side, either as an environment variable or in a secure configuration file that is not accessible from the client-side.
  3. In your contact-form.liquid file, instead of making a direct request to the OpenAI API, send a request to your server-side endpoint. You can do this using an AJAX request or by submitting the form to the server-side endpoint.
  4. On the server-side, retrieve the form data from the request, make the necessary API call to OpenAI using your securely stored API key, and then send the response back to the client-side.

By implementing this approach, your API key remains secure on the server-side and is never exposed to the client. The client-side code only communicates with your own server-side endpoint, which acts as a proxy between your Shopify store and the OpenAI API.

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed

Frozbee
Shopify Partner
12 0 1

Hi @Xipirons ,

 

Thank you for your fast reply.

By creating a server-side endpoint, does this will generate costs ? I am not a developper so this question can be very foolish.

I am going to go step by step on what you advise and I hope i will succeed, otherwise I will have to hire someone.

Froz,

Xipirons
Shopify Partner
136 25 32

Here is a free and easy solution to host your server-side endpoint without any cost 🙂 :

 

Use Github to host a text file containing your API key.

 

Step-by-step guide to host a text file containing your API key for free on Github :

  1. Go to https://github.com and create a new account if you don't have one already.
  2. Once logged in, click on the "+" icon in the top-right corner and select "New repository".
  3. Choose a name for your repository, for example, "api-key-repo".
  4. Select "Private" to ensure your repository is not publicly accessible.
  5. Click on "Create repository".
  6. On the next page, click on "creating a new file".
  7. Name the file "apikey.txt".
  8. Open a text editor on your computer (like Notepad), paste your API key, and then copy the content.
  9. Paste the API key into the file content area on GitHub.
  10. Scroll down and click on "Commit new file".
  11. Now, click on "Settings" in your repository navigation.
  12. In the left sidebar, click on "Pages".
  13. Under "Source", select "Deploy from a branch".
  14. Under "Branch", select "main" and click "Save".
  15. GitHub will now provide you with a URL where your file is hosted. It will look like: https://yourusername.github.io/api-key-repo/apikey.txt

 

You can now use this URL in your Shopify store's code to access the API key. For example, in your JavaScript code, you can fetch the content of the file:

 

 

 

fetch('https://yourusername.github.io/api-key-repo/apikey.txt')
  .then(response => response.text())
  .then(apiKey => {
    // Use the apiKey here
  });

 

 

 

This way, your API key is stored securely in a private GitHub repository and can be accessed from your Shopify store without exposing it publicly.

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed

Frozbee
Shopify Partner
12 0 1

You are amazing ! 

Thank you very much ! 😁

 

EDIT: You have to subscribe to github to access the page section in the repository menu. But I think that it is worth it for 4USD / month ! 

Frozbee
Shopify Partner
12 0 1

I have subscribed to GitHub, but with mentioning this in my script : https://yourusername.github.io/api-key-repo/apikey.txt people can still inspect the element of my page and access this file where my API is stored even if the reposiory is private.

 

I think I will have to go with a google cloud solution . 

Xipirons
Shopify Partner
136 25 32

You can do something like this to hide the url in liquid code :

 

<script>
{%- if settings.environment == 'production' -%}
  {%- assign api = 'https://imanapi.com' -%}
{%- else -%}
  {%- assign api = 'https://test.imanapi.com' -%}
{%- endif -%}

fetchUserData('{{ api }}/user_info')
  .then(
    //...
  )
</script>

 

Check here : https://ellodave.dev/blog/article/using-environment-variables-in-shopify-themes/

 

 

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed

Frozbee
Shopify Partner
12 0 1

Thanks, I have used Gitlab but now when i run the script I have a CORS issue. I guess i will do it with google cloud functions as you advised 🙂 

Have a great day !

Xipirons
Shopify Partner
136 25 32

Yes, the fetch method is better !

 

Best regards

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed