Today, JS (JavaScript) is the main and important part of our modern web applications that provide interactive UI to the logic of full -fledged server. And now the attackers are going to the picture, and regardless of weakness in JS, the attackers will use the benefits of it and disrupt the flow of JS’s beautiful empire. Now, in this article, I’m going to tell you how to assure you some cyber attacks and the developer’s applications, now let’s start.
Magecart attacks
What is this Magecart attack?
The attackers will inject the JS code to e-commerce websites for bad purposes, and they will steal the details of payment, credit card numbers and CVVs from payment pages. They disturb third -party packages using malicious JS code and receive the user’s sensitive data. The real examples of this attack.
“The British Airways violation in 2018 resulted in the stolen of 380,000 payment records due to a Magecart attack.“
“Newgg Breach (2018) – 50m+ Risk Visitors“ and so on…
Oh, how to prevent it?
How to detect Magecart Attack?
SRI (Lower Resource Integrity)
SRI is a safety feature that helps protect your website from malicious or dangerous external sources (such as third -party Javascript or CSS files). It ensures that the content you upload is not tampering by verifying the integrity of the file. cryptographic hash.
How do we do SRI in our code?
This is a code we should add to our code base
src – The Url of the external concrete.
integrity – Cryptographic mix of file content.
crossorigin="anonymous" – Allows the user to install from a different origin without sending Identity Information.
We added this, but what happened now?
Every time you see this line in our code, this attribute accounts and compares our browser’s own mix and compares the value provided) Now contains some mixed value (eg from any of the-SHA-256, SHA-384 or Sha-512). If you want to learn more about SRI, there are official SRI connections below.
https://deeloper.mozilla.org/en-us/docs/web/security/subresource_integrity
Sri hash generator – https://www.srihash.org/
CSP (Content Security Policy)
The CSP is also a security feature that helps prevent inter -site script (XSS), code injection and other malicious content attacks (such as JavaScript, CSS, Pictures, etc.).
How to make code level?
Let me give the nodejs example
app.get('/', (req, res) => {
res.setHeader(
"Content-Security-Policy", // This is our main CSP Header Setting
"default-src 'self'; script-src 'self' https://apis.example.com;"
);
res.send('Hello, CSP is active!');
});
default-src 'self'– Settings, styles, pictures, etc. All resources such as. To install the same origin. And it will block other external areas.script-src 'self' https://apis.example.com
How can we control it like a CSP title?
→ Open the developer vehicle
→ Network Tab
→ Renew the page and check the response headlines
You will find this “Content-Security Policy”Like the screenshot below.
Malicious NPM Packages
Malicious NPM packages mean malicious software packages installed on the world’s largest store, NPM (knot package manager) portal for our Javascript libraries. Which packages will now do? It acts as a legitimate tool, but it contains very harmful malicious code that affects our system.
Now, what do we do as a developer? We will upload this and after loading, the attackers enter the picture and API switches, passwords, information about the bank and so on. They will steal our sensitive data such as.
This is good but a question: How do the attackers spread these malicious packages?
They use some techniques to spread a good question for this, here is the most famous technique.
Spelling error
Which attackers will do in this technique? They will target NPM’s famous packages and create the same package with incorrectly written or alternative names, and our innocent developers accidentally install this package after accidentally install Boom. The pockets of the attackers are full of valuable data.
Let me give some examples.
|
Main package |
Malicious package |
|---|---|
|
Http-server |
httpserver |
|
lodash |
restaurant |
Oh, what do we need to do as a very dangerous but as a developer?
Yes, some points we need to keep in mind.
- Before installing any package, we need to check if it has the correct writing and what to check the picture or what. With the use of the following example
npm view express
It will give all the details of this package
2. As a developer, we must always use the following command to check any security vulnerability and Typeosquatting.
npm audit
The security gap of our project will scan.
SITE SET FILE (XSS)
This is the most famous and most common vulnerability of the Web. Here, the attackers will inject the malicious JS code to the website, and the script will work in the browser and the attackers will steal our data.
How does this work?
-
The main thing is that the attacker will inject code into our website, but how?
Attackers will use different ways to do it like Comment Box, URL Parameters, form fields, and so on. -
This scenario will perform some harmful actions such as stealing cookies, viewing fake forms, re -guiding the website, registration of key strokes.
Great, but how many attacks are there?
There are 3 types of attacks XSS
Reflected xss
Let’s take a good example in Nodejs
Whenever the user uses the search, then the user will use the following user’s user
Url –
Now the user will see this output
“Search Results for: helloWorld”
This is the basic flow and we have no confirmation Search Text But now if the attacker knows this, if they know what to do, they will hit the scenario through such money,
The attackers will hit this url =http://localhost:3000/search?searchText=
Now, the page will create because of this malicious script and this will be out
Oh, then how is it protected?
We will take the nodejs example to solve this
There is a package namedescape-htmlWe will use it and our updated code
So what is the difference on the output here?
Good question, let me output
Now, the attacker will use this URL according to the flow above
http://localhost:3000/search?searchText=
Because of us npmIt will remove the special characters and the output will be below and will not show that you will only show text on the page page, but will not do anything.
Search Results for:
Stored xss
In this attack, the attackers add a malicious JS code to the comments section or form field and this code stores the user’s data on the attacker’s server.
Let’s get an example in Nodejs
In our code, there is no verification and we store our DB to DB without verification, so it will be shown like this,
Now, if the normal user adds comments – “Good blog Post!” Then he will store it to DB and show it like this on the page.
Good blog Post!
However, if the attacker will add the interpretation – “” Then it will show this on the page
And when the user always displays this comment page (sessions, auth tokens)
Yes, this is very dangerous, but how is it protected?
There is a good way to handle this before hiding comments in DB. We must sterilize it and then we can.
How is it sterilized?
In the same example, we will add, so what we do is added a NPM name “dompurify” Thus, it will sterilize the body content and then add the content to DB safely.
DOM BASED XSS
The malicious script of the attacker occurs when it disturbs the DOM (Document Object Model) on the client side without interacting with the server.
Let’s take an example for a search page example, this JS code
// 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}`;
If the user searches with this “https://example.com/#Hello” Then he will come back
“You searched for: Hello”
Now how will the attackers hit
They will use this “https://example.com/#” And then it would be out
“You searched for: ” And the script will run.
How to protect?
In the same example, we need to use it “textContent” in its place “innerHTML”
const searchQuery = location.hash.substring(1);
document.getElementById('result').textContent = `You searched for: ${searchQuery}`;
Now, IT attacker will use this code,
https://example.com/#
Then he will not run and return it,
You searched for:
Solution
Modern web applications face Javascript -oriented cyber security attacks, because the attackers successfully define their weaknesses. Protection against these threats requires protection, subsource integrity (SRI) application and content safety policies (CSP) configuration and appropriate NPM package installation applications and proactive security measures including XSS security vulnerability management. Developers who follow the best applications can protect their applications from malicious attacks while maintaining user data security. Always be informed and provide wake up because you should have the greatest priority during security development.
