Shulou(Shulou.com)05/31 Report--

This article is about why sensitive information should not be saved in the JS file, the editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article. Let's take a look at it with the editor.

Storing sensitive data in JavaScript files is not only a wrong practice, but also a very dangerous behavior, as we have known for a long time. And the reason is very simple, we can assume that you dynamically generate a JavaScript file containing the API key for your users:

ApiCall= function (type, api_key, data) {...} var api_key = '1391f6bd2f6fe8dcafb847e0615e5b29'var profileInfo = apiCall (' getProfile', api_key, 'all')

As in the above example, every time you create a variable in the global scope, it means that any part of the code in the site can access the variable, including other scripts you host.

Why is it obviously not safe to do so?

Why shouldn't developers embed sensitive information in JavaScript files? For many reasons, for inexperienced developers, passing data through JavaScript files is a very easy way, because you can generate and store the data on the server side, and then pass it to the client code, and this can also save some of the requests sent to the server side. However, one of the factors we usually ignore at this time is browser extensions, sometimes they need to inject script tags directly into DOM in order to use the same window object, because content scripts alone may not be able to achieve the desired functionality.

Is there any way to protect variables?

We've discussed the global scope before, and for JavaScript in browsers, a global variable is very useful for window objects. But in ECMA Script5, there is an additional scope, that is, the function scope. This means that if we declare a variable inside a function using the var keyword, it is not a global variable. Another scope, the block scope, was introduced in ECMA Script 6, where variables are declared using the const and let keywords.

These two keywords can be used to declare variables in block scope, but we cannot modify the value of the const variable, and if we do not declare the variable with these keywords, or if we use the var variable outside the function, we are creating a global variable, which is not what we often want to happen.

"use strict"

To prevent you from accidentally creating global variables, one of the effective ways is to activate the restricted mode, you can add the string "use strict" at the beginning of a file or function to achieve this function. Next, if you haven't declared this variable before, you won't be able to use it.

"use strict"; var test1 = 'arka' / / valid test2=' kap errors'/ / reference error

We can use this technique in IIFE (immediately called function expressions). IIFE can be used to create a function scope, but they immediately execute the function body, such as:

(function () {"use strict"; / / declare the variable var privateVar = 'Secret value';} within the scope of the function) () console.log (privateVar) / / reference error

At first glance, this may seem like an effective way to create variables whose contents cannot be read out of scope, but they are not. Although IIFE is an effective way to prevent global namespaces from being interfered with, they don't really protect your data content.

Read sensitive data from private variables

In fact, we can hardly guarantee that the contents of private variables are really "private". There are a lot of reasons, and we'll test some of them next, which is incomplete, but it's enough to prove why we can't store sensitive data in JavaScript files.

Override native function

In the following example, we will use an api key to send the request to the server. Therefore, we need to send this key over the network and in the form of clear text data, and there are not many other options in JavaScript. Suppose our code uses the fetch () function:

Window.fetch= (url, options) = > {console.log (`URL: ${url}, data:$ {options.body} `);}; / EXTERNAL SCRIPT START (function () {"use strict"; var api_key= "1391f6bd2f6fe8dcafb847e0615e5b29" fetch ('/ api/v1/getusers', {method: "POST", body: "api_key=" + api_key});}) () / / EXTERNAL SCRIPT END

As you can see, we can directly rewrite the fetch () function and steal the API key. The only premise is that we need to include an external script after our script block. In this example, we just console.log the API key on the console, but in practice we also need to send it to our server.

Define Setter and Getter

Private variables may contain not only strings, but also objects or arrays. Objects can have different properties, and in most cases, you can set and read their values directly, but JavaScript also supports many other interesting features. For example, you can execute another function when the property of an object is set or accessed, which can be done using the _ _ defineSetter__ and _ _ defineGetter__ functions. If we use the _ _ defineSetter__ function in the prototype of the object constructor, we can output all the values assigned to the target object's properties.

Object.prototype.__defineSetter__ ('api_key',function (value) {console.log (value); return this._api_key = value;}); Object.prototype.__defineGetter__ (' api_key',function () {return this._api_key;}) / EXTERNAL SCRIPT START (function () {"use strict" let options = {} options.api_key = "1391f6bd2f6fe8dcafb847e0615e5b29" options.name = "Alice" options.endpoint = "get_user_data" anotherAPICall (options);}) () / / EXTERNAL SCRIPT END

If an API key is assigned to an object property, we can access it directly in setter. On the other hand, getter can also ensure that our subsequent code is executed correctly.

Custom enumerator

Arrays are certainly a factor that cannot be ignored. If for loops are used in the code to traverse array values, we can define a custom enumerator in the array constructor prototype, which not only allows us to access the contents of the array, but also does not affect the functionality of the native function.

Array.prototype [Symbol.iterator] = function () {let arr = this; let index = 0; console.log (arr) return {next: function () {return {value: arr [index++], done: index > arr.length} / EXTERNAL SCRIPT START (function () {let secretArray = ["this", "contains", "an", "API", "key"]; for (let element of secretArray) {doSomething (element);}}) () / EXTERNAL SCRIPT END above is why sensitive information should not be saved in JS files. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.