Tag: css

Home » Posts tagged "css"

Trac 關票時的資訊...

Trac 關票時一般都是由開票的人關 (i.e. Reporter)，今天遇到的情況是這樣，在關票時的畫面上你會不知道是誰開的：

只要往上一點拉就會看到 Reporter 資訊 XD 這通常會發生在螢幕沒打直的人，直接拉到最下方的情況 XD

試著用 CSS 的 position: sticky 但抓不太到要的效果，決定還是開 jQuery 下去解決 XD

        // Copy reporter information to action section
        if ($('#action_resolve_resolve_resolution').length > 0) {
            var reporter = $('#h_reporter').parent().find('.trac-author, .trac-author-user')[0].outerHTML;

            $('#action_resolve_resolve_resolution').each(function(){
                $(this).parent().append('<span class="hint">(This ticket is created by ' + reporter + ')');
            });
        }

當下寫得很隨性，之後也許會再改... (會更新到「Trac - Gea-Suan Lin's Wiki」這邊)

Computer, CSS, Murmuring, Network, Programming, Software, WWWNo Comment

相對路徑的攻擊方式 (Relative Path Overwite，RPO)

在「Large-scale analysis of style injection by relative path overwrite」這邊看到的，記得這個方式不是新方法，不過還是有人會中...

這種攻擊是組合技，基礎是引用 css 或是 js 時使用相對路徑 (像是 static/style.css 這樣的引用法)，再加上 https://www.example.com/a.php 這樣的頁面通常也可以吃 https://www.example.com/a.php/，甚至是後面再加東西... 在某些情境下組不出來，但精心策劃後就有機會在頁面上弄出奇怪的 xss 或是其他攻擊了。而論文內列出了常見的的組合：

然後拿 Alexa 的排名來看，其實還是有些站台可以打：

防禦的方式也不算太難，absolute path 是個還不錯的方式：

One option is to use only absolute URLs, taking away the relative path expansion.

而 base tag 也是個方式 (不過在 IE 上還是有問題)：

Alternatively you can specify a base tag, though Internet Explorer did not appear to implement the tag correctly (i.e., was still vulnerable) at the time of the evaluation.

另外作者也提到了 document type 的方式 (看起來是建議用 html5 的 <!DOCTYPE html>)，然後 IE 另外做些處理避免失效：

One of the best mitigations is to avoid exploitation by declaring a modern document type that causes rendering in standards compliant mode. This defeats the attack in all browsers apart from IE. For IE it is also necessary to prevent the page being loaded in a frame by using X-Frame-Options , using X-Content-Type-Options to disable ‘content type sniffing,’ and X-UA-Compatible to turn off IE’s compatibility view.

不過大型站台本來就因為業務需求，會把 asset domain 切開 (然後透過 CDN 加速)，而且會設計系統讓 programmer 很容易使用這樣的架構，反而因此比較不會用到 relative path，中這個攻擊的機會就低多了...

Browser, Computer, CSS, Murmuring, Network, Security, Software, WWWNo Comment

Bootstrap 的 CDN 從 MaxCDN 換到 StackPath (Highwinds) 了...

最近在寫網頁時發現 Bootstrap 的網站上給的 CDN 網址改了，從本來用的 maxcdn.bootstrapcdn.com (MaxCDN) 變成 stackpath.bootstrapcdn.com (StackPath，本來的 Highwinds)。

而且看起來跟 MaxCDN 的合作已經全部停了，現在 maxcdn.bootstrapcdn.com 也是指到 StackPath 上。

翻了 Wayback Machine 上的記錄，看起來是在 20180409045017 與 20180410051321 這之間換的，也就是大約是在 2018/04/10 前後換的。不知道後面的交易是什麼...

可以參考 K 社的 SmokePing 資料「SmokePing Latency Page for netdna.bootstrapcdn.com (NetDNA, Bootstrap)」：

可以看到 HiNet 走的點的latency 比之前好不少...

CDN, Cloud, Computer, CSS, Library, Murmuring, Network, Programming, Service, Software, WWW2 Comments

fontconfig fallback 機制與 CSS font-family fallback 機制的衝突...

自己搞不定，加上需要有圖才比較好理解，所以發篇文章問看看...

起因是在 Twitter 上發現某篇文章的截圖，在我的機器上顯示是 sans-serif 類的字型，而對方顯示的是 serif (看起來像是 Mac 的機器上)：

而翻了網站本身的 CSS 設定，發現是設成 serif，所以表示我這邊的設定有問題...

找了些資料並且測試，發現是 Linux 上 fontconfig 所設計的 fallback 機制跟一般人認知的不一樣，使得 CSS font-family fallback 機制直接失效...

在那篇文章的 font-family 設定是「medium-content-serif-font,Georgia,Cambria,"Times New Roman",Times,serif」，所以你會假設 medium-content-serif-font (這是 Medium 設定的 web fonts) 內沒有的字型會去 Georgia 找，然後依序是 Cambria、Times New Roman 與 Times，最後到 serif。

但在 Linux 下的 fontconfig 的設計則跟這點衝突。當你丟 medium-content-serif-font 查詢時，系統會將全系統有的字型都給你 (但是排序好)，而不是只有找 medium-content-serif-font 這個字型：

gslin@GSLIN-HOME [~] [22:11/W2] fc-match -s 'medium-content-serif-font' | wc -l
122
gslin@GSLIN-HOME [~] [22:11/W2] fc-match -s 'medium-content-serif-font' | head 
FreeMono.ttf: "FreeMono" "Regular"
FreeSans.ttf: "FreeSans" "Regular"
FreeSerif.ttf: "FreeSerif" "Regular"
opens___.ttf: "OpenSymbol" "Regular"
LinLibertine_R_G.ttf: "Linux Libertine G" "Regular"
Norasi.ttf: "Norasi" "Regular"
KacstOne.ttf: "KacstOne" "Regular"
FiraSans-Regular.otf: "Fira Sans" "Regular"
NanumGothic.ttf: "NanumGothic" "Regular"
fonts-japanese-gothic.ttf: "TakaoPGothic" "Regular"

而因為將所有系統內有的字型都放進去了，所以 font-family 第二個設定基本上都沒用了，因為我裝了一堆語系的文字... Orz

而我想要關閉這套機制，卻發現看起來關不掉：「How to block glyph fallback on Linux?」。

後來想要找 workaround 來解這個問題，不過看起來沒有堪用的 workaround。所以就來問問看有沒有人有建議...？

Computer, CSS, Murmuring, Network, Software, WWWNo Comment

擋 mobile.twitter.com 上的廣告

在桌機上面用 mobile.twitter.com 速度比 twitter.com 快很多，所以平常用桌機時都是用 mobile 這個版本在逛，但因為 mobile 版本對 css name 有處理過，使得 uBlock Origin 這類軟體不好處理廣告的部份...

前陣子在日本的時候發現頁面上多了一堆廣告，本來以為是在日本用日本 IP address 才會有所以就沒有太在意，結果回台灣後發現也出現了... 看起來是 css name 又因為改版被改掉而使得原本的規則失效了...

網路上找其他方法看看有沒有方向，結果找到「Block "Promoted Tweets" on mobile.twitter.com · Issue #351 · uBlockOrigin/uAssets」這篇，雖然最後的 commit 還是用 css name 的方式，但在留言處 Jud 提到可以用 Procedural cosmetic filters 中的 XPath 解決：

mobile.twitter.com##:xpath(/html/body//div[@role="article"][.//text()[starts-with(., "Promoted")]])

這條規則不算難懂，先找出 <div role="article"> 的元素，然後判斷下面的節點有沒有文字化開頭後是 Promoted 的字串。

在還沒有更新規則之前，這個拿來擋一擋應該還行... 不過條件寫的有點簡單，可能會有誤判，也許改抓 div 的「Promoted by 」應該會比較好？也就是這樣：

mobile.twitter.com##:xpath(/html/body//div[@role="article"][.//div[text()[starts-with(., "Promoted by ")]]])

就先這樣搞吧...

Computer, CSS, Murmuring, Network, Software, WWWNo Comment

純 CSS 的追蹤技巧

在 Hacker News 上看到的 PoC，程式碼就放在 GitHub 的 jbtronics/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 的修改進行追蹤)

Browser, Computer, CSS, Murmuring, Network, Privacy, Programming, Software, WWWNo Comment Computer, CSS, Murmuring, Network, WWWNo Comment Browser, Computer, CSS, Firefox, Murmuring, Network, Software, WWWNo Comment

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.

Computer, CSS, Murmuring, Network, Science, Software, WWWNo Comment Cloud, Computer, CSS, Murmuring, Network, Service, WWWNo Comment

Recent Comments

Archives

Blogroll