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