Scribd
Upload
10 views

Applications of Javascript Frameworks & Protect Web Page Css

Uploaded by

samplenewstate04
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

Applications of Javascript Frameworks & Protect Web Page Css

Uploaded by

samplenewstate04
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Compiled By: Prof. R.A.

Kautkar

Unit No. 6

Javascript Frameworks with Applications:

JavaScript frameworks are libraries of pre-written JavaScript code that


provide a structured way to build web applications. They simplify the development
process by offering reusable functions and tools.

Here are some popular JavaScript frameworks and their applications:

1) React:

Application: User Interfaces for web and mobile applications.

Description: Developed and maintained by Facebook, React is a component-based


library that efficiently updates and renders user interfaces. It is often used in
conjunction with other libraries and tools to build interactive and dynamic single-page
applications.

2) Angular:

Application: Large-scale, complex web applications.

Description: Developed by Google, Angular is a comprehensive and opinionated


framework. It provides features like two-way data binding, and a powerful component
system for building dynamic web applications.

3) Vue.js:

Application: Building interactive user interfaces.

Description: Vue.js is a progressive framework that is easy to integrate into existing


projects. It allows developers to build user interfaces incrementally and is known for
its simplicity and adaptability.

4) Ember.js:

Application: Ambitious web applications with a focus on convention over


configuration.
Description: Ember is a framework that enforces conventions and best practices for
building web applications. It comes with a set of tools and a structured project layout
to make development more predictable and efficient.

5) Backbone.js:

Application: Building client-side web applications with a minimal footprint.

Description: Backbone provides the essential structure to web applications and


follows the Model-View-Controller (MVC) pattern. It's a lightweight choice for
developers who prefer flexibility in choosing their libraries.

The choice of a JavaScript framework depends on your specific project


requirements, your familiarity with the framework, and the goals you want to achieve
in your web application. Each framework has its unique strengths and weaknesses,
so it's important to evaluate them based on your project's needs.

Ways to Protect Web Page:

It's important to understand that while you can take some measures to protect
your webpage in JavaScript, none of them can provide absolute security. A
determined attacker can often find ways to bypass these protections. However, the
following are some techniques you can use to enhance the security of your
webpage:

There are following ways to Protect webpage in javascript:

1)Hiding your source code & Javascript

2) Disabling the right MouseButton

3) Concealing E-mail address.

1) Hiding your source code and Javascript:

You can hide your JavaScript from a visitor by storing it in an external file on your
web server. The external file should have the .js file extension. The browser then
calls the external file whenever the browser encounters a JavaScript element in the
web page. If you look at the source code for the web page, you'll see reference to
the external .js fi le, but you won't see the source code for the JavaScript.

The next example shows how to create and use an external JavaScript file. First you
must tell the browser that the content of the JavaScript is located in an external file
on the web server rather than built into the web page. You do this by assigning the
file name that contains the JavaScripts to the src attribute of the <script> tag.

Example:

<html>

<head>

<title>External JavaScript Example</title>

</head>

<body>

<h1>Hello, World!</h1>

<!-- Link to the external JavaScript file -->

<script src="script.js"></script>

</body>

</html>

Create a separate JavaScript file (e.g., script.js) with your JavaScript code. For
example:

// script.js

alert('External JavaScript file is linked!');

In this example, we linked an external JavaScript file (script.js) to the HTML


document. The JavaScript code in script.js will run when the HTML page is loaded.
When you open the index.html file in a web browser, the JavaScript code from
script.js will be executed, and an alert with the message "External JavaScript file is
linked!" will appear.

One way to protect your JavaScript source code is through minification and
obfuscation. Minification reduces your code's readability by removing whitespace
and shortening variable names, making it harder for others to understand.

Obfuscation involves transforming your code to make it difficult to comprehend. For


example, renaming variables to meaningless names, using complex expressions,
and using code mangling.

2) Disabling the right mouse button:

You can attempt to prevent users from right-clicking on your webpage, which is often
done to access the context menu and view the page source. However, this method is
easily bypassed by determined users.

Example program to disable right-clicking:

<!DOCTYPE html>

<html>

<head>

<title>Disable Right Mouse Button</title>

</head>

<body>

<p>Right-click anywhere on this page to see the context menu.</p>

<script type="text/javascript">

// Prevent the context menu from appearing

document.addEventListener('contextmenu', function (e) {


e.preventDefault();

});

</script>

</body>

</html>

In the code above, we're using the contextmenu event and preventing its default
action using the e.preventDefault() method. This will stop the context menu from
appearing when the user right-clicks on the page. Please be aware that users can
still disable JavaScript in their browser or use browser settings to override this
behavior, and it's generally not recommended to interfere with standard browser
functionality.

3) Concealing email addresses:

To prevent email harvesting by web crawlers, you can encode email addresses in
a way that requires JavaScript to decode them. You can use JavaScript to replace
encoded email addresses with their original form on page load.

Hiding an email address on a webpage using JavaScript's String.fromCharCode


function can be a basic form of email obfuscation. The idea is to convert the email
address into a series of character codes that are then assembled on the client side.
Here's an example of how to do this:

Create an HTML file with an element where you want to display the obfuscated email
address. For this example, let's use a <span> element with an id attribute to make it
easy to reference with JavaScript:

<html>

<head>
<title>Obfuscate Email Address</title>

</head>

<body onload=”hideemail()”>

<p>Contact us at: <span id="email"></span></p>

<script src="script.js"></script>

</body>

</html>

Create a JavaScript file (e.g., script.js) to obfuscate and display the email address:

// script.js

function hideemail()

var obfuscatedEmail = String.fromCharCode(104, 101, 108, 108, 111, 64, 101,


120, 97, 109, 112, 108, 101, 46, 99, 111, 109);

// Get the span element by its ID

var emailSpan = document.getElementById('email');

// Set the inner HTML of the span to the obfuscated email

emailSpan.innerHTML = '<a href="mailto:' + obfuscatedEmail + '">' +


obfuscatedEmail + '</a>';

In the JavaScript code, we first define the obfuscated email address by using
String.fromCharCode to convert a series of character codes into a string. Then, we
select the <span> element with the ID of "email" and set its inner HTML to display
the obfuscated email address. Additionally, we wrap the email address in an anchor
(<a>) element with the mailto link to allow users to click and open their default email
client to send an email.

When you open the HTML file in a web browser, you will see the obfuscated
email address on the page. Users can click on it to send an email, but it's less
accessible to email harvesting bots. Keep in mind that this is not foolproof, and more
advanced techniques may be necessary to further protect email addresses from web
scraping.

Remember that these techniques offer limited protection, and they may
inconvenience or deter legitimate users. They won't stop determined attackers, so
it's crucial to focus on security practices such as server-side validation,
authentication, and authorization, which are more robust ways to protect your web
application.

You might also like