信息安全实践_实验二-CSS

最新推荐文章于 2024-02-10 19:36:58 发布

F-A-DD

最新推荐文章于 2024-02-10 19:36:58 发布

阅读量446

点赞数

CC 4.0 BY-SA版权

文章标签： css

本文链接：https://blog.youkuaiyun.com/qq_37254846/article/details/115293046

本文介绍了如何使用CSS实现两种不同的表格样式，分别展示了Version A和Version B的HTML页面布局。同时，详细阐述了在Zoobar网站配置过程中，将myzoo文件夹放入Apache服务器目录，并修改默认配置以访问网站。还揭示了一个CSS漏洞利用方法，通过<img>标签的alt属性和style属性，使得用户在查看个人资料时显示拥有比实际更多的Zoobars。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

PART ONE: CSS 样式控制同一HTML页面实现下面两种样式

p1.html

<!DOCTYPE HTML>
<html>
<head>
<title>CS 142 Project 1, Problem 1</title>
<link rel="stylesheet" href="./p1a.css">
</head>
<body>
	<table>
  <tr>
    <th>Item</th>
	<th>Manufacturer</th>
	<th>Size</th>
    <th>Unit Price</th>
	<th>Quantity</th>
	<th>Totalprice</th>
  </tr>
  <tr>
    <td>Corn Flakes</td>
    <td>Kellogg`s</td>
	<td>18 oz</td>
	<td>2.50</td>
	<td>1</td>
	<td>2.50</td>
  </tr>
  <tr>
	<td>Solid White Tuna</td>
	<td>Starkist</td>
	<td>5 oz</td>
	<td>2.79</td>
	<td>2</td>
	<td>5.58</td>
  </tr>
  <tr>
	<td>Cream of Mushroom Soup</td>
	<td>Campbell`s</td>
	<td>10.75 oz</td>
	<td>1.00</td>
	<td>2</td>
	<td>2.00</td>
  </tr>
  <tr>
	<td>2 % Lowfat Milk</td>
	<td>Safeway</td>
	<td>0.5 gal</td>
	<td>1.99</td>
	<td>1</td>
	<td>1.99</td>
  </tr>
  <tr>
	<td>Extra-Wide Egg Noodles</td>
	<td>Golden Grain</td>
	<td>12 oz</td>
	<td>0.87</td>
	<td>3</td>
	<td>2.61</td>
  </tr>
  <tr>
	<td>Total</td>
	<td></td>
	<td></td>
	<td></td>
	<td>9</td>
	<td>14.68</td>
  </tr>
	</table>
</body>
</html>

Version A
在这里插入图片描述
p1a.css

table {border-collapse:separate; border-spacing:0; font-size:13px; font-family:Tahoma;}
table td{ border-top:1px solid #fff; }
table th{background:#687291; color: #fff;}
table tr:nth-child(odd){background:#EEEFF2;}
table tr:nth-child(even){background:#DFE1E7;}
table tr:last-child{display:none;}
table th:nth-child(1),th:nth-child(2),th:nth-child(3){text-align: left;}
table td:nth-child(1),td:nth-child(2){padding:4px 40px 4px 4px;}
table td:nth-child(3){padding:4px 0px 4px 4px;}
table td:nth-child(n+4){padding:4px 35px;}

Version B
在这里插入图片描述
p1b.css

table {border-collapse:separate; border-spacing:0; font-family:Tahoma; font-size:13px; border:solid 10px #d0d0ff;  padding:20px;}
table td{ border-top:1px solid #fff; }
table th{font-weight:bold; text-align: left;}
table th:nth-child(1){text-align: center;}
table tr:last-child td{font-weight:bold; border-top:solid 2px #000000;}
table th:nth-child(n+4){text-align: center;}
table td:nth-child(1),td:nth-child(2),td:nth-child(3){text-align: center; padding:2px 30px 2px 2px;}
table td:nth-child(3){padding:2px 0px 2px 2px;}
table td:nth-child(n+4){text-align: center;padding:2px 30px;}

PART TWO：配置zoobar 网站并寻找css漏洞

实验要求

Manage your profile in the zoobar website, make your zoobars appear more than you really own. That is, after you modify your profile, when others or yourself look up your profile, they will see more zoobars than you actually own.

配置myzoo网站

把myzoo文件夹放到目录 /var/www 下
把 /etc/apache2/sites-available 下的default 文件里 DocumentRoot 后面改成该文件夹的目录

DocumentRoot /var/www/myzoo

在这里插入图片描述
重启apache2:sudo service apache2 restart;
此时，使用http://localhost应该可以访问zoobar网站。

利用css漏洞

利用标签会自动发送请求可以找一张图片放在数字的位置让profile看起来更多，由于网络不好可能会出现加载不出来的情况，这里选择使用标签的 alt 属性 — 在src加载不出来的时候会用alt中的文字替换图片，利用style属性控制文字位置

在用户的profile里输入：

<img src="" style="position:relative;top:-52px;right:-61px;width:34px;height:21px" alt="000"/>

在这里插入图片描述
切换用户b查看用户a发现a的profile多了三个0

信息安全实践_实验二-CSS

PART ONE: CSS 样式控制同一HTML页面 实现下面两种样式

PART TWO： 配置zoobar 网站 并寻找css漏洞

PART ONE: CSS 样式控制同一HTML页面实现下面两种样式

PART TWO：配置zoobar 网站并寻找css漏洞