Obscuring JavaScript code to protect API credentials
Feb 07, 2022
I need to create a button that runs JavaScript that makes an API call. I have this working, but it exposes the authentication credentials to anyone with enough savvy to use the browser developer tools, which is not a good thing, security-wise.
I've found some things online about how to do this with a JavaScript project, in general, by using environment variables. (For example, https://itnext.io/how-to-use-environment-variables-in-node-js-cb2ef0e9574a and https://stackoverflow.com/questions/68761653/how-to-make-a-env-file-in-vanilla-js-and-hide-tokens-in-them.)
What isn't clear to me is, where do I put the .env file, and if I use requirejs, where do I put the requirejs script and where do I include it (with a <script src="..."> tag)? (I think it's pretty clear that I'll need to modify the output files before I zip it up.)
I'm brand new to Storyline and to xAPI/SCORM but I've learned a lot in a short time. Any help would be greatly appreciated.
I've found some things online about how to do this with a JavaScript project, in general, by using environment variables. (For example, https://itnext.io/how-to-use-environment-variables-in-node-js-cb2ef0e9574a and https://stackoverflow.com/questions/68761653/how-to-make-a-env-file-in-vanilla-js-and-hide-tokens-in-them.)
What isn't clear to me is, where do I put the .env file, and if I use requirejs, where do I put the requirejs script and where do I include it (with a <script src="..."> tag)? (I think it's pretty clear that I'll need to modify the output files before I zip it up.)
I'm brand new to Storyline and to xAPI/SCORM but I've learned a lot in a short time. Any help would be greatly appreciated.
2 Replies
Requirejs uses Modular approach to Javascript, so you need to 'import' and 'export' parts of your code to reuse it on another spot. Alas does Storyline as is not support Modules and 'import' and 'export' statements. Best is to forget about that and use the WebObject approach to load your needed Javascript libraries and then obsfuscate whatever is needed.
Here is a simple solution for obfuscating and deobsfuscating your values and strings in Vanille Javascript in Storyline.
btoa('Some text'); // U29tZSB0ZXh0
atob('U29tZSB0ZXh0'); // Some text
The
btoa()method creates a Base64-encoded ASCII string from a binary string (i.e., aStringobject in which each character in the string is treated as a byte of binary data).You can use this method to encode data which may otherwise cause communication problems, transmit it, then use the
atob()method to decode the data again. For example, you can encode control characters such as ASCII values 0 through 31.https://developer.mozilla.org/en-US/docs/Web/API/btoa
Its not completely secure but at least somewhat more safe.
I think I get this. Thanks, I'll see if I can get the folk on the API side to work with me to make that work.