Developing a web API backend paired with a pure JavaScript frontend, focusing on enhancing

After much consideration, I have decided to go with a pure HTML and JS front end approach where all processing takes place in the client-side browser and the backend simply serves data in JSON, XML, or other formats.

However, I am facing a dilemma.

For authentication, I am using OAuth2 Bearer tokens that are generated when users authenticate using their username and password (for example, during login).

To add an extra layer of security, the clientside application (e.g. a front end web server or mobile app) making requests to the WebAPI needs to include a "client_id" and "client_secret" to ensure authorization to access the backend server.

In the traditional .NET way, I would store the encrypted client ID and key in the web.config file, which my C# (or VB.NET) code would retrieve and send over SSL to the server, keeping the client_id and client_secret hidden from the rendered HTML on the client side browser.

Now, in a purely JavaScript environment, how can I securely protect my client_id, client_secret, or any other sensitive data for that matter?

Thank you

javascriptangularjssecurityasp.net-web-apioauth

Answer №1

Your "secrets" may not be as secure as you think.

When it comes to HTML5/JS code, it's all plain text that can easily be viewed by anyone using a simple text editor. Many people attempt to enhance the security of their code by obfuscating it with javascript minifiers/compressors; refer to this link for more details. This approach is known as Security through Obscurity. However, it's important to note that obfuscation does not equal security. Given enough time and effort, determined individuals can still uncover your secrets. Some may try breaking up their secrets within code modules or spreading them out to deter attacks, but ultimately these methods don't provide solid security measures.

I encountered a similar issue when attempting to use a "shared secret" with the server to hash client requests for added security. Unfortunately, I had to abandon this idea after realizing that keeping the shared secret truly confidential was a challenging task.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Inquiry about Date and Time Selection Tool

I am working on a PHP project that includes two textboxes: one for selecting dates and the other for choosing a specific time. What I need assistance with is disabling any times before the selected date in the second timepicker textbox if today's dat ...

javascriptphpjqueryhtmlajax

Using jQuery to track the status of checkboxes

Changing the checkbox status using the code: $(this).attr("checked", 'checked'); However, when trying to check the checkbox status afterwards, I received the following results: $(this).attr('checked'): "checked" $(this).is(':chec ...

javascriptjquerycheckbox

Deactivate or Conceal certain ng-options within angularjs

I am facing an issue with my dropdown box. I want to add an input box once an option is selected, but then disable/hide/remove that option once the input box is added. And then enable the option again once the input box is removed. Is using the disabled ex ...

angularjs

Husky 5: The Ultimate Gitignore Manager

Last week, a new version of Husky was released, known as Husky 5. I came across an interesting article discussing the features and updates in this release that can be found here. Upon migrating to Husky 5 (), I discovered a new directory named .husky with ...

javascriptnode.jsgitgitignorehusky

After downloading the latest version of NodeJS, why am I seeing this error when trying to create a new React app using npx?

After updating to a newer version of NodeJS, I attempted to create a new React app using the command npx create-react-app my-app. However, I encountered the following error message: Try the new cross-platform PowerShell https://aka.ms/pscore6 PS E:\A ...

javascriptnode.jsreactjsnpm

Issue with accessing session data in $http ajax calls in Angular JS and CodeIgniter technology stack

Currently, I am attempting to utilize codeigniter sessions in order to maintain state between ajax calls. Within one of the urls, I am setting a session using: $this->session->set_userdata("user", "harry"); However, when trying to retrieve the valu ...

phpajaxangularjscodeigniter

A `PUT` request is sent using AJAX, but no data is transferred along with it

When using AJAX, you should have support for the "PUT" and "DELETE" requests. I'm encountering an issue where the server acknowledges the data sent via the "PUT" request, but no parameters are being transmitted. The same problem occurs with the "DELET ...

javascriptajaxjquery

The Owl carousel seems to be malfunctioning as there are no error messages displayed and the div containing it disappears unexpectedly

I'm having an issue with Owl carousel. I've included the necessary owl.carousel.css, owl.carousel.js, and owl.theme.css files. Created a div with the class "owl-carousel", and called the function $(".owl-carousel").owlCarousel();. However, after ...

javascriptcsscarouselowl-carousel

Using Javascript to create session-specific cookies

Is it possible to create session-only cookies using JavaScript that get removed when the browser is closed? Due to limitations, the website I am working on is HTML-only, so server-side scripts cannot be utilized. I came across a method mentioned here: b ...

javascripthtml

What is the process for implementing document.ondrop with Firefox?

I'm experiencing an issue where the document.ondrop function seems to be working in Chrome, but not in Firefox. Here's a link to an example demonstrating the problem: In the example, if you try to drop a file onto the page, it should trigger an ...

javascripthtmlfirefoxgoogle-chrome

Eternal Flow Protractor

Having some trouble with utilizing Protractor for testing my end-to-end application built with Angular. Running into timeouts despite already starting the Selenium server and Chrome driver. ...

seleniumangularjsselenium-chromedriverprotractor

How to intercept a post request from JavaScript in a JavaFX WebView

Exploring JavaFX for the first time has brought me to the intriguing WebView class. I am interested in using it to locally host an HTML5 site as the front end for a desktop application. I have a question regarding ajax requests made from JavaScript within ...

javajavascriptajaxhtmljavafx

Mongoose throwing an UnhandledPromiseRejectionWarning due to an undefined issue

I am encountering a warning in my console while attempting to authenticate users using Mongoose: (node:20114) UnhandledPromiseRejectionWarning: undefined (node:20114) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated ei ...

javascriptnode.jsmongoosepromise

Reply to the inquiry with an outside web address

I am looking to handle a specific request in different ways depending on the referrer. Here is the code snippet: app.get('/test', function(req, res) { if (req.headers.accept.indexOf('image') != -1) { res.sendfile(&a ...

javascriptnode.jsexpress

Is there a way I can implement a user-friendly playlist feature in my object-oriented HTML5 JS audio player that allows users

I have created a functional audio player using HTML5 and Javascript, along with some basic CSS. However, I am looking to enhance it by adding a clickable playlist feature. I want the name of the currently playing audio track to be displayed, and users shou ...

javascriptjqueryhtmlaudioplaylist

Before passing through the map function, I need to execute a specific function

I need to trigger a function every time I want to display a specific section of the page. Here is my code: random() ( randomNumbers && ( randomNumbers.map((item,i) => ( <div>{item}</div> ...

javascriptreactjs

Creating a compact, production-ready code using the webapp generator in Gulp

I recently used the webapp generator to scaffold a project, but encountered an issue where the project only worked when accessed through localhost and not when opening the files directly in the browser with a file scheme. The URL http://localhost:9000/ cor ...

javascriptnode.jsnpmgulpyeoman

Having difficulties in properly connecting faces while UV mapping a cube in Three.js

After successfully applying an image texture to a cube through UV mapping for a photo-sphere viewer, I noticed that thin straight lines are visible where the faces of the cube join. Interestingly, this issue does not occur when splitting texture tiles via ...

javascriptthree.jsuv-mapping

`It appears that chromedriver could not be located on Windows when running protractor/selenium``

After following a tutorial on installing Protractor, I encountered an issue. When I tried to update webdriver-manager, it indicated that selenium standalone and chrome driver were up to date. However, when I attempted to run the Protractor tests, I receive ...

windowsangularjsseleniumselenium-chromedriverprotractor

`The server fails to retrieve parameters passed through an angularJS HTTP GET request,

In my controller.js file, I've come across the following block of code: $http({ method: 'GET', url: '/getGuestList', params: {exhibitorID: 1} }) The purpose of this code is to fetch all the guests belonging to a parti ...

javascriptnode.jsangularjshttp