Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
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:
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
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:
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
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,
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 :
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
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 !
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 .
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
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 !
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
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024