Home » Posts tagged "css"

純 CSS 的追蹤技巧

Hacker News 上看到的 PoC,程式碼就放在 GitHubjbtronics/CrookedStyleSheets 上。能追蹤的細節當然比較少,不過透過 CSS 還是有不少資訊可以蒐集。

像是連結被觸發時:

#link2:active::after {
    content: url("track.php?action=link2_clicked");
}

瀏覽器的資訊:

@supports (-webkit-appearance:none) {
    #chrome_detect::after {
        content: url("track.php?action=browser_chrome");
    }
}

字型的 fingerprint:

/** Font detection **/@font-face {
    font-family: Font1;
    src: url("track.php?action=font1");
}

#font_detection1 {
    font-family: Calibri, Font1;
}

捲頁行為:

@keyframes pulsate {
    0% {background-image: url("track.php?duration=00")}
    20% {background-image: url("track.php?duration=20")}
    40% {background-image: url("track.php?duration=40")}
    60% {background-image: url("track.php?duration=60")}
    80% {background-image: url("track.php?duration=80")}
    100% {background-image: url("track.php?duration=100")}
}

算是提供了不少除了 <noscript></noscript> 外的手段,不過一般網站要引入這些技巧需要改不少東西就是了... (或是需要透過 server side plugin 的修改進行追蹤)

Flat UI 反而造成使用者困擾

在「Flat UI Elements Attract Less Attention and Cause Uncertainty」這邊透過追蹤眼球的技術,發表了研究結果:

Summary: Flat interfaces often use weak signifiers. In an eyetracking experiment comparing different kinds of clickability clues, UIs with weak signifiers required more user effort than strong ones.

其中最明顯的一個例子就是大家被訓練「有底線的文字應該可以按」,這也是最能馬上被想到的問題... 不過這算是 Flat UI 的問題嗎?

The popularity of flat design in digital interfaces has coincided with a scarcity of signifiers. Many modern UIs have ripped out the perceptible cues that users rely on to understand what is clickable.

Firefox Nightly 的 Stylo

Firefox 的 Nightly 納入 Stylo 了,一個用 Rust 開發的套件,可以將 Servo 的 CSS style system 整進 Gecko 內:「Stylo is ready for community testing on Nightly!」。

Stylo (a.k.a. Quantum CSS) will integrate Servo's CSS style system into Gecko, such that the style system code can be shared by Gecko and Servo.

Quantum CSS, aka Stylo, aims to integrate Servo’s parallelized CSS style system written in Rust into Gecko.

Mozilla 把愈來愈多的東西都改用 Rust 寫了...

Web Cache Deception Attack

在「How (Not) to Control Your CDN」這邊看到了「Web Cache Deception Attack」這個攻擊方式。

攻擊的手法是利用網站會把 /user/personal-info/foo.css/user/personal-info 視為一樣的內容時,配合 CDN 或是 reverse proxy server 會把 .css 設定無差異 cache 時,就可以在 cache server (cache edge) 取得使用者的敏感資料。

這主要是 url routing 的條件放太寬造成的。

另外 Mark Nottingham 還建議 cache 應該在 origin server 上控制,而非在 CDN 上設定。也就是說,在 origin server 上送出 Cache-Control,讓 CDN 或是 reverse proxy server 使用這個值來判斷 cache。

Trac 的 button 有時候按下去不會生效的問題...

Trac 時常遇到的問題之一:

當 button 按的「不夠中間」的時候就不會有效。原因是按下去後會觸發物件偏移,如果你按到比較邊邊的地方就會失效:

input[type=button]:active, input[type=submit]:active,
input[type=reset]:active {
 position: relative;
 top: .1em;
 left: .1em;
}

解法就是在 template 加上:

input[type=button]:active, input[type=submit]:active, input[type=reset]:active {
    top: 0;
    left: 0;
}

讓他不要亂跑就沒事了...

Archives