Secure approach to receive and analyse user input in theme app extension liquid

Solved

Secure approach to receive and analyse user input in theme app extension liquid

peterpot20
Shopify Partner
22 2 3

I have a theme app extension to receive user input and perform some calculation on those inputs. My current approach is to create variables in the theme app extension javascript asset files to store the values users input into the input fields of the liquid template. However, this isn't really secure as all values are in the front end JavaScript file and using the browser's web developer console we can see all the numbers. 

 

What would be a better approach to record these inputs?

Accepted Solution (1)

Liam
Shopify Staff
2873 312 821

This is an accepted solution.

If you are dealing with sensitive data or calculations that you do not want to expose to the user's browser, you should consider moving those operations to the server-side. Here are some options you can consider:

 

1. Create a form in your Liquid template that sends the user input to your server when submitted. On the server, you can perform the necessary calculations and return the results. This ensures the calculations are done securely on the server-side and not exposed to the user.

2. If you want a smoother user experience without page reloads, you can use AJAX to send the user's input to your server and receive the results. You can then update the page with the results using JavaScript.

3. You can use a Shopify App Proxy to send AJAX requests from the client-side to your server. This allows you to perform server-side operations and return the results to the client-side securely.

 

I'd recommend looking into the above options to see if they'll work for your use case. 

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

View solution in original post

Replies 2 (2)

Liam
Shopify Staff
2873 312 821

This is an accepted solution.

If you are dealing with sensitive data or calculations that you do not want to expose to the user's browser, you should consider moving those operations to the server-side. Here are some options you can consider:

 

1. Create a form in your Liquid template that sends the user input to your server when submitted. On the server, you can perform the necessary calculations and return the results. This ensures the calculations are done securely on the server-side and not exposed to the user.

2. If you want a smoother user experience without page reloads, you can use AJAX to send the user's input to your server and receive the results. You can then update the page with the results using JavaScript.

3. You can use a Shopify App Proxy to send AJAX requests from the client-side to your server. This allows you to perform server-side operations and return the results to the client-side securely.

 

I'd recommend looking into the above options to see if they'll work for your use case. 

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

peterpot20
Shopify Partner
22 2 3

Thanks for the suggestions. I will explore the form approach. I have another question. If the values are stored inside the JavaScript file, will users be able to use the co