整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
CSS中:root偽類和html選擇器都可以用來定位 HTML 文檔的根元素，雖然它們看起來非常相似，但它們還是有一些不同之處。
從優(yōu)先級來說，:root偽類 比 html選擇器的優(yōu)先級高，通過如下代碼：
:root {
background-color: red;
}
html {
background-color: blue;
}最終你會看到頁面的背景色是紅色，而不是藍(lán)色。
由于CSS也是為SVG和XML設(shè)計的，因此可以在其它類型的文檔中使用:root定位根文檔元素。對于html 選擇器卻只能在瀏覽器網(wǎng)頁文檔中使用，也就是說root不在乎宿主環(huán)境，在各種文檔類型中都是指根元素。
與HTML相似，在SVG中 :root和svg都指相同的元素，但是:root選擇器將具有更高的優(yōu)先級。
如下實例：
:root {
fill: red;
}
svg {
fill: bule;
}svg 顯示紅色，而不是藍(lán)色。
.本文為公測版，一旦發(fā)現(xiàn)有任何錯誤內(nèi)容，會立即進(jìn)行修復(fù)，請持續(xù)關(guān)注本站。
2.本文在正式版之前會不斷的邀請各路黑客大手進(jìn)行評價測試，歡迎提出異議。
本文僅針對網(wǎng)站部分，本文會對typecho，wordpress進(jìn)行測試
如果你root端口為22，并且密碼是123456，就沒必要往下看了。
網(wǎng)站環(huán)境為linux tengine/nginx mariaDB，同理，apache也有相關(guān)設(shè)置，百度實驗下即可。
**本文會闡述以下部分
1.基礎(chǔ)權(quán)限控制
2.執(zhí)行目錄限制
3.PHP的限制
4.webshell寫入與執(zhí)行
5.權(quán)限細(xì)分，必須寫入的目錄**
1.基礎(chǔ)權(quán)限控制
什么叫基礎(chǔ)權(quán)限？在LNMP架構(gòu)下，nginx+php-fpm架構(gòu)需要什么權(quán)限？
這里我們先來看一下默認(rèn)權(quán)限
默認(rèn)我們的nginx運行用戶是nginx，而php-fpm的默認(rèn)用戶是apache，默認(rèn)用戶安全嗎？
看一下webshell
uid=48(apache) gid=48(apache) groups=48(apache)
很明顯，我們的默認(rèn)用戶是apache
我們使用shell新建一個目錄，很明顯，我們是無法建立文件夾的
mkdir: cannot create directory `1': Permission denied
在網(wǎng)上很多教程會告訴我們，吧nginx和phpfpm改成同樣的用戶，我們看看會發(fā)生什么。
[root@gov 1]# sudo -u nginx mkdir 1
[root@gov 1]# ll
total 4
drwxr-xr-x 2 nginx nginx 4096 Aug 19 18:08 1
沒錯，這是一項愚蠢的決定！
所以默認(rèn)權(quán)限是安全的嗎？并不是，你忘了上傳目錄，我們看下上傳目錄的權(quán)限
drwxrwx--- 3 nginx apache 4096 Aug 14 17:09 uploads
沒錯，上傳目錄的存在就是放大權(quán)限，如果php沒有寫入權(quán)限，那么他就無法上傳圖片。
假設(shè)，我們手里有一個0day，現(xiàn)在我要用它來getshell
我會選擇uploads目錄
-rw-r--r-- 1 apache apache 0 Aug 19 18:11 1.php
完美寫入，接著你的站就會被玩壞了，寫入shell后我們可以插件數(shù)據(jù)庫鏈接密碼，進(jìn)網(wǎng)站后臺，脫褲，掛黑鏈等等等等
網(wǎng)站里有幾個目錄是默認(rèn)可以寫入的？在你的網(wǎng)站目錄下執(zhí)行l(wèi)s -l
通常plugins themes uploads 這三個目錄都是可以寫入的。
你還有其他目錄可以寫入？趕緊修改權(quán)限吧！
加入我們的網(wǎng)站在/var/www/html/root
那么下面的命令是極好的，對于必須要有上傳權(quán)限的uploads目錄，我們下面再說
chown -R nginx.apache html
find /var/www/html/root -type d -exec chmod 750 {} \;
find /var/www/html/root -not -type d -exec chmod 640 {} \;
chmod 770 /var/www/html/root/uploads -R
如果你有某些插件也需要寫入權(quán)限，給他權(quán)限，并認(rèn)真看下面的內(nèi)容。
2.執(zhí)行目錄限制
我們的apache權(quán)限有多大呢？相同的網(wǎng)站擁有相同的權(quán)限。
默認(rèn)情況下，我們的apache權(quán)限能瀏覽大部分目錄。最要命的問題在于，他可以跨站執(zhí)行，從你的網(wǎng)站一直接執(zhí)行到網(wǎng)站二。
我們需要給他一個限制，每個虛擬主機(jī)一個單獨的限制，沒錯就是open_basedir。
這里我們需要特別的技巧，每個虛擬機(jī)都要限制
這樣虛擬主機(jī)將只允許在網(wǎng)站目錄和tmp目錄執(zhí)行，而不能穿越到其他目錄
在烏云有一篇討論繞過open_basedir的文章，所以open_basedir只能讓你更安全而不是徹底安全，所以你還需要往下看。
server {
location ~ .*\.php(\/.*)*$ {
#include pathinfo.conf;
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param PHP_VALUE "open_basedir=$document_root:/tmp/";
3.PHP的限制
我們想一個另類解決辦法，如何限制webshell的執(zhí)行？
在php.ini里，我們可以選擇關(guān)閉某些不安全的函數(shù)
但是由于php這玩意分之多又復(fù)雜，這里只能整理出一部分不安全的函數(shù)。
直接添加到php.ini最后面即可
disable_functions=exec,system,passthru,shell_exec,escapeshellarg,escapeshellcmd,proc_close,proc_open,ini_alter,dl,popen,pcntl_exec,socket_accept,socket_bind,socket_clear_error,socket_close,socket_connect,socket_create_listen,socket_create_pair,socket_create,socket_get_option,socket_getpeername,socket_getsockname,socket_last_error,socket_listen,socket_read,socket_recv,socket_recvfrom,socket_select,socket_send,socket_sendto,socket_set_block,socket_set_nonblock,socket_set_option,socket_shutdown,socket_strerror,socket_write,stream_socket_server,disk_total_space,disk_free_space,diskfreespace,getrusage,get_current_user,getmyuid,getmypid,dl,leak,listen,chgrp,link,symlink,dlopen,proc_nice,proc_get_stats,proc_terminate,shell_exec,sh2_exec,posix_getpwuid,posix_getgrgid,posix_kill,ini_restore,mkfifo,dbmopen,dbase_open,filepro,filepro_rowcount,posix_mkfifo,putenv,sleep,chmod,chown,chroot,ini_set,phpinfo,proc_get_status,error_log,syslog,readlink,putenv
在看webshell，我們會發(fā)現(xiàn)里面空空如也了，并不能執(zhí)行命令了。
4.webshell寫入與執(zhí)行
現(xiàn)在我們的網(wǎng)站已經(jīng)很安全了，他能否更加安全？
現(xiàn)在，我們就要說說我們必須要有執(zhí)行權(quán)限的upload目錄了，nginx同樣提供了解決方案
location ~ /(usr/uploads)/.*\.(php|php5)?$
{
deny all;
}
這個時候我們打開uploads中的php文件會提示403
403 Forbidden
You don't have permission to access the URL on this server. Sorry for the inconvenience.
我們的效果得到驗證，即使寫入也不能執(zhí)行。
5.必須要寫入權(quán)限但是又包含php文件的目錄。
例如我的用的郵件通知插件目錄內(nèi)有cache和和log目錄，是必須有寫入權(quán)限的
這里千萬不要犯懶，直接給CommentToMail寫入
location ~ /(usr/uploads|usr/plugins/CommentToMail/cache|usr/plugins/CommentToMail/log)/.*\.(php|php5)?$
{
deny all;
}
既可以實現(xiàn)寫入文件，又可以讓php無法執(zhí)行。
總結(jié)，上面的所有配置：
用戶與PHP運行權(quán)限分離
nginx:apache
執(zhí)行目錄限制
open_basedir
PHP函數(shù)限制
php.ini
特殊目錄關(guān)閉PHP解析
deny all
權(quán)限細(xì)分
xx|xx|xx
歡迎拍磚，同時 起司靶場v2 上線，完全脫離安全鎖之類的軟件，歡迎測試。
起司靶場v2
如何學(xué)習(xí)
SEO搜索引擎優(yōu)化
規(guī)范：在<style></style>中寫CSS代碼
CSS的注釋是/**/
選擇器 {
聲明1;
聲明2；
}
在CSS文件里不用寫<style>標(biāo)簽
CSS的優(yōu)勢：
作用：選擇頁面上的某一個或者某一類元素
偽類：就是有一些條件
1.選擇第一個子元素
ul li:first-child {
}2.選擇最后一個子元素
ul li:last-child {
}3.選擇當(dāng)前元素的父級元素的子元素的第一個，且是p，在本例中。這個是按照類型進(jìn)行選擇
p:nth-child(1) {
}4.選中父元素下的p元素的第二個，這個是按照順序選擇
p:nth-of-type(1) {
}屬性選擇器的格式
1.屬性名：存在id屬性的元素 a[id]{
}
2.屬性名=屬性值：a[id=first]{
}
注意：=是絕對等于 *=是包含這個元素
3.a中href中以http開頭的 a[href^=http]{
}
注意：可以使用正則表達(dá)式span標(biāo)簽：重點要突出的字使用span標(biāo)簽括起來
1.字體 font-family:字體1, 字體2,...;
2.字體大小 font-size:20px;
3.字體粗細(xì) font-wigth:bold或者使用數(shù)字最大是900;
4.字體的顏色 color:顏色;
5.字體風(fēng)格 font-style:italic;
綜合寫法：
font:字體粗細(xì), 字體大小/字體行高, 字體, 字體顏色, 字體的;1. 顏色 color
2. 文本對齊方式 text-slign:center;
3. 首行縮進(jìn) text-indent:2em;//1em代表一個字符
4. 行高 line-height:200px;行高和塊的高度一致，就可以上下居中
5. 下劃線 text-decoration: underline;
6. 中劃線 text-decoration: line-through;
7. 上劃線 text-decoration: overline;
8. 超鏈接偽類
a{
默認(rèn)顏色
}
a:hover {
鼠標(biāo)觸及的顏色
}
a:active {
鼠標(biāo)點擊未釋放的顏色
}
9. 文本陰影 text-shadow:顏色 水平偏移 垂直偏移 模糊半徑;<style>
li {
list-style:nonoe; //列表去掉點
}
</style>背景圖片
background-image:url("path");
默認(rèn)是平鋪的
background-repeat: ;
background-position:x y;
綜合寫法：
background:背景顏色 url("") x方向位置 y方向位置 平鋪 背景顏色漸變
<style>
form{
border: 1px red solid;
}
</style>綜合寫法：
margin:上 下 左 右;
外邊距的妙用：居中元素
margin:0 auto;居中 前提：外面的元素是個塊元素，塊元素有固定的寬度 內(nèi)邊距一樣
盒子的計算方式，你這個元素到底多大?
元素的大小=margin +border + 內(nèi)容的寬度
border-radius: 左上 右上 右下 左下;box-shadow:陰影樣子, x偏移量, y偏移量, 模糊半徑, 陰影顏色;自上而下的排布
行內(nèi)元素可以被包含在塊級元素中，反之不可以
1.浮動：會使元素向左或向右移動，其周圍的元素也會重新排列。
元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。
一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
浮動元素之后的元素將圍繞它。
浮動元素之前的元素將不會受到影響。
如果圖像是右浮動，下面的文本流將環(huán)繞在它左邊：
2.相鄰的浮動元素：如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。
3.清除浮動：元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性。clear 屬性指定元素兩側(cè)不能出現(xiàn)浮動元素。這樣既有浮動的效果，也有塊元素的效果
clear:right;右側(cè)不允許有浮動
clear:left;左側(cè)不允許有浮動
clear:both;兩側(cè)都不允許有浮動float:right;右浮動
float:left;左浮動浮動后，元素不在父級元素里
解決方案：
相對于自己原來的位置，進(jìn)行偏移
position: relative;
top: -20px;
botom: 20px;
left: 20px;
right: 20px;相對定位的話，他原來的位置會被保留，不會脫離標(biāo)準(zhǔn)文檔流
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;絕對定位后，他不在文檔標(biāo)準(zhǔn)流，原來的位置不保留
position: fixed;
top: 10px;
bottom: 10px;
left: 20 px;
right: 20px;相對于瀏覽器的位置，固定不動
就是把圖層置頂、置地
opacity:0.5;設(shè)置透明度
filter:alpha(opacity=0.5);
@keyframes規(guī)則是創(chuàng)建動畫，規(guī)則內(nèi)指定一個CSS樣式和動畫將逐步從目前的樣式更改為新的樣式示例：
@keyframes myfirst {
from {background: red;}
to {background: yellow;}
}使用@keyframes創(chuàng)建動畫，把他綁定到一個選擇器上，否則動畫不會有效果，指定至少把這兩個CSS3的動畫屬性綁定向一個選擇器：
1.規(guī)定動畫名稱
2.規(guī)定動畫的時長 不指定時長，動畫無效，因為默認(rèn)的時長為0示例：
把myfirst動畫綁定到div元素上，動畫時長5秒
div {
animation: myfirst 5s;
}屬性 | 描述 | CSS |
@keyframes | 規(guī)定動畫。 | 3 |
animation | 所有動畫屬性的簡寫屬性。 | 3 |
animation-name | 規(guī)定 @keyframes 動畫的名稱。 | 3 |
animation-duration | 規(guī)定動畫完成一個周期所花費的秒或毫秒。默認(rèn)是 0。 | 3 |
animation-timing-function | 規(guī)定動畫的速度曲線。默認(rèn)是 "ease"。 | 3 |
animation-fill-mode | 規(guī)定當(dāng)動畫不播放時（當(dāng)動畫完成時，或當(dāng)動畫有一個延遲未開始播放時），要應(yīng)用到元素的樣式。 | 3 |
animation-delay | 規(guī)定動畫何時開始。默認(rèn)是 0。 | 3 |
animation-iteration-count | 規(guī)定動畫被播放的次數(shù)。默認(rèn)是 1。 | 3 |
animation-direction | 規(guī)定動畫是否在下一周期逆向地播放。默認(rèn)是 "normal"。 | 3 |
animation-play-state | 規(guī)定動畫是否正在運行或暫停。默認(rèn)是 "running"。 | 3 |
CSS3中，我們?yōu)榱颂砑幽撤N效果可以從一種樣式轉(zhuǎn)變到另一個的時候
CSS3 過渡是元素從一種樣式逐漸改變?yōu)榱硪环N的效果。
要實現(xiàn)這一點，必須規(guī)定兩項內(nèi)容：
示例：
div {
transition: width 2s;
}div {
transition: width 2s, height 2s transfrom 2s;
}屬性 | 描述 | CSS |
transition | 簡寫屬性，用于在一個屬性中設(shè)置四個過渡屬性。 | 3 |
transition-property | 規(guī)定應(yīng)用過渡的 CSS 屬性的名稱。 | 3 |
transition-duration | 定義過渡效果花費的時間。默認(rèn)是 0。 | 3 |
transition-timing-function | 規(guī)定過渡效果的時間曲線。默認(rèn)是 "ease"。 | 3 |
transition-delay | 規(guī)定過渡效果何時開始。默認(rèn)是 0。 | 3 |
CSS3 轉(zhuǎn)換可以對元素進(jìn)行移動、縮放、轉(zhuǎn)動、拉長或拉伸。
轉(zhuǎn)換的效果是讓某個元素改變形狀，大小和位置。
1.translate(): translate()方法，根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)，從當(dāng)前元素位置移動。
示例：
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}2.rotate()：在一個給定度數(shù)順時針旋轉(zhuǎn)的元素。負(fù)值是允許的，這樣是元素逆時針旋轉(zhuǎn)。
示例：
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}3.scale()：該元素增加或減少的大小，取決于寬度（X軸）和高度（Y軸）的參數(shù)
示例:
-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 標(biāo)準(zhǔn)語法 */4.skew(): 包含兩個參數(shù)值，分別表示X軸和Y軸傾斜的角度，如果第二個參數(shù)為空，則默認(rèn)為0，參數(shù)為負(fù)表示向相反方向傾斜。
示例：
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}1.rotateX()：圍繞其在一個給定度數(shù)X軸旋轉(zhuǎn)的元素。
示例：
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 與 Chrome */
}2.rotateY()：圍繞其在一個給定度數(shù)Y軸旋轉(zhuǎn)的元素。
示例：
div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 與 Chrome */
}3.轉(zhuǎn)換屬性
屬性 | 描述 | CSS |
transform | 向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。 | 3 |
transform-origin | 允許你改變被轉(zhuǎn)換元素的位置。 | 3 |
transform-style | 規(guī)定被嵌套元素如何在 3D 空間中顯示。 | 3 |
perspective | 規(guī)定 3D 元素的透視效果。 | 3 |
perspective-origin | 規(guī)定 3D 元素的底部位置。 | 3 |
backface-visibility | 定義元素在不面對屏幕時是否可見。 | 3 |
序列 | 術(shù)語 |
1 | 容器和項目是容器的子元素，容器為父元素(container / item) |
2 | 主軸與交叉軸(main-axis / cross-arxis) |
3 | 起始線與結(jié)束線(flex-start / flex-end) |
序號 | 屬性 | 描述 |
1 | flex-direction | 設(shè)置容器中的主軸方向：行/水平方向，列/垂直方向 |
2 | flex-wrap | 是否允許創(chuàng)建多行容器，即flex項目一行排列不下時，是否允許換行 |
3 | flex-flow | 簡化flex-direction和flex-wrap屬性 |
4 | justify-content | 設(shè)置flex項目在主軸上的對齊方式 |
5 | align-items | 設(shè)置flex項目在交叉軸上的對齊方式 |
6 | align-content | 多行容器中，項目在交叉軸上的對齊方式 |
序號 | 屬性 | 描述 |
1 | flex-basis | 項目寬度：項目分配主軸剩余空間之前，項目所占據(jù)的主軸空間高度 |
2 | flex-grow | 項目的寬度擴(kuò)展：將主軸上的剩余空間按比例分配給指定項目 |
3 | flex-shrink | 項目的寬度收縮：將項目上多出空間按比例在項目間進(jìn)行縮減 |
4 | flex | 上面三個屬性的簡化縮寫flex: flex-grow flex-shrink flex-basis |
5 | align-self | 單獨定義某個項目在交叉軸上的對齊方式 |
6 | order | 自定義項目在主軸上的排列順序，默認(rèn)為0書寫順序，值越小位置越靠前 |
序號 | 屬性 | 描述 |
1 | flex-direction | 設(shè)置主軸方向 |
2 | flex-wrap | 設(shè)置多行容器 |
3 | flex-flow | flex-direction和flex-wrap縮寫 |
1.flex-direction屬性值
序號 | 屬性 | 描述 |
1 | row | 默認(rèn)：主軸為水平方向(從左到右) |
2 | row-reverse | 主軸為水平方向(從右到左反序) |
3 | column | 設(shè)置主軸為垂直方向(從上到下) |
4 | column-reverse | 設(shè)置主軸為垂直方向(從下到上) |
2.flex-wrap屬性值
序號 | 屬性 | 描述 |
1 | nowrap | 默認(rèn)：不換行，此時忽略項目尺寸 |
2 | wrap | 允許換行此時項目尺寸有效，即允許創(chuàng)建多行容器 |
3.flex-flow屬性值
flex-flow: 主軸方向 多行容器
主軸上要有剩余空間對齊才有效
序號 | 屬性值 | 描述 |
1 | flex-start | 默認(rèn)：所有項目與主軸起始線對齊 |
2 | flex-end | 所有項目與主軸終止線對齊 |
3 | center | 所有項目與主軸中間線對齊，居中對齊 |
4 | space-between | 兩端對齊：剩余空間在頭尾項目之外的項目平均分配 |
5 | spcae-around | 分散對齊：剩余空間在每個項目兩側(cè)平均分配，每個項目兩邊的空間一樣 |
6 | space-evenly | 平均對齊：剩余空間在每個項目之間平均分配 |
序號 | 屬性值 | 描述 |
1 | flex-start | 默認(rèn)所有項目與交叉軸起始線對齊 |
2 | flex-end | 所有項目與交叉軸終止線對齊 |
3 | center | 所有項目與交叉軸中間線對齊，居中對齊 |
注意
屬性：align-content
序號 | 屬性值 | 描述 |
1 | stretch | 默認(rèn)：項目拉伸占據(jù)整個交叉軸 |
2 | flex-start | 所有項目與交叉軸起始線(頂部)對齊 |
3 | flex-end | 所有項目與交叉軸終止線對齊 |
4 | center | 所有項目與交叉軸中間線對齊：居中對齊 |
5 | space-between | 兩端對齊：剩余空間在頭尾項目之外的項目間平均分配 |
6 | space-around | 分散對齊：剩余空間在每個項目兩側(cè)平均分配 |
7 | space-evenly | 平均分配：剩余空間在每個項目之間平均分配 |
注意：多行容器中，交叉軸上可能會有多個項目，剩余空間在項目之間分配才有意義
多行容器也只是只有一個主軸和一個交叉軸，只是在主軸上放不下了換行形成的
屬性：align-self
序號 | 屬性值 | 描述 |
1 | auto | 默認(rèn)值：auto，繼承align-items屬性值 |
2 | flex-start | 與交叉軸起始線對齊 |
3 | flex-end | 與交叉軸終止線對齊 |
4 | center | 與交叉軸中間線對齊：居中對齊 |
5 | stretch | 在交叉軸方向上拉伸 |
6 | baseline | 與基線對齊 |
用來調(diào)整每個項目在主軸上排列順序
屬性值為0，默認(rèn)值按書寫順序顯式，屬性值為值越大越靠后顯示
flex-grow屬性
flex-shrink屬性
flex-basis屬性
優(yōu)先級：項目大小<flex-basis<min-width/height
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
