HarekazeCTF2018 Web250 : A custom css for the flag

Thanks for playing! 日本語による説明はこの下

English version

Let’s decorate with fashionable CSS in this site.

Don’t DOS Attack.

You can inject css to flag.html . After searching, you’ll find following sites.

You can know that the flag consists of -CFHT_abcdefiklmnorstuz{}. (The poc of Masato Kinugawa's Security Blog have a typo. Don’t forget “r”)

But this is not enough to detect the flag.

NEXT STEP

Check ::first-line pseudo-element and animation.

https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line

https://developer.mozilla.org/en-US/docs/Web/CSS/animation

You can apply font-family only on the first line. In additional, the first line can change dynamically by animation.

So you can know the order of consisting characters. (note: Browsers will prefetche fonts with some animations.You can’t use these animation. )

You can create RegExp and detect 2 CSS properties. (CSS reference - CSS MDN)

/.*?b.*?o.*?d.*?-.*?t.*?m.*?l.*?f.*?i.*?u.*?s.*?/border-bottom-left-radius

/.*?m.*?a.*?-.*?d.*?e.*?c.*?t.*?i.*?o.*?n.*?/animation-direction

answer : HarekazeCTF{border-bottom-left-radius_animation-direction}

Sample: https://gist.github.com/KageShiron/bb920ae6678d659de5b1949921942fca

Japanese version / 日本語版

HarekazeCTFお疲れまさでした。とり急ぎ、私の作問したA custom css for the flagについての想定解です。総当たりは不要です!

想定解

Masato Kinugawa Security Blog: @font-faceのunicode-rangeを利用してCSSだけでテキストを読み出す

これで使用される文字の種類が取れるので大幅に絞り込むことができます。

しかし、文字種だけで絞り込むのは困難なので、animationと::first-line擬似クラスを組み合わせてリクエストの順番を前から、後ろからに確定させることができます。::first-lineではなくtext-overflowでも似たような結果が得られるかもしれません。(検証不十分)。

なお、アニメーションの方向によってはブラウザが結果を計算して全部の文字をプリロードしてしまうようです。それでは使えないので、別のアニメーションを利用してください。

これにより、以下が得られます。

フラグはCSSのプロパティを2つ組み合わせたものなので、/.*?b.*?o.*?d.*?-.*?t.*?m.*?l.*?f.*?i.*?u.*?s.*?//.*?m.*?a.*?-.*?d.*?e.*?c.*?t.*?i.*?o.*?n.*?/という正規表現が求まります。仕様書なりCSS reference - CSS MDNから探せば一意に求まります。

よってフラグはHarekazeCTF{border-bottom-left-radius_animation-direction}でした。

sample : https://gist.github.com/KageShiron/bb920ae6678d659de5b1949921942fca