層疊樣式表(css)


調用方式有三種:

1 用<style>
2 通過<link rel=stylesheet>,或者使用style參數。
3 XML(包括XHTML)可以通過<?xml-stylesheet href=...?>


瀏覽器進行解析的時候會先HTML解析再做CSS解析,所以下面的代碼會出錯:

<style>
some_descriptor {
 background: url('http://www.example.com/</style><h1 > Gotcha!'); } 
</style>

字符編碼:

為了保證在css中可以使用可能產生問題的字符,css提供了一種方式由反斜杠()加六位十六進制數字。

字符e可以編碼成\65 \065 \000065,當后面緊跟的字符也是十六進制字符中的一種的時候,只有最后一個才是對的。

例如teak編碼成 t\65ak 不會正常,因為會解碼時會把\65a當成一個字符。

為了避免上述情況可以編碼以后加一個空白符,例如:t\65 k。

很多CSS解析器同樣會解析引號之外的字符串。

下面兩個代碼IE下相同

<A STYLE='color: expression\028 alert \028 1 \029 \029'>
<A STYLE='color: expression(alert(1))'>

Fuzzing

CSS的解析規則與HTML和JavaScript在幾個方面不同。

JavaScript在語法錯誤的時候,整個代碼都會被忽略,而CSS解析錯誤時,瀏覽器嘗試忽略錯誤的代碼。

這點上跟HTML比較類似,因為HTML語法錯誤時,瀏覽器會嘗試修復并展現出來,

@符號用來在CSS樣式表中定義一個特殊屬性,定義字符集(@charset)或者media的樣式(@media)。

導入外部樣式(@import)或外部字體(@font-face)或命名空間(@namespace)或定義一個演示文件(@page)。

定義字符集的時候,可以定義一個多字節字符集(如:SHIFT-JIS,BIG5,EUC-JP,EUC-KR或GB2312)可能會使反斜線失效:

@charset "GB-2312";
*{
content:"a%90\"; color:red; z:k";
}

會解析為:

@charset "GB-2312";
*{
content:"a撞"; color:red; z:k";
}

還有一種時UTF-7字符:

@charset "UTF-7";
*{
content:"a+ACIAOw- color:red; z:k";
}

會解析為:

@charset "UTF-7";
*{
content:"a"; color:red; z:k";
}

[email protected]

+/v8-
*{
content:"a+ACIAOw- color:red; z:k";
}

在一些瀏覽器中導入的時候可以定義字符集:

<link rel=stylesheet charset=UTF-7 src=stylesheet>

CSS的選擇器是非常有趣的部分,他可以包含字符串,表達式,函數。選擇器也可以由多行組成:

CSS中的聲明時一個 屬性/值 對里面的規則集,通常形式如下:

property: value;

property是一個關鍵字,包括字母數字破折號,和大于0x7F的字符,也有繞過的方式:

-moz-binding與\2d moz\2d binding相等。

IE中property沒有嚴格遵守這個規則,如果一個屬性包含多個字,只有第一個字將被使用,其他的都會忽略:

a b c: value;
a: value;

上面兩個規則是等效的。 并且IE中:可以替換為=

a = value;
a: value;

上面兩個也是等效的。

同樣重要的是IE允許多行的字符串,URL,選擇器。

CSS最明顯的局限性是,他本身不是一種編程語言,而是一種語言風格,他沒有任何的編程邏輯。

他很難不借助于JavaScript進行攻擊,下面主要討論的是完全基于CSS不依賴于其他腳本語言的攻擊。

整體的邏輯:

element:condition{
   action;
   }

element可以為任意值,condition為CSS選擇器,如:visited,:active,:hover,:selected。 事件選擇器:

1 :hover 懸停鼠標在一個元素。
2 :active 點擊一個元素。
3 :focus 光標放在一個元素上。

CSS造成點擊劫持:

<style>
iframe{
filter:alpha(opacity=0);opacity: 0;
position: absolute;top: 0px;left: 0px;
height: 300px;width: 250px;
}
img{
position: absolute;top: 0px;left: 0px;
height: 300px;width: 250px;
}
</style>
<img src="用戶看到的圖片">
<iframe src="用戶實際操作的頁面"></iframe>

點擊劫持的防御方法一是添加X-FRAME-OPTIONS:NEVER頭,另外一種方式是利用JavaScript:

<body>
<script>
if(top!=self)
document.write('<plaintext>');
</script>

兩種方式都有局限性,之前發過點擊劫持的文檔了,詳見:http://drops.wooyun.org/tips/104

如下代碼是一個有效的CSS2的代碼,并且在Firefox,Safari,Chrome,Opera,IE7,IE8,IE9中沒有影響,但是在IE6中,可執行代碼:

<style>
foo[bar|="} *{xss: expression(alert(1));} x{"]{
  color:red;
}
</style>

以下代碼中的color可以編碼為c\olor,\c\o\l\or,c\6f l\06f r 。

*{
color: red;
}

瀏覽器腳本語言


解析javascript的時候以下兩段代碼不相同:

代碼一 代碼二
&#x3cscript> var my_variable1 = 1; var my_variable2 = &#x3c/script> &#x3cscript> 2; &#x3c/script> &#x3cscript> var my_variable1 = 1; var my_variable2 = 2; &#x3c/script>

這是因為<script>在解析之前并沒有鏈接起來,相反,代碼一中的第一個script標簽會引起錯誤。

從而導致整個標簽被忽略,所有標簽內的代碼都無法執行。

在JS中有兩種定義函數的方式:

var aaa=function(){...}
function aaa(){...}

var 方式定義的函數,不能先調用函數,后聲明,只能先聲明函數,然后調用。

function方式定義函數可以先調用,后聲明。

<script>  
//aaa();這樣調用就會出錯  
var aaa = function(){  
  alert("A");  
}  
aaa();//這樣就不會出錯  
//先調用后聲明  
bbb();  
function bbb(){  
  alert("bb");  
}  
</script>

出于歷史原因,某些HTML元素(<IMG>,<FORM>,<EMBED>,<object>,<APPLET>)的名字也直接映射到文檔的命名空間,如下面的代碼片段所示:

<img name="hello" src="http://www.example.com/">
<script>
 alert(document.hello.src);
</script>

DOM操作:

document.getElementById("output").innerHTML = "<b>Hi mom!</b>";

向id為output的標簽里插入<b>Hi mom!</b>。 采用.innerHTML插入數據時,必須為完整的數據塊,比如下面的代碼:

some_element.innerHTML = "<b>Hi";
some_element.innerHTML += " mom!</b><i>";

等同于下面的代碼:

some_element.innerHTML = "<b>Hi</b> mom!<i></i>";

DOM操作時,其本身會對一些字符做解碼處理,如下代碼:

<textarea style="display:none" id="json">
{
  "name":"Jack&quot;",
  "country":"China"
}
</textarea>
My name is :<span id="me">loading...</span>
<script>
function $(id){
  return document.getElementById(id);
}
var data=$("json").value;
alert(data);
var profile=eval("("+data+")");//把string轉成object方便操作
$("me").innerHTML = profile.name;
</script>

可以看到alert出的data數據為

{
     "name":"Jack"",
     "country":"China"
}

下面的例子是使用getAttribute時也會解碼:

<img id="pic" src="http://www.baidu.com/img/baidu_sylogo1.gif" bigpic="http://baidu.com&quot;&gt;&lt;img src=1 onerror=alert(1)&gt;&lt;i b =" onclick="test()">
<div id="bigimage">
</div>
<script>
function $(id){
  return document.getElementById(id);
}
function test(){
  big=$("pic").getAttribute("bigpic");//big此時為:http://baidu.com"><img src=1 onerror=alert(1)><i b =
  $("bigimage").innerHTML="<img src=\"" + big + "\"/>";
}
</script>

javascript編碼

javascript支持多種字符編碼方式:

1 C語言的編碼,\b表示退格,\t表示水平制表符等等,公認的ECMAScript編碼。
2 三位數字:用反斜杠加八位8進制來表示,如\145可表示字符e,該語法不屬于ECMAScript,但是基本所有的瀏覽器都支持。
3 兩位數字:用反斜杠加x加八位16進制表示,如\x65可表示字符e,同樣不屬于ECMAScript,但是在解析底層,C語言中有很好的支持。
4 四位數字:Unicode編碼,十六位16進制表示,如\u0065可表示字符e,屬于ECMAScript編碼。

需要注意的是組后一種編碼方式不止在字符串中才可以表示,如下代碼也可正常的執行(但是不可替代括號與引號):

<script>
\u0061lert("This displays a message!");
</script>

Fuzzing

JavaScript中,window對象是一個全局變量,并且默認定義的變量都為全局變量,window下的方法可以直接訪問:

<script type="text/javascript">
alert(1);
window.alert(1); 
window.alert(window.alert); 
</script>

并且可重寫:

<script type="text/javascript">
function alert() {}
alert(1)
</script>

定義數組的兩種方式:

<script type="text/javascript">
x=[1,alert,{},[],/a/];
alert(x[4]);
</script>

默認返回最后一個:

<script type="text/javascript">
objLiteral={'objProperty':123};
alert(objLiteral[0,1,2,3,'objProperty']);
</script>
<script type="text/javascript">
objLiteral={'objProperty':123};
alert(objLiteral[(0,1,2,3,(0,'objProperty'))]);
</script>

JavaScript中定義字符串除了’string’,”string”方式之外,還有其他的方式:

<script type="text/javascript">
alert(/I am a string/+'');
alert(/I am a string/.source);
alert(/I am a string/['source']);
alert(['I am a string']+[])
</script>

第一個alert中是一個正則表達式加一個空字符串,JavaScript會把正則強制轉為字符串。 第二個alert中使用了標準的正則對象的source屬性,返回結果為正則匹配完的字符串,第三個相同是屬性的另外一種訪問方式。 第三個alert中是利用了訪問數組時如果不是指定的訪問一個元素,會自動調用toString()方法,轉為字符串。 還有一種非標準的使用字符串的方式(IE8,Safari,Opera,Firefox和Chrome已經支持),使用類似數組的方式:

<script type="text/javascript">
alert('abcdefg'[0]);
</script>

火狐當中對函數名的規范非常的寬泛:

<script type="text/javascript">
window.function=function function(){return function function() {return function function(){alert('Works in Firefox')}()}()}()
</script>

JavaScript支持多行的字符串,當一\結尾時,下一行的字符串會接著上一行的結尾:

<script type="text/javascript"> 
alert("this is a \
\
\
\
\
string");
</script>

似乎所有的JavaScript引擎都支持函數之前的運算符,如:+,-,~,++,–,!,運算符也可寫在typeof和void之前。

<script type="text/javascript"> 
!~+-++alert(1)
</script>
<script type="text/javascript"> 
void~void~typeof~typeof--alert(2)
</script>
<script type="text/javascript"> 
alert(3)/abc
</script>

最新的Chrome與Safari前兩個已經不會執行了。 查看控制臺可以看到三個js其實都是報錯了的,前兩個是由于alert函數返回的是undefined,進行++和–操作的時候是非法的。 最后一個是試圖用alert函數除以一個未聲明的變量,先執行alert函數后再除的時候報錯。

您的支持將鼓勵我們繼續創作!

[微信] 掃描二維碼打賞

[支付寶] 掃描二維碼打賞