Skip to content

Commit b897e91

Browse files
makara4codemakara4code
committed
improve visual
1 parent 625d87c commit b897e91

File tree

13 files changed

+193
-51
lines changed

13 files changed

+193
-51
lines changed

‎frontend/index.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,12 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Full Stack FastAPI Project</title>
88
<link rel="icon" type="image/x-icon" href="/assets/images/favicon.png" />
9+
<link rel="preconnect" href="https://fonts.googleapis.com" />
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11+
<link
12+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap"
13+
rel="stylesheet"
14+
/>
915
</head>
1016
<body>
1117
<div id="root"></div>

‎frontend/src/routes/_layout/owasp/a01.tsx‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -215,10 +215,21 @@ function A01Page() {
215215
<FiShield size={24} />
216216
<Heading size="lg">A01 - Broken Access Control</Heading>
217217
</Flex>
218-
<Text color="gray.600" _dark={{ color: "gray.400" }}>
219-
Access control enforces policy such that users cannot act outside of
220-
their intended permissions.
221-
</Text>
218+
<Box
219+
borderLeftWidth="4px"
220+
borderLeftColor="blue.500"
221+
pl={4}
222+
py={2}
223+
bg="gray.50"
224+
_dark={{ bg: "gray.800" }}
225+
>
226+
<Text color="gray.600" _dark={{ color: "gray.400" }}>
227+
Users can act outside their intended permissions. Attackers access
228+
unauthorized data or functions by manipulating URLs, IDs, or
229+
bypassing access checks. Includes IDOR and missing function level
230+
access control.
231+
</Text>
232+
</Box>
222233
<Badge colorScheme="red" mt={2}>
223234
#1 Most Critical Vulnerability
224235
</Badge>

‎frontend/src/routes/_layout/owasp/a02.tsx‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -161,10 +161,20 @@ function A02Page() {
161161
<FiShield size={24} />
162162
<Heading size="lg">A02 - Security Misconfiguration</Heading>
163163
</Flex>
164-
<Text color="gray.600" _dark={{ color: "gray.400" }}>
165-
Security misconfiguration is the most commonly seen issue, often
166-
resulting from insecure default configurations.
167-
</Text>
164+
<Box
165+
borderLeftWidth="4px"
166+
borderLeftColor="blue.500"
167+
pl={4}
168+
py={2}
169+
bg="gray.50"
170+
_dark={{ bg: "gray.800" }}
171+
>
172+
<Text color="gray.600" _dark={{ color: "gray.400" }}>
173+
Insecure default settings, incomplete configs, or verbose error
174+
messages expose sensitive system information to attackers.
175+
Includes exposed configuration and verbose errors.
176+
</Text>
177+
</Box>
168178
</Box>
169179

170180
<UserRoleInfo />

‎frontend/src/routes/_layout/owasp/a03.tsx‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -181,11 +181,20 @@ function A03Page() {
181181
<FiShield size={24} />
182182
<Heading size="lg">A03 - Software Supply Chain Failures</Heading>
183183
</Flex>
184-
<Text color="gray.600" _dark={{ color: "gray.400" }}>
185-
Vulnerabilities introduced through third-party components,
186-
libraries, or build pipelines. These attacks target the software
187-
supply chain rather than your code directly.
188-
</Text>
184+
<Box
185+
borderLeftWidth="4px"
186+
borderLeftColor="blue.500"
187+
pl={4}
188+
py={2}
189+
bg="gray.50"
190+
_dark={{ bg: "gray.800" }}
191+
>
192+
<Text color="gray.600" _dark={{ color: "gray.400" }}>
193+
Using components with known vulnerabilities or untrusted sources.
194+
Attackers exploit outdated libraries or compromised packages.
195+
Includes vulnerable dependencies and package risks.
196+
</Text>
197+
</Box>
189198
<Badge colorScheme="orange" mt={2}>
190199
New in OWASP 2025
191200
</Badge>

‎frontend/src/routes/_layout/owasp/a04.tsx‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -207,10 +207,19 @@ function A04Page() {
207207
<FiShield size={24} />
208208
<Heading size="lg">A04 - Cryptographic Failures</Heading>
209209
</Flex>
210-
<Text color="gray.600" _dark={{ color: "gray.400" }}>
211-
Failures related to cryptography which often lead to exposure of
212-
sensitive data.
213-
</Text>
210+
<Box
211+
borderLeftWidth="4px"
212+
borderLeftColor="blue.500"
213+
pl={4}
214+
py={2}
215+
bg="gray.50"
216+
_dark={{ bg: "gray.800" }}
217+
>
218+
<Text color="gray.600" _dark={{ color: "gray.400" }}>
219+
Weak or missing encryption exposes sensitive data. Includes poor
220+
password hashing, weak keys, and insecure token generation.
221+
</Text>
222+
</Box>
214223
</Box>
215224

216225
<UserRoleInfo />

‎frontend/src/routes/_layout/owasp/a05.tsx‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -260,10 +260,21 @@ function A05Page() {
260260
<FiShield size={24} />
261261
<Heading size="lg">A05 - Injection</Heading>
262262
</Flex>
263-
<Text color="gray.600" _dark={{ color: "gray.400" }}>
264-
Injection flaws occur when untrusted data is sent to an interpreter
265-
as part of a command or query.
266-
</Text>
263+
<Box
264+
borderLeftWidth="4px"
265+
borderLeftColor="blue.500"
266+
pl={4}
267+
py={2}
268+
bg="gray.50"
269+
_dark={{ bg: "gray.800" }}
270+
>
271+
<Text color="gray.600" _dark={{ color: "gray.400" }}>
272+
Untrusted data sent to interpreters as commands or queries.
273+
Attackers can steal data, modify records, or execute system
274+
commands. Includes SQL injection, command injection, and open
275+
redirect.
276+
</Text>
277+
</Box>
267278
</Box>
268279

269280
<UserRoleInfo />

‎frontend/src/routes/_layout/owasp/a06.tsx‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -180,10 +180,21 @@ function A06Page() {
180180
<FiShield size={24} />
181181
<Heading size="lg">A06 - Insecure Design</Heading>
182182
</Flex>
183-
<Text color="gray.600" _dark={{ color: "gray.400" }}>
184-
Insecure design represents weaknesses in the design patterns and
185-
architecture that fail to protect against threats.
186-
</Text>
183+
<Box
184+
borderLeftWidth="4px"
185+
borderLeftColor="blue.500"
186+
pl={4}
187+
py={2}
188+
bg="gray.50"
189+
_dark={{ bg: "gray.800" }}
190+
>
191+
<Text color="gray.600" _dark={{ color: "gray.400" }}>
192+
Flaws in design and architecture that can't be fixed by
193+
implementation. Missing threat modeling, insecure business logic,
194+
or absent security controls. Includes weak password reset and no
195+
rate limiting.
196+
</Text>
197+
</Box>
187198
</Box>
188199

189200
<UserRoleInfo />

‎frontend/src/routes/_layout/owasp/a07.tsx‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -194,10 +194,20 @@ function A07Page() {
194194
<FiShield size={24} />
195195
<Heading size="lg">A07 - Authentication Failures</Heading>
196196
</Flex>
197-
<Text color="gray.600" _dark={{ color: "gray.400" }}>
198-
Authentication failures allow attackers to compromise passwords,
199-
keys, or session tokens.
200-
</Text>
197+
<Box
198+
borderLeftWidth="4px"
199+
borderLeftColor="blue.500"
200+
pl={4}
201+
py={2}
202+
bg="gray.50"
203+
_dark={{ bg: "gray.800" }}
204+
>
205+
<Text color="gray.600" _dark={{ color: "gray.400" }}>
206+
Broken authentication allows attackers to compromise passwords,
207+
keys, or session tokens to assume other users' identities.
208+
Includes timing attacks and weak sessions.
209+
</Text>
210+
</Box>
201211
</Box>
202212

203213
<UserRoleInfo />

‎frontend/src/routes/_layout/owasp/a08.tsx‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -145,10 +145,20 @@ function A08Page() {
145145
<FiShield size={24} />
146146
<Heading size="lg">A08 - Integrity Failures</Heading>
147147
</Flex>
148-
<Text color="gray.600" _dark={{ color: "gray.400" }}>
149-
Software and data integrity failures relate to code and
150-
infrastructure that does not protect against integrity violations.
151-
</Text>
148+
<Box
149+
borderLeftWidth="4px"
150+
borderLeftColor="blue.500"
151+
pl={4}
152+
py={2}
153+
bg="gray.50"
154+
_dark={{ bg: "gray.800" }}
155+
>
156+
<Text color="gray.600" _dark={{ color: "gray.400" }}>
157+
Code and data integrity not verified. Insecure deserialization can
158+
lead to remote code execution, replay attacks, or privilege
159+
escalation.
160+
</Text>
161+
</Box>
152162
</Box>
153163

154164
<UserRoleInfo />

‎frontend/src/routes/_layout/owasp/a09.tsx‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -235,10 +235,20 @@ function A09Page() {
235235
<FiShield size={24} />
236236
<Heading size="lg">A09 - Logging Failures</Heading>
237237
</Flex>
238-
<Text color="gray.600" _dark={{ color: "gray.400" }}>
239-
Insufficient logging and monitoring allows breaches to go undetected
240-
and attackers to persist.
241-
</Text>
238+
<Box
239+
borderLeftWidth="4px"
240+
borderLeftColor="blue.500"
241+
pl={4}
242+
py={2}
243+
bg="gray.50"
244+
_dark={{ bg: "gray.800" }}
245+
>
246+
<Text color="gray.600" _dark={{ color: "gray.400" }}>
247+
Insufficient logging and monitoring allows breaches to go
248+
undetected. Attackers can persist, pivot, and extract data without
249+
triggering alerts. Includes missing audit logging.
250+
</Text>
251+
</Box>
242252
</Box>
243253

244254
<UserRoleInfo />

0 commit comments

Comments
 (0)