WEB安全第七课 层叠样式表 之一 CSS基本语法

        随着Web技术在20世纪90年代日渐成熟，网站开发者们日益需要找到一种统一又灵活的方法来设计HTML文档的外观；而当时用的一堆随机无序、与浏览器紧密相关的标签参数已经完全不堪重任了。

        在审阅了几种相互竞争的提议之后，W3C最终选择了层叠样式表（Cascading Style Sheets，CSS)，这是一种简单的基于文本的页面外观描述语言，提议者为HAkon Wium Lie。

👄⛪🌰🈴🦕‌

        原始版本的CSS level 1规范在1996年年未发布的时候已初露希望之光，但直到2008年才完成文档的修订。紧随其后在1998年发布了CSS level 2草稿，但也直到2011年才正式完成。在最近一次的迭代修改中，CSS level 3始于2005年，而直到今时今日修订还在进行。尽管在多年的试验和错误中，所有主流浏览器都支持CSS2和CSS3里的大部分功能，但每个厂商的具体实现在很多细节上又有巨大差异，导致这种局面的原因可能也是一直缺乏一份正式完工的标准吧。
        
        尽管各浏览器对CSS的处理颇有差异，但CSS仍不失为一种相当强劲的工具。除了少数的一些限制，样式表几乎能随心所欲地对所有的HTML标签进行放大、位置调整和装饰，因此CSS突破了标记语言原本的局限性，在某些具体实现中，JavaScript甚至可以内嵌在CSS的指令里。因此，如果在样式表里允许用户控制的内容，或改变了外部提供的CSS，都可能对Web应用的安全造成巨大影响。

        在HTML文档里使用样式表有三种方式：在文档里直接使用<style>区块来定义样式表，这种方式全局生效；通过<link rel=stylesheet>方式引用外部URL对应的样式表；或为某个标签赋予一个style参数值。此外，基于XML文档（包括XHTML)也可以通过加入<?xml-stylesheet href=...?>指令的方式获得同等的效果。🧑‍🎤‏🧦🧬☠🙌
        
        前两种包含方式用到的样式表要完全符合语法要求，在样式表里首先包含若干数量的选择器（用于描述哪个HTML标签适用于选择器里的哪条规则集），选择器用大括号包括了一行行用分号分隔的“名称：数值”格式的规则。以下就是CSS语法的简单举例，这里定义了<img>、<span>和<div>等标签的样式：
        
[mw_shl_code=css,true]        img {
        border-size:lpx;
👌💈🥭🆎🦄‏        border-style:solid;
        }
        span,div{
        color:red;
        }[/mw_shl_code]

‍🥾🧬🥰🤞

        
        选择器也可以只对某些标签（如img)的特定类型才生效，方法是在这一类型名称的前面再加一个点号作前缀符，统一设定整个类型的标签样式（例如，.photos 会对文档里设置了“class=photos”的所有标签都生效），选择器还可以针对两者的组合进行设定(如img.company_logo)。

        在选择器名称后面接上如:hover或:visited这样的后缀，能使选择器在某种特定条件下才派上用场，譬如，当鼠标移到内容的上方或者超链接已经被访问过的时候。
        
👂🛑🍽🈚🐙‏        复杂选择器（Complex Selector)是在CSS 2和扩展CSS 3里引入的一个有趣特性。复杂选择器可以设定在标签的某个参数值里出现某些特定字符串，或特定的标签出现在标记语言里的某个特定位置时，才应用某条指定的规则集。这种选择器的例子如下：
        
[mw_shl_code=css,true]        a[href^="ftp:"]{
        /*该样式表仅对ftp类型的链接有效*/[/mw_shl_code]
        👨🦱‏👗🏮😒🤙
        注意:这里也顺便提一句：如这个例子所示，在引号括起字符串以外的位置，CSS语法可以接受C风格的注释符/*...*/。而另一方面，CSS并不接受//双斜杠开头的注释符写法。
        
        1.属性定义
        
        无论在选择器后面的大括号{...}区块里，还是应用在特定标签的style参数里，都会跟着若干条“名称:值”格式的规则，用于重新定义该标记的各种显示效果。例如，是否可见、形状、颜色、在屏幕上的位置、渲染顺序、本地或远程字体（typeface)甚至任意额外的文本内容（某些伪CSS类还支持content属性）乃至鼠标形状都可随意设置安排。还有些简单的自动化处理，如列表的自动编号，也可以通过CSS规则实现。🥷‍👞🪣🤔👍
        
        在CSS规则里，属性值的格式有以下三种：
        
        ◆原始文本 这种格式主要用于设定一些数值型的值（单位可选），RGB向量和以名称指代的颜色，还有其他一些预定义好的关键字（如“absolute”、“left”、“center”等）
        

🤳🚤🍏🆒🐺‎

        ◆引号括起的字符串 当CSS属性的值不是固定的关键字时，两边应该用单引号或双引号括起来，但这条规则的使用并非很一致。例如，在设置字体名称和某些URL时，并不需要使用引号，但前面提到的content属性则一定要用引号括起来。
        
        ◆函数表示法（Fimction Notation)  在原版的CSS规范里，有两个涉及参数的伪函数用法：一个是用于将独立的RGB颜色值转换成RGB代码的rgb(...)，另一个是绝大部分URL设置都会用到的url(...)。除了上面这两个例子，近年来还冒出来一批伪功能函数包括像seale(...)、rotate(...)或skew(...)等。
        
        IE浏览器里特有的函数expression(...)可以用于在CSS中嵌入JavaScript语句。这也是一旦黑客控制样式表就有可能导致严重安全威胁的重要原因之一。

🤌🚐🍏☯🐉‎

        
        2.指令和XBL绑定
        
        除了选择器和属性之外，CSS还支持几种以@格式开头，导人独立样式表文件的处理。这种做法能改变样式表的各种设定，例如，指定命名空间，或设定对不同的显示媒体(Display Media)适用不同的样式表。但有两个特殊的指令也会影响解析的处理。一个是@charset，设置当前CSS区块的字符集格式，另一个是@import，可以在样式表里插入一个外部文件。
        👩‍✈️‎👠🩺😭👌
        @import指令本身就是CSS解析风格的好例子。对解析器来说，以下几个例子含义相同：


👍🏠🎂🈸🐞‎        在Firefox中，可以利用-moze-binding特性，从外部源中载人外部内容指令，这些指令包括JavaScript代码。moz-binding是Firefox特有的方法，可以将XBL(XML Binding Language)穿插到文档中（这是一种从XML文件中自动加载某些功能的冷僻用法)。

        在其他的浏览器里也曾有过支持XBL的提议，如果的确如此，相信这个属性的名称会有所变动，还很难预期这样做是否会导致新的XSS。
        
        注意:可以想象，通过@import、url(...)和其他的CSS内容包含方式引入伪URL是一个潜在的安全隐患。尽管大多数浏览器不接受在CSS的上下文环境里使用脚本，但IE6浏览器却会毫不犹豫地接受这种处理，如果没有严格限制URL，就可能导致代码注入。#j318:
🖐🚈🍼🚷🐯‌
        3.与HTML的交互
        
        在HTML文档里嵌入样式表时，会优先执行对HTML的解析，且HTML的解析是完全独立于CSS语法规则之外的。所以在CSS属性里，如果包含某些HTML语法会很不安全，请见下例，即使已经正确地使用了引号也仍然是不安全的。一个常见的错误用法如下：
        👵‏🧣💉😪👄
[mw_shl_code=css,true]        <style>
        some_descriptor{
                background：url('http：//www.example.com/</style><hl>Gotcha!')；
        }
        </style>[/mw_shl_code]

✋⛄🍊💲🦜‍

        
        稍后我们会讨论如何编码样式表里的问题字符，和快速了解一下css—个突出的特点。#386: