Web front-end local data storage encryption method, device and equipment

Abstract

The invention relates to the technical field of data encryption, in particular to a Web front-end local data storage encryption method, device and equipment, all user data is encrypted by AES-GCM at a client and then is stored in Local Storage, and even if the data are leaked, an unauthorized user cannot interpret the data content. And the key is only generated and used at the client and is not transmitted through a network, so that the risk that the key is intercepted is reduced. The automatic data cleaning function is achieved through the Web Worker technology, the data are automatically deleted after the expiration time is up, and the risk of long-term data residue is reduced. The method does not depend on a specific back-end technology stack, can be easily integrated into an existing Web application, and is convenient for developers to use. And a developer only needs to instantiate the provided SecureStorageService class, so that the secure storage and automatic management of the data can be simply and quickly realized.

Description

Technical Field

[0001] The present invention relates to the field of data encryption technology, and in particular to a method, device and equipment for encrypting local data storage of a Web front-end. Background Art

[0002] In Web front-end development, local data storage is a basic and critical function. It allows websites to save necessary information on users' browsers, such as user preferences, session status, cached data, etc., so that personalized services and faster loading speeds can be provided when users visit again.

[0003] Initially, Cookies were the only local storage method, but they were limited in size (usually only 4KB) and were included in the HTTP request header each time, which led to inefficiency and security issues. To address these limitations, HTML5 introduced the Web Storage API, which includes two mechanisms:

[0004] 1. LocalStorage- provides about 5MB of storage space and is not sent to the server with HTTP requests. It is used for persistent storage until explicitly deleted.

[0005] 2. SessionStorage-similar to LocalStorage, but its life cycle is limited to the page session, that is, when the user closes the tab or browser, the stored data will be automatically cleared.

[0006] Although Web Storage enhances the possibilities of client-side storage, it does not provide a built-in mechanism for encrypted storage or efficient management of data lifecycle. Therefore, if developers need these features, they need to implement them manually, which is time-consuming and error-prone.

[0007] In the prior art, LocalStorage or IndexedDB (a more complex database system used for client-side storage of structured data) is used in combination with a third-party library to implement encryption and expiration time control.

[0008] While this solution works, it has several drawbacks:

[0009] 1. It requires additional libraries and manual implementation, increasing code complexity.

[0010] 2. It relies on developers to correctly implement encryption and timestamp verification, which is prone to errors.

[0011] Encryption and decryption operations are required for each operation, which may affect performance. Summary of the invention

[0012] In view of this, the purpose of the present invention is to provide a Web front-end local data storage encryption method, device and equipment to overcome the problems existing in the current prior art.

[0013] To achieve the above objectives, the present invention adopts the following technical solutions:

[0014] In a first aspect, the present application provides a method for encrypting local data storage on a Web front end, including:

[0015] Generate encryption keys on the client side;

[0016] Acquire data to be stored, and encrypt the data to be stored using the encryption key;

[0017] The encrypted data and its meta-information are stored in the client storage medium.

[0018] Furthermore, in the above method, the step of generating an encryption key on the client side includes:

[0019] When the SecureStorageService class is constructed, the initEncryptionKey method is called to use the WebCrypto API to generate an encryption key and save it in the class instance.

[0020] Furthermore, in the above method, the step of obtaining the data to be stored and encrypting the data to be stored using the encryption key includes:

[0021] Get the data to be stored, call the store method, and encapsulate the data to be stored into a packaging object containing the data itself and an expiration timestamp;

[0022] The wrapped object containing the data and expiration timestamp is encrypted using the encryptData method in combination with the encryption key and initialization vector.

[0023] Furthermore, in the above method, storing the encrypted data and its meta information in a client storage medium includes:

[0024] The encryption result of the packaging object and the initialization vector are stored in LocalStorage.

[0025] Furthermore, the above method further includes:

[0026] When the load method is called, the encrypted data and initialization vector are obtained from the LocalStorage;

[0027] Decrypt the encrypted data using the decryptData method in conjunction with the encryption key and the initialization vector;

[0028] Check whether the timestamp of the decrypted data has expired. If not, return; otherwise, perform a clear operation.

[0029] Furthermore, the above method further includes:

[0030] Use Web Worker to set up scheduled tasks and periodically send data cleanup signals to the main thread;

[0031] The main thread calls the clearExpiredData method to traverse LocalStorage according to the data clearing signal to determine whether each data item is expired;

[0032] If it is not expired, return; otherwise, perform the cleanup operation.

[0033] In a second aspect, the present application provides a Web front-end local data storage encryption device, comprising:

[0034] A key generation module, used to generate encryption keys on the client side;

[0035] A data encryption module, used to obtain data to be stored, and encrypt the data to be stored using the encryption key;

[0036] The data storage module is used to store the encrypted data and its meta information into the client storage medium.

[0037] In a third aspect, the present application provides a web front-end local data storage encryption device, including a processor and a memory, wherein the processor is connected to the memory:

[0038] Wherein, the processor is used to call and execute the program stored in the memory;

[0039] The memory is used to store the program, and the program is at least used to execute any one of the above Web front-end local data storage encryption methods.

[0040] The beneficial effects of the present invention are:

[0041] All user data of this application is encrypted by AES-GCM on the client side before being stored in LocalStorage. Even in the event of a data leak, unauthorized users cannot decipher the data content. The key is only generated and used on the client side and is not transmitted over the network, reducing the risk of the key being intercepted. The automatic data cleanup function is implemented through Web Worker technology. When the data reaches the expiration time, it will be automatically deleted, reducing the risk of long-term data retention. It does not rely on a specific backend technology stack and is easy to integrate into existing Web applications, making it easy for developers to use. Developers only need to instantiate the provided SecureStorageService class to quickly and easily implement secure storage and automatic management of data. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0043] Figure 1 This is a flowchart provided by an embodiment of a method for encrypting local data storage on a Web front end of the present invention;

[0044] Figure 2 It is a structural diagram provided by an embodiment of a Web front-end local data storage encryption device of the present invention;

[0045] Figure 3 It is a structural diagram provided by an embodiment of a Web front-end local data storage encryption device of the present invention. DETAILED DESCRIPTION

[0046] To make the purpose, technical solution and advantages of the present invention clearer, the technical solution of the present invention will be described in detail below. Obviously, the described embodiments are only part of the embodiments of the present invention, rather than all the embodiments. Based on the embodiments of the present invention, all other implementation methods obtained by ordinary technicians in this field without creative work belong to the scope of protection of the present invention.

[0047] Figure 1 This is a flowchart provided by an embodiment of a method for encrypting local data storage on a Web front end of the present invention. Figure 1 , this embodiment may include the following steps:

[0048] S1. Generate encryption keys on the client;

[0049] S2. Obtain the data to be stored, and encrypt the data to be stored using an encryption key;

[0050] S3. Store the encrypted data and its meta information into the client storage medium.

[0051] It is understandable that all user data of this application is stored in LocalStorage after being encrypted by AES-GCM on the client side. Even in the event of a data leak, unauthorized users cannot interpret the data content. The key is only generated and used on the client side and is not transmitted over the network, reducing the risk of the key being intercepted. The automatic data cleanup function is implemented through Web Worker technology. When the data reaches the expiration time, it will be automatically deleted, reducing the risk of long-term data residue. It does not rely on a specific backend technology stack and is easy to integrate into existing Web applications, making it easy for developers to use. Developers only need to instantiate the provided SecureStorageService class to quickly and easily implement secure storage and automatic management of data.

[0052] Preferably, step S1 comprises:

[0053] When the SecureStorageService class is constructed, the initEncryptionKey method is called to use the WebCrypto API to generate an encryption key and save it in the class instance.

[0054] It is understandable that encryption keys are generated on the client side through the Web Crypto API, avoiding the risk of keys being transmitted over the network.

[0055] Preferably, step S2 comprises:

[0056] Get the data to be stored, call the store method, and encapsulate the data to be stored into a wrapper object containing the data itself and an expiration timestamp;

[0057] Use the encryptData method to encrypt a wrapped object containing the data and an expiration timestamp, combined with an encryption key and an initialization vector.

[0058] Preferably, step S3 includes:

[0059] Store the encryption result and initialization vector of the wrapped object in LocalStorage.

[0060] It is understandable that user data is encrypted using the AES-GCM algorithm before being stored in LocalStorage to ensure the confidentiality of the stored data.

[0061] Before storing data, first check whether the encryption key has been loaded; if not, reinitialize the key. When the store method is called, the data is encapsulated into an object containing the data itself and an expiration timestamp.

[0062] Encrypt the data object using the encryptData method, combined with the encryption key and initialization vector, to encrypt the wrapper object containing the data and the expiration timestamp.

[0063] The encryption result and initialization vector are stored in LocalStorage.

[0064] Preferably, it also includes:

[0065] When the load method is called, the encrypted data and initialization vector are obtained from LocalStorage;

[0066] Use the decryptData method to decrypt the encrypted data with the encryption key and initialization vector;

[0067] Check whether the timestamp of the decrypted data has expired. If not, return; otherwise, perform a clear operation.

[0068] It is understandable that during the reading process, the original data is first decrypted to obtain the original data, and then it is determined whether it is expired. If it is not expired, it is provided to the user, and if it is expired, it is automatically deleted.

[0069] When the load method is called, the encrypted data and initialization vector are obtained from LocalStorage.

[0070] Use the decryptData method with the encryption key and initialization vector to decrypt the encrypted data. If the encryption key cannot be loaded, start the initialization process to obtain the encryption key.

[0071] Decrypt the data and check the expiration timestamp. If it is not expired, return it, otherwise perform the clearing operation.

[0072] Preferably, it also includes:

[0073] Use Web Worker to set up scheduled tasks and periodically send data cleanup signals to the main thread;

[0074] The main thread calls the clearExpiredData method to traverse LocalStorage according to the data cleanup signal to determine whether each data item is expired;

[0075] If it is not expired, return; otherwise, perform the cleanup operation.

[0076] It is understandable that background tasks are implemented through Web Worker technology, and cleanup instructions are regularly sent to the main thread, which completes the actual expired data cleanup work.

[0077] Use Web Worker to set up scheduled tasks and periodically send data cleanup signals to the main thread.

[0078] After receiving the cleanup request, the main thread calls the clearExpiredData method to traverse LocalStorage, determine whether each data item is expired, and clean it up.

[0079] The present invention also provides a Web front-end local data storage encryption device for implementing the above method embodiment. Figure 2 This is a schematic diagram of a structure provided by an embodiment of a Web front-end local data storage encryption device of the present invention. Figure 2 As shown, this embodiment includes:

[0080] The key generation module 1 is used to generate an encryption key on the client;

[0081] Data encryption module 2, used to obtain data to be stored and encrypt the data to be stored using an encryption key;

[0082] The data storage module 3 is used to store the encrypted data and its meta information into the client storage medium.

[0083] Regarding the device in the above embodiment, the specific manner in which each module performs operations has been described in detail in the embodiment of the method, and will not be elaborated here.

[0084] The present invention also provides a Web front-end local data storage encryption device for implementing the above method embodiment. Figure 3 This is a schematic diagram of a structure provided by an embodiment of a Web front-end local data storage encryption device of the present invention. Figure 3 As shown, the Web front-end local data storage encryption device of this embodiment includes a processor 21 and a memory 22, and the processor 21 is connected to the memory 22. The processor 21 is used to call and execute the program stored in the memory 22; the memory 22 is used to store the program, and the program is at least used to execute the Web front-end local data storage encryption method in the above embodiment.

[0085] The specific implementation scheme of the Web front-end local data storage encryption device provided in the embodiment of the present application can refer to the implementation scheme of the Web front-end local data storage encryption method in any of the above embodiments, which will not be repeated here.

[0086] It can be understood that the same or similar parts of the above embodiments can be referenced to each other, and the contents not described in detail in some embodiments can refer to the same or similar contents in other embodiments.

[0087] It should be noted that, in the description of the present invention, the terms "first", "second", etc. are only used for descriptive purposes and cannot be understood as indicating or implying relative importance. In addition, in the description of the present invention, unless otherwise specified, the meaning of "plurality" refers to at least two.

[0088] Any process or method description in a flowchart or otherwise described herein may be understood to represent a module, segment or portion of code that includes one or more executable instructions for implementing the steps of a specific logical function or process, and the scope of the preferred embodiments of the present invention includes alternative implementations in which functions may not be performed in the order shown or discussed, including performing functions in a substantially simultaneous manner or in the reverse order depending on the functions involved, which should be understood by those skilled in the art to which the embodiments of the present invention belong.

[0089] It should be understood that the various parts of the present invention can be implemented by hardware, software, firmware or a combination thereof. In the above-mentioned embodiments, a plurality of steps or methods can be implemented by software or firmware stored in a memory and executed by a suitable instruction execution system. For example, if implemented by hardware, as in another embodiment, it can be implemented by any one of the following technologies known in the art or their combination: a discrete logic circuit having a logic gate circuit for implementing a logic function for a data signal, a dedicated integrated circuit having a suitable combination of logic gate circuits, a programmable gate array (PGA), a field programmable gate array (FPGA), etc.

[0090] A person skilled in the art may understand that all or part of the steps in the method for implementing the above-mentioned embodiment may be completed by instructing related hardware through a program, and the program may be stored in a computer-readable storage medium, which, when executed, includes one or a combination of the steps of the method embodiment.

[0091] In addition, each functional unit in each embodiment of the present invention may be integrated into a processing module, or each unit may exist physically separately, or two or more units may be integrated into one module. The above-mentioned integrated module may be implemented in the form of hardware or in the form of a software functional module. If the integrated module is implemented in the form of a software functional module and sold or used as an independent product, it may also be stored in a computer-readable storage medium.

[0092] The storage medium mentioned above can be a read-only memory, a magnetic disk or an optical disk, etc.

[0093] In the description of this specification, the description with reference to the terms "one embodiment", "some embodiments", "examples", "specific examples", or "some examples" means that the specific features, structures, materials or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the present invention. In this specification, the schematic representation of the above terms does not necessarily refer to the same embodiment or example. Moreover, the specific features, structures, materials or characteristics described may be combined in any one or more embodiments or examples in a suitable manner.

[0094] Although the embodiments of the present invention have been shown and described above, it is to be understood that the above embodiments are exemplary and are not to be construed as limitations of the present invention. A person skilled in the art may change, modify, replace and vary the above embodiments within the scope of the present invention.

Claims

1. A method for encrypting local data storage on a Web front end, characterized in that: include: Generate encryption keys on the client side; Acquire data to be stored, and encrypt the data to be stored using the encryption key; The encrypted data and its meta-information are stored in the client storage medium.

2. The method according to claim 1, characterized in that The step of generating an encryption key on the client side includes: When the SecureStorageService class is constructed, the initEncryptionKey method is called to use the Web CryptoAPI to generate an encryption key and save it in the class instance.

3. The method according to claim 2, characterized in that The obtaining the data to be stored and encrypting the data to be stored using the encryption key includes: Get the data to be stored, call the store method, and encapsulate the data to be stored into a packaging object containing the data itself and an expiration timestamp; The wrapped object containing the data and expiration timestamp is encrypted using the encryptData method in combination with the encryption key and initialization vector.

4. The method according to claim 3, characterized in that The step of storing the encrypted data and its meta information in a client storage medium includes: The encryption result of the packaging object and the initialization vector are stored in LocalStorage.

5. The method according to claim 4, characterized in that Also includes: When the load method is called, the encrypted data and initialization vector are obtained from the LocalStorage; Decrypt the encrypted data using the decryptData method in conjunction with the encryption key and the initialization vector; Check whether the timestamp of the decrypted data has expired. If not, return; otherwise, perform a clear operation.

6. The method according to claim 5, characterized in that Also includes: Use Web Worker to set up scheduled tasks and periodically send data cleanup signals to the main thread; The main thread calls the clearExpiredData method to traverse LocalStorage according to the data clearing signal to determine whether each data item is expired; If it is not expired, it returns; otherwise, it performs a cleanup operation.

7. A Web front-end local data storage encryption device, characterized in that: include: A key generation module, used to generate encryption keys on the client side; A data encryption module, used to obtain data to be stored, and encrypt the data to be stored using the encryption key; The data storage module is used to store the encrypted data and its meta information into the client storage medium.

8. A Web front-end local data storage encryption device, characterized in that: The invention comprises a processor and a memory, wherein the processor is connected to the memory: Wherein, the processor is used to call and execute the program stored in the memory; The memory is used to store the program, and the program is at least used to execute the Web front-end local data storage encryption method described in any one of claims 1-6.

Images