Secure Your Knockout JS Applications with These Development Tools

In my MVC / SPA application, I have implemented several knockout functions where variables are assigned to allow them to be called from other functions. This setup enables updating elements on the page and making server calls when necessary.

All primary keys in the database are integers.

The data and models originate from the MVC Page Model, which is converted to JSON and mapped using the fromJSON utility.

var myFunction1ViewModel;
var myFunction2ViewModel;

var Function1ViewModel = function () {
    var self = this;
    self.data= ko.mapping.fromJSON($("#serverData1").val());
    self.doSomething = function(){
       //call server;

       if(typeof myFunction2ViewModel != 'undefined'){
         myFunction2ViewModel.doSomethingElse();
       }
    }
};

var Function2ViewModel = function () {
    var self = this;
    self.data= ko.mapping.fromJSON($("#serverData2").val());
    self.doSomethingElse = function(){
        //call server;
    }
};

function initFunction1() {

    myFunction1ViewModel= new Function1ViewModel();
    ko.cleanNode($('.panel-content')[0]);
    ko.applyBindings(myFunction1ViewModel, $('.panel-content')[0]);


}

function initFunction2() {

    myFunction2ViewModel= new Function2ViewModel();
    ko.cleanNode($('.panel-content2')[0]);
    ko.applyBindings(myFunction2ViewModel, $('.panel-content2')[0]);

}


$(document).ready(function(){
    initFunction1();
    initFunction2(); 
})

During my exploration of devtools, I accidentally typed:

myFunction2ViewModel.data.PrimaryKeyId(99999999999)

This action triggered a change in the browser which led to a server call sending the edited primary key to the server.

My main concern now is how to prevent such actions in the future. Although I currently perform checks to ensure that only allowed objects are edited, handling every property being sent back to the server for edit permissions can be challenging due to the complexity and volume of some of my models.

I would greatly appreciate any insights or suggestions on this matter.

Thank you,

James

Answer №1

This inquiry has little relevance to Knockoutjs.

It's crucial to understand that the client cannot always be trusted, without exception.

Regardless of the level of security measures implemented on the client side, all requests must undergo proper authorization. While you may attempt to prevent unauthorized access through developer tools, individuals can easily bypass these restrictions and interact directly with your API, potentially sending malicious requests.

In light of this, it is indeed necessary to meticulously validate every property received by the server, especially if employing property-level authorization. It might be worthwhile to invest time in integrating a role-based hierarchical authorization framework within your backend system if such measures are not already in place.

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

Issue with Axios response processing

I need to upload a new document into a database using Axios in React. I have successfully implemented the functionality, but I also want to display a message in the console saying "New post has been inserted". This is my front end code: newTodo(todo){ ax ...

Possibly include an example or a step-by-step guide to provide additional value and make the content more

Enhance the main array by adding the second and third arrays as properties http://jsfiddle.net/eRj9V/ var main = [{ 'id': 1, //'second':[ // {'something':'here'}, //{'something':' ...

Logging in Angular can be accomplished using "console.log"

I am experiencing an issue where I cannot see any console logs and I'm unsure if the cookie is being entered into my controller from the HTML page. var addPartyApp = angular.module('addPartyApp',['ngCookies']); addPartyApp.co ...

What is the method for utilizing tsx within the Vue Composition setup function?

As I write tsx in @vue/composition-api setup() function, like so: <script lang="tsx"> import { defineComponent,} from '@vue/composition-api'; export defineComponent({ setup() { const foo = { bar: 1 baz: render() ...

Is Consistency Possible with CSS Transition Direction?

Take a look at this example: https://codepen.io/jon424/pen/XWzGNLe In the provided code snippet, there is a button that can toggle the visibility of an image. When clicked, the image disappears from bottom to top and reappears when clicked again. The use ...

Adding values separated by semicolons in JavaScript

I am facing an issue with a column named priclmdetailli55 in a file. This column can have no value, one value, or two values separated by a semicolon. I want to sum the values if they are separated by a semicolon. This is my current approach: var str = ...

Dynamic Pagination with MUI Counting

I'm currently utilizing mui react for my current project. Within the Pagination component, I am required to input the count in order to display the total number of pages. For example, with a total of 27 products, and each page displaying 20 products ...

Contrast between the act of passing arguments and using apply with arguments

I have an important backbone collection that utilizes a save mixin to perform Bulk save operations (as Backbone does not natively support this feature). // Example usage of Cars collection define([ 'Car', 'BulkSave' ], function(Car ...

Uncovering the Reasons Behind Multiple Accesses to a ReactJS Page

The code snippet provided shows an issue with accessing the /profile page. Upon accessing the page, there are 6 POST requests sent to the backend. However, after implementing the useEffect hook, while the page is still accessed 6 times, now only 2 POST req ...

Keep your HTML columns and tables up to date with the latest changes in your database by harnessing the power of Ajax

As a newcomer to using Ajax and javascript, I have an HTML page that displays the shopping status of customers. I am looking to incorporate Ajax and jquery functionality to update the database and refresh the webpage without actually reloading it whenever ...

Ways to cycle through sets of listed data in isolation from one another

Does anyone know how I can create a simple toggle for 3 list groups? I want each group to only have 1 active item at a time, totaling 3 active items (one per group). I've tried some code, but it's only deactivating the active class on the last l ...

Continue scrolling down until the bottom of the page touches the top

I am currently working on a portfolio project where I want the page to scroll all the way down until the footer image aligns perfectly with the top image. This will create a seamless merging of the header and footer images. Despite searching extensively o ...

Creating a data structure using jQuery/JavaScript when submitting a form - a guide

Currently, I am attempting to gather form input values and organize them into an array of objects that will then be sent to MongoDB. However, I am facing difficulty in figuring out how to include an array within the objects (refer to the comment in the cod ...

JavaScript identifier used for a widget within the Odoo platform

Suppose you have two widget in a view. After performing an action on the first widget, you need to update the second widget by calling display_field. How can you determine the identifier for the second widget? For instance, in the extended definition of a ...

Problem encountered when trying to show the Jquery Ajax response on an HTML page

I'm facing a challenge with loading a page that needs to display values with dynamic pagination. To retrieve these values, I am making a REST call which returns a JSON object. Although I can see the JSON output in the browser console, I am unable to d ...

Using React-Router v6 to pass parameters with React

My App.js file contains all the Routes declarations: function App() { return ( <div className="App"> <Routes> <Route path="/"> <Route index element={<Homepage />} /> ...

Upload Request Failure Due to Drag and Drop Functionality in HTML5

Recently, I implemented a drag and drop upload form on a webpage. The 'normal' file input functioned perfectly as expected when prompting for a file to be selected. However, I encountered an issue where the POST request was missing the file infor ...

What is the best way to trigger a refresh in Next.js React component?

Current Tech Stack Versions Next.js : 14.0.3 React : 18.0.2 // TestClientComponent.tsx "use client"; import { IResident } from "@interface/resident.types"; import { getResidents } from "@models/resident.service"; import { So ...

Is there a way to set a default value for the map function?

Currently utilizing React.js with the following code snippet: myArray.map(variable=>({value: variable.value, label: variable.label})) It's working well for the most part, but occasionally encountering this issue: TypeError : myArray is null Any s ...

Troubleshooting the issues with testing AngularJS using Jasmine and Karma, particularly when $httpBackend is

I'm currently in the process of writing unit tests for my Angular app using Jasmine with Karma. One of the functionalities of the app is to make a call to the GitHub API, retrieve a user's repository names, and store them in an array. Although I& ...