原文地址:http://drops.wooyun.org/tips/150

層疊樣式表（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的標簽里插入Hi mom!。采用.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函數后再除的時候報錯。

这里只有精品视频