Tutorialswithtips: Codeigniter--Cross-site Scripting

After Image-uploading, We will be learning about Cross-site Scripting.

1. Rename your Codeigniter folder as "ScriptIgniter".

2. Now configure your files.Go to C:\xampp\htdocs\ScriptIgniter\application\config.
Now select autoload.php and make changes as follows.

$autoload['libraries'] = array('security', 'xmlrpc');

$autoload['helper'] = array('url', 'file','form');

3. Select config.php and make the changes as follows.

$config['base_url'] = 'http://localhost/ScriptIgniter/';

4. Select routes.php and make the changes as follows.

$route['default_controller'] = "form_controller";

$route['404_override'] = '';

5. Create a new folder named "css" in C:\xampp\htdocs\ScriptIgniter.

6. Now create a new file form_controller.php in C:\xampp\htdocs\ScriptIgniter\application\controllers

and copy and paste the code given below.

form_controller

7. Now create a new file form_view.php in C:\xampp\htdocs\ScriptIgniter\application\views and copy and paste the code given below.

form_view.php

<html>
<head>
<title>Xss-Clean</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/style.css">
</head>
<body>
<div class="main">
<div id="content">
<h2 id="form_head">
Xss-Clean</h2>
<div id="form_input">
<?php
echo form_open('form_controller/data_submitted');
echo form_label('Name');
$data_name = array('name' => 'name','id' => 'name_id','class' => 'input_box','placeholder' => 'Name must be Entered','required' => 'required');
echo form_input($data_name);
echo "<br>";
echo form_label('Email-ID');
$data_email = array('type' => 'email','name' => 'email','id' => 'email_id','class' => 'input_box','placeholder' => 'Please Enter Email','required' => 'required');
echo form_input($data_email);
?>
</div>
<div id="form_button">
<?php echo form_submit('submit','Submit',"class=submit"); ?>
</div>
<?php
echo form_close(); ?>
</div>
<?php //This div shown when values submitted. ?>
<?php if(isset($_POST['submit'])) { ?>
<div class="display">
<div class="result_head">
<h3>
For submission with no xss_clean</h3>
</div>
<div class="data">
<label>Name:</label> <?php echo $non_xss['name']?><br><br>
<label>Email:</label> <?php echo $non_xss['email']?><br><br>
</div>
</div>
<p class="xss_note">
This is after xss_clean(), which filters the script tag.</p>
<div class="xss_clean_display">
<div class="result_head">
<h3>
For submission with xss_clean</h3>
</div>
<div class="data">
<label>Name :</label> <?php echo $xss_data['name'] ?><br><br>
<label>Email :</label> <?php echo $xss_data['email'] ?><br><br>
</div>
</div>
<?php } ?>
</div>
</body>
</html>

8. Create a new file style.css in C:\xampp\htdocs\ScriptIgniter\css. Copy and paste the code given below.

style.css

body {
font-family: 'Times New Roman', sans-serif;
}
.main{
width: 1050px;
position: absolute;
top: 20%;
left: 30%;
}
#form_head{
text-align: center;
background-color: #ffb4d9;
border-bottom: 1px solid #999494;
height: 70px;
margin: 0 0 -29px 0;
padding-top: 35px;
border-radius: 8px 8px 0 0;
color: rgb(97, 94, 94);;
}
#content {
position: absolute;
width: 481px;
height: 335px;
border: 2px solid gray;
border-radius: 10px;
margin-top: 70px;
margin-left: -90px;
}
#form_input{
margin-left: 50px;
margin-top: 43px;
}
label{
margin-right: 6px;
font-weight: bold;
}
#form_button{
padding: 0 21px 15px 15px;
position: absolute;
bottom: 0px;
width: 445px;
background-color: #ffd2e8;
border-radius: 0px 0px 8px 8px;
border-top: 1px solid #999494;
}
.label_output{
color:#a4c2d5;
margin-left: 10px;
}
.input_box{
height:40px;
width:240px;
padding:20px;
border-radius:3px;
background-color: #fff0f7;
font-family: 'Raleway', sans-serif;
}
input#e_email_id {
margin-left: 16px;
}
input#emp_name_id {
margin-left: 36px;
}
input#password_id {
margin-left: 88px;
}
.display{
position: absolute;
height: 190px;
width: 465px;
margin-left: 550px;
margin-top: 365px;
border: 2px solid gray;
border-radius: 10px;
}
.result_head{
text-align: center;
background-color: #ffb4d9;
border-bottom: 1px solid #999494;
height: 36px;
margin: 0 0 -29px 0;
padding-top: 8px;
padding-bottom: 22px;
border-radius: 8px 8px 0 0;
color: rgb(97, 94, 94);;
}
.data{
margin-top: 50;
margin-left: 60px;
}
.xss_clean_display{
margin-top: 25px;
border: 2px solid gray;
border-radius: 10px;
position: absolute;
height: 190px;
width: 465px;
margin-left: 550px;
border: 2px solid gray;
border-radius: 10px;
}
.submit{
font-size: 16px;
background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
border: 1px solid #e5a900;
color: #4E4D4B;
font-weight: bold;
cursor: pointer;
width: 300px;
border-radius: 5px;
padding: 10px 0;
outline: none;
margin-top: 20px;
margin-left: 15%;
}
.submit:hover{
background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
}
p.main_note {
position: absolute;
margin-left: -90px;
margin-left: -87px;
margin-top: 9px;
}
p.note {
margin-top: 580px;
margin-left: 240px;
}
p.xss_note {
margin-left: 550px;
margin-top: 10px;
}
p.display_note{
position: absolute;
margin-top: 300px;
margin-left: 550px;
}
#note_text {
color: red;
}

9. Now navigate url to http://localhost/ScriptIgniter/index.php/form/data_submitted. You should get the screen like this.

10. That's it!!, We have successfully learned about Cross-site Scripting. In the next tutorial, we will be learning about Captcha-generated form.

Tutorialswithtips

Pages

Wednesday, October 14, 2015

Codeigniter--Cross-site Scripting

No comments:

Post a Comment