在固定大小的排版中做圖片選取

之前所用的圖片裁切介面(MooCrop 正方形選取( Square ))
在大尺寸圖片的選取上不是很直覺
明明就只是要裁出一張固定大小的圖
卻暫了大量的版面配置
所以我採用網路地圖的機制做了一個裁切工具
這個想法目前還只是個雛形

展示頁面(Demo Page)

OWASP 2008 資訊安全年會-心得

年會都快過一個星期了，終於在六日將筆記中的紀錄作了整理，雖然都是觀念上的問題，但如果你以前沒有這些觀念的話，請現在開始養成，因為這些都是很重要的問題。

在開發過程就該考慮安全問題

在系統發展生命週期(System Development Life Cycle[SDLC])中就應該考量安全性問題，甚至是在系統設計階段，一個好的設計可以提升系統安全性，可是一個壞的設計，卻會讓整個系統漏洞百出。

別相信[先求有再求好]這句話，因為錯誤的決策很有可能讓整個網站打掉從練，那怕是開發一年多的系統都會有可能碰到這個問題，不如現在多花 2 小時，未來省 10 小時。

Server 管理介面是否安全

別以為將管理頁面放在別人連不到的地方就可以放心，像 phpMyAdmin 這類的頁面常常被放再公開的網站目錄下，即使是換了名稱還是會有被猜到的可能，所以在公開的網站目錄下避免放置這類的管理介面。

在網站目錄下是否有不應該存在的檔案

常常在上線更新時將整個系統壓縮檔放在網站目錄下，如果不甚檔名被別人 try 出來了，那整個系統的架構都會被看光，甚至 DataBase 的帳號跟密碼都會外洩，所以在網站目錄下的檔案管理對整個安全性是非常重要的。

系統設定是否安全

在 Web Server 或其他 Server 的設定是否有安全性的漏洞，Web Server 會有可以跨目錄的設定，這常常會是 Server 的機密外洩的漏洞之一，而且有許多漏洞是在系統上線後產生的，由於 Server 環境的不同造成漏洞的出現。

相關文章：
Apache 安全設定-1
Apache 安全設定-2
PHP SQL Injection 和 XSS 的偵測程式 和 程式撰寫注意事項 - 2008

便利性與安全性是互相矛盾的

在這次的講習後我感覺這兩件事是互相矛盾，雖然不是絕對的，但為了達到好的便利性，就必須在安全問題做更多的處理跟考量，所以在系統的安全防護是有代價的，勢必會花費更多的資源在安全問題上。

互動式網站的漏洞是必然的

只要是互動式網站就會有漏洞，不管是系統上或者是個人資料的處理，或多或少都會有漏洞的存在。

新的技術必定伴隨著新的安全問題

新的技術尚未經過時間的考驗，所以必然會存在未被發現的漏洞，在目前的許多新軟體都有這樣的狀況，甚至是軟體 Update 之後又出現新的漏洞。

個人資料外流得可能性？

網站沒有 100% 的安全機制，與其期望對方的網站系統，不如做好自我保護，別將太過私密的資料放在網路上，因為那個風險實在太高了，那怕是 0.01% 的可能，因為只要過了那唯一的防線後就是海闊天空了，資料就會很快的被散播出去，很帥的事，這份資料就會被備份一百份或一千份，甚至更多。

別忽視安全性測試

人的能力是有限的，總會疏忽一些事情造成一些漏洞的出現，所以還是需要程式去檢查是否有漏洞的存在，雖然光靠[黑箱測試]及[白箱測試]可以找出大部分的漏洞，仍然會有程式找不到的錯誤，還是需要人為去校定。

別太相信自己的能力

在太過於自負的時候，人總會看不到潛在的問題，當你覺得這是安全的時候，請記得查證你的作法及環節是不是會有漏洞的出現。

用 CSS 實現 blogger [繼續閱讀]的方法

雖然與白花花所寫的在blogger實現繼續閱讀的作法是用同樣的方法，但為了增加使用上的彈性，我做了不一樣的基本設定，讓任何 HTML Tag 只要套用 fullpost 這個 ClassName 就可以在部分閱覽中隱藏。 在 <b:skin> 中的 CSS 設定：

/*部分隱藏樣式*/
.posts-index .fullpost{
  display:none;
}

在詳細樣版中找到 <data:post.body/> 這行，並修改成以下形式：

<div expr:class='"post-body
     entry-content
     posts-"+data:blog.pageType'>
  <data:post.body/>
  <div style='clear: both;'/> <!-- clear for photos floats -->
<!-- 非單篇顯示時，顯示繼續閱讀 -->
<b:if cond='data:blog.pageType != "item"'>
 <p>
 <b:if cond='data:post.link'>
   <a expr:href='data:post.link'>繼續閱讀...</a>
 <b:else/>
   <a expr:href='data:post.url'>繼續閱讀...</a>
 </b:if>
 </p>
</b:if>
</div>

(IE6) white-space 在表格中怪問題

最近遇到一個怪問題 在 IE6 的表格中設定 white-space 屬性卻無效 只因為 IE6 怪異的 box 解析方式 對於用 px 設定的寬度有至高的優先權 完全忽略 white-space 的存在 解決的辦法就是用百分比(%)定寬

<table border="1"><tr>
  <td>彈性欄位</td>
  <td style="width: 1px; white-space: nowrap;">文字測試</td>
  <td style="width: 1%; white-space: nowrap;">文字測試</td>
</tr></table>

IE6 的呈現：

CSS fixed 定位( FF / IE6 )

fixed 定位主要是以 window 物件區塊做定位依據，所以不會隨頁面捲動而變動定位。

以往要達成這種模式的定位都要利用 JavaScript 的 onscroll 事件去達成，是蠻吃重的一種方法，而且流暢度也不好，會有閃爍的現象。

利用 fixed 定位可以簡化 JavaScript 的開發和負擔，而且又穩定且簡單設定。

body{
    height:1200px;

    /* prevent screen flash in IE6(解決 IE6 不正常閃爍) */
    background:url(nothing.txt) white fixed;
}

div{
    background:#FF0066;
    border:4px solid #FF9999;
}

/* 水平置中 */
.fixed-center{
    width:100px;
    height:100px;
    position:fixed;
    top:50%;
    left:50%;

    /* 上邊界計算 */
    /* -(border-top-width + padding-top + (height/2) ) */
    /* 或者是整體高除以二(offsetHeight/2) */
    margin-top:-52px;

    /* 左邊界計算 */
    /* -(border-left-width + padding-left + (width/2) ) */
    /* 或者是整體寬除以二(offsetWidth/2) */
    margin-left:-52px;

    /* position fixed for IE6 */
    _position: absolute;
    _margin-top:0;

    /* clientHeight:不包含邊匡的區塊高度( padding + height ) */
    /* offsetHeight:包含邊匡的區塊高度( border + padding + height ) */
    _top:expression(documentElement.scrollTop + ( documentElement.clientHeight-this.offsetHeight )/2
    );
}

.fixed-top-center{
    width:100px;
    height:100px;
    position:fixed;
    top:0;
    left:50%;
    margin-left:-52px;

    /* position fixed for IE6 */
    _position: absolute;
    _top:expression(documentElement.scrollTop);
}

.fixed-bottom-center{
    width:100px;
    height:100px;
    position:fixed;

    bottom:0;
    left:50%;
    margin-left:-52px;

    /* position fixed for IE6 */
    _position: absolute;
    _top:expression( documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight );
}

展示頁面(Demo Page)

參考來源：上下左右置中、不隨頁面捲動的內容-小正正教室

create_function 匿名函數

在 PHP 中的函數只要宣告後就是全域的，而且還不能修改，不小心就會撞名，真是麻煩的事，而且實體宣告在當做變數傳遞時非常麻煩，最近習慣 JavaScript 的函數傳遞方法，為了達到這個作法，PHP 中有一個匿名函數的宣告方法，會直接已變數的形式呈現，可惜的事在宣告上必須用字串編寫，也是很麻煩，但總比沒有好。

<?php
    $newfunc = create_function('$a,$b', 'return $a + $b');
    echo $newfunc(2,5);

參考來源：PHP Manual

利用 JavaScript 讓 IE6 支援 CSS 2.0 hover 的方法

利用 IE6 特有的 expression 屬性質，去執行 JavaScript 程式。
好處是可以簡化開發，讓設計師可以自己去控制想要的樣式。
壞處是執行大量的 expression 會讓 IE6 很吃重。


ie_hover.htc 中的程式碼：

this.onmouseover=function(){
    if(!this.className.match(/(^|\s)hover(\s|$)/)){
        this.className=(this.className+' hover')
            .replace(/\s{2,}/g,' ')
            .replace(/^\s+|\s+$/g, '');
    }
}
this.onmouseout=function(){
    this.className=this.className
        .replace(/(^|\s)hover(\s|$)/,' ')
        .replace(/\s{2,}/g,' ')
        .replace(/^\s+|\s+$/g, '');
}
this.style.behavior=null;

ie_hover.html 中的 CSS：

p{
    padding-left:30px;
    behavior: url(ie_hover.htc);
}
p:hover,
p.hover{
    padding-left:0;
}

展示頁面(Demo Page)

CSS 三欄排版

1. float 排版
   
   這是在 Table 排版之後最常見的排版方式，利用 float 與 clear 的屬性設定去達成的分欄排版。
   
   最近發現除了利用 clear 屬性的空 Tag 以外還有其他的方式可以達到這個效果，在最外層的 div 上加入以下屬性也可以達到相同的效果：
   

   * html #demo_1{
       height: 1%;
   }
   #demo_1:after {
       content: ".";
       display: block;
       height: 0;
       clear: both;
       visibility: hidden;
   }
   #demo_1 {
       zoom: 1;
   }
   

   
   
   
2. table 排版
   
   這是最早期排版方式，雖然有種種的缺點，但還是有很多網站使用，除了利用原有的 Table Tag，也可以使用其他 Tag 設定 display 屬性去達到 Table 排版的效果，雖然在寬度的定義上的彈性，但還是建議保持只有一個欄位的彈性寬度，過多的彈性寬度只會造成意想不到的後果。
   
   
   
3. margin and float 排版
   
   這是利用中欄的 margin 屬性空出側欄位空間，再利用 float 及負邊界方式去達成的三欄排版，因為 float 屬性不會對整體高度做出貢獻，如果需要側欄的高度影響，必須上擁有 clear 屬性的 Tag 或利用第一個範例的方法，由於中欄沒有 float 屬性所以不能在內容使用 clear 屬性。
   
   
   
4. margin and position排版
   
   這是利用中欄的 margin 屬性空出側欄位空間，再利用 position 的定位方式去達成的三欄排版，因為 position 屬性不像 float 屬性，可以利用 clear 屬性做出高度的貢獻，所以側欄的高度不可以大於主欄，要不然會造成顯示重疊。
   
   
   
5. padding and float排版
   
   這是結合 (float 排版) 及 (margin and float 排版) 的排版方式，主要是解決 (margin and float 排版) 的主欄中不可以使用 clear 屬性的問題，CSS 的差別只在於利用外匡的 padding 屬性去做預留空間的設定。

優劣差異：

	float	table	margin float	margin position	padding float
靈活性	高	低	高	高	高
親和力	高	低	高	高	高
HTML 結構	簡單	複雜	簡單	簡單	簡單
寬度彈性	no	yes	yes	yes	yes
允許彈性的欄位數	0	all	1	1	1
overflow 容錯	低	高	低	高	低
瀏覽器的解析差異	小		小	小	小
欄位的高度影響	all	all	all	1	all

展示頁面(Demo Page)