Pass parameters securely with script tag

JavaScript
1

I need to pass a simple JSON/associative array to a JavaScript file. In this particular scenario, the JavaScript file needs to access an API Key thats passed into the file from the original JavaScript file that adds this script to the DOM. Since the API doesn’t offer a public key I can’t just add a data-attribute to the script tag because it would be security issue.

// Data to send
data = '[
  {"firstName":"John"},
  {"key":"Apikey"},
]';

// Adding the Script
var Script = d.createElement("script");
Script.setAttribute('src','https://myscript.com');
var Footer = document.getElementsByTagName('footer');
Footer[0].appendChild(Script);

// Need to access data.key now in my script that I added?
2

I just used a global variable. That way it can’t be accessed by the browser console. If anyone knows a more secure way then by all means share. The online search I found didn’t return much.

Found this article on Stack Overflow The accepted solution is using some kind of init function, but I am unfamiliar with this functionality in JavaScript. Any thoughts?

3

Using the Stackoverflow example:

parameter.js file

var MYLIBRARY = (function () {
    var _args = {}; // private

    return {
        init: function (Args) {
            _args = Args;
            // some other initialising
        },
        helloWorld: function () {
            alert('Hello ' + _args[0].firstName + '.You can use the api key [' + _args[1].key + ']');

        }
    };
}());

The html file

<html>

<head>Test</head>

<body>
    <b>Hello Zensei</b>
    <script type="text/javascript" src="js/parameter.js"></script>
    <script type="text/javascript">
        data = [
            { "firstName": "John" },
            { "key": "Apikey" },
        ];

        MYLIBRARY.init(data);
        MYLIBRARY.helloWorld();
    </script>
</body>

</html>
4

I have never seen this syntax before in JavaScript.

In particular return { init: function (Args) {

Kind of seems overly complicated. Could you share any insights into this line of code or any resources as to how I might go about learning more? What does init do?

5

In my opinion people seem to be making things overly complicated. Other languages such as C# also have some very confusing syntax. And in my opinion there are few if any articles that clarify the confusion.

function expression - JavaScript | MDN might help. See especially:

Note: An expression statement cannot begin with the keyword function to avoid ambiguity with a function declaration.

Also see:

6

But this way you still have your data exposed somewhere in the JS… in your case, in the script that appends the new script to the DOM. If you want to keep your API protected, you just can’t use it in your client-side JS.

Instead, you might implement a proxy endpoint in your backend that forwards the client requests to the API, and just adds the API (likely in the form of an Authorization header). This way, the key will stay entirely invisible to the frontend. The proxy endpoint can then be secured with an appropriate CORS configuration.

2 Likes
7

It’s called the module reveal pattern and was commonly used prior to the introduction of module imports and exports in JS. It relies on the use of closures to create private variables.

2 Likes
9

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.