ALARD COLLEGE OF ENGINEERING AND MANAGEMENT

MARUNJI, PUNE

DEPARTMENT OF ARTIFICIAL INTELLIGENCE AND MACHINE

LEARNING

THIRD YEAR ENGINEERING

(Academic Year: 2023-2024)

A PROJECT REPORT ON

“Web Secure Application”

INFORMATION SECURITY LABORATORY

SUBMITTED BY

SR NO NAME OF STUDENTS ROLL NO.

1 KANGUDE SAMRUDDHI SANDIP 17

2 PAWAR SOHAM SANTOSH 34

3 MAGAR ADITI SHANKAR 25

4 PAITWAR DATTATRAY KAILAS 32

5 CHAUDHARY SIDDHARTH SANJAY 07

Under the Guidance of

Prof. Swati Shinde

1
 Alard Charitable Trust’s

ALARD CHARITABLE TRUST’S

ALARD COLLEGE OF ENGINEERING AND MANAGEMENT

MARUNJI, PUNE

DEPARTMENT OF ARTIFICIAL INTELLIGENCE AND MACHINE

LEARNING

CERTIFICATE

This is certified to that Ms. Kangude Samruddhi Sandip, PRN – 72252518E

has completed the project work and prepared report on” Web Secure Application
(Information security laboratory)” In satisfactory manner as a partial fulfilment
on requirement of Third Year Engineering in AIML for academic year 2023-
24.

Prof. Swati Shinde Prof. Disha Nagpure

(Project Guide) (H.O.D)

2
 ACKNOWLEDGEMENT
Gratitude is the hardest emotion to express and often one doesn't find adequate words to convey
that entire one feels. It is my foremost duty to express my deep sense of gratitude and respect
to Prof. Swati Shinde mam for her uplifting tendency and inspiring me for taking up this report
on (Information Security Laboratory) Web Secure Application. We are to our head of
department Prof. Disha Mam for this encouragement and support at every moment.

I am also grateful to the Librarian of Alard college of Engineering and Management Pune for
providing all necessary activates to carry out (Information Security Laboratory) Web Secure
application work and whose encouraging part has been a perpetual source of inspiration. Last
but not least, I am thankful to my colleagues an those who have directly and indirectly
throughout this work of Information Security Laboratory.

Name Roll No
Kangude Samruddhi Sandip 17

3
 INDEX

SR NO CONTENTS PAGE NO

1 Abstract 5

2 Introduction 6

3 Objective 7

4 Hardwares and softwares 8

5 Algorithm 9

6 Flowchart 10

7 Program 11

8 Output 15

9 Future Scope 16

10 Conclusion 17

4
 ABSTRACT

Encryption and decryption are integral parts of information security in web applications. While
HTML, CSS, and JavaScript play roles in creating user interfaces and executing client-side
encryption/decryption, it's crucial to recognize that many security aspects, such as secure key
management and server-side encryption, are beyond the scope of these technologies. A holistic
approach, which also considers server-side security, is necessary to build a robust and secure
web application. Secure Transmission is Ensuring data is encrypted during transmission, such
as using HTTPS (SSL/TLS), to prevent eavesdropping. Data Storage is Encrypting and
securely storing sensitive data in databases. Client-Side Security is Handling encryption and
decryption with care on the client-side, while avoiding exposing encryption keys or sensitive
algorithms. This web secure application employs encryption and decryption in the realm of
information security, using HTML, CSS, and JavaScript. The application provides a user-
friendly interface for entering login credentials, simulating encryption of sensitive data, and
subsequent decryption. While the provided encryption is for illustrative purposes, in a real-
world scenario, robust encryption techniques must be implemented to protect sensitive
information. This project serves as an educational and demonstrative tool to underscore the
significance of data security and encryption within web applications.

5
 INTRODUCTION

In “Web Secure Application” of Information security. Web security is a critical aspect of

modern web development. Ensuring the confidentiality and integrity of user data is of
paramount importance in the digital age. One of the fundamental components of web security
is encryption, which plays a crucial role in protecting sensitive information from unauthorized
access. In this context, HTML, CSS, and JavaScript (JS) are essential tools for creating secure
web applications. In Encryption in Information Security Encryption is the process of converting
data into a secret code to prevent unauthorized access. It is a cornerstone of information
security, and it's used to protect data in transit and data at rest. In a web application, encryption
is primarily employed to secure user credentials, payment information, and sensitive
communication between the client and server. Decryption in Information Security. Decryption
is the reverse process of encryption, where the encoded data is converted back to its original
form, typically by authorized users or systems with the appropriate decryption keys. It's
essential to retrieve and use the protected data within the application.
HTML (Hypertext Markup Language): HTML is the standard markup language used to
structure web content. While it doesn't directly handle encryption or decryption, it plays a
pivotal role in creating secure web forms for users to input sensitive data. For example, login
forms, where users enter their usernames and passwords, should be created with care to ensure
data is securely transmitted.
CSS (Cascading Style Sheets): CSS is used to enhance the visual presentation of web
applications. In the context of secure web applications, CSS is essential for styling and layout
design. It can be used to create user-friendly interfaces for securely entering and displaying
sensitive information.
JavaScript (JS): JavaScript is a versatile programming language that allows developers to add
interactivity and functionality to web pages. In the realm of web security, JavaScript can be
used to perform encryption and decryption of data. However, it's crucial to remember that
JavaScript executed on the client-side (in the browser) may not be the best location for secure
encryption and decryption. These operations are typically performed on the server-side for
added security.

6
 OBJECTIVES

1. The project objective to create a secure web application by focusing on data protection
2. user authentication, input validation, secure coding, and routine security testing.
3. It emphasizes session management, addressing common security risks, and staying
updated with security patches.
4. Additionally, it prioritizes error handling, secure file management, documentation,
incident response planning, user education, compliance with regulations, and robust
monitoring and logging.
5. The ultimate objective is to deliver a resilient and safe web application, safeguarding
both user data and privacy while ensuring protection against various threats and
vulnerabilities.

7
 HARDWARES AND SOFTWARES

SR NO. HARDWARES AND SOFTWARES SPECIFICATIONS

1 Laptop /Desktop 8 GB Ram, I5 Processor

2 VS Code Editor Version 1.83

3 Microsoft Edge Version 116.0.19

8
 ALGORITHM

Algorithm: Secure Web Application Login Page

Step 1: Start
Step 2: Input a Plain Text (Username and password)

Step 3: Import data from plain text

Step 4: Encrypt Text using Algorithm of Encryption
Step 5: Display Encrypted Text
Step 6: Import data from encrypted text
Step 7: Decrypted Text using Algorithm of decryption
Step 8: Again, return original Plain Text
Step 9: Stop

9
FLOWCHART

10
 PROGRAM

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Secure Web App</title>
<style>
body
{
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}

header
{
background-color: #0073e6;
color: white;
text-align: center;
padding: 10px;
}
main
{
max-width: 800px;
margin: 20px auto;

background-color: white;
padding: 20px;
border-radius: 5px;
11
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
label

{
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"], input[type="password"]
{
width: 100%;
padding: 10px;
margin-bottom: 10px;

border: 1px solid #ccc;

border-radius: 5px;
}
button
{

background-color: #0073e6;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;

}
button:hover
{
background-color: #005bb7;
}

</style>
12
</head>
<body>
<header>

<h1>Secure Web Application</h1>

</header>
<main>
<h2>Login</h2>
<form id="login-form">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<button type="button" id="login-button">Login</button>

</form>
<div id="message"></div>
<div id="decryption-message"></div>
</main>
<script>

function decryptBase64(encodedString)
{
return atob(encodedString);
}

document.getElementById("login-button").addEventListener("click", function()

{
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;

const encryptedUsername = btoa(username);

const encryptedPassword = btoa(password);

13
 const message = `
Encrypted Username: ${encryptedUsername}<br>

Encrypted Password: ${encryptedPassword}

`;

document.getElementById("message").innerHTML = message;

const decryptedUsername = decryptBase64(encryptedUsername);

const decryptedPassword = decryptBase64(encryptedPassword);

const decryptionMessage = `
Decrypted Username: ${decryptedUsername}<br>

Decrypted Password: ${decryptedPassword}

`;

document.getElementById("decryption-message").innerHTML = decryptionMessage;
});

</script>
</body>
</html>

14
OUTPUT

15
 FUTURE SCOPE

1. Web security applications will remain crucial in countering growing cyber threats using
AI and machine learning.
2. IoT security will be a priority as more devices connect to the internet, necessitating
protection.
3. Blockchain integration for secure transactions and data integrity will be a trend in web
apps.
4. User privacy and data protection will gain more focus, requiring robust security
measures.
5. Cloud security solutions will be in demand as businesses shift to cloud-based services.
6. Enhanced authentication, like biometrics and multi-factor methods, will ensure user
identity.
7. Secure development practices and tools will be vital for building resilient web
applications.
8. API security will be a key concern as web apps increasingly rely on interfaces.
9. Meeting cybersecurity regulations and standards will be crucial, aided by security
applications.
1. 10.User education and awareness will continue to be important, with security apps
providing guidance and information.

16
 CONCLUSION

Encryption and decryption are cornerstones of web application security, providing the
necessary safeguards to protect data from breaches and unauthorized access. When
implemented correctly, they help create a robust security posture, reassuring users that their
sensitive information remains confidential and secure. this program is a basic web page that
allows users to enter a username and password. When the "Login" button is clicked, it
demonstrates how to use Base64 encoding for encryption and decryption, displaying the results
on the page. It's important to note that Base64 encoding is not a secure method for storing
passwords, and this is for demonstration purposes only. Real-world applications should use
more secure password storage techniques.

17