Styled memo

WebページのURLと、サーバのファイル一式が与えられた。
Webページは、ユーザ登録を行ってログインをした後、以下ができるものだった。

ログイン後最初のページのソースを調べると、class に btn を含む要素の data-content 属性にメモの内容が入っているようだった。

web-styled-memo/django/app/crawler.py より、「adminNOw7YaumにadminNOw7Yaumのメモを確認してもらう」はadminに自分のアカウントにログインさせる機能のようである。
また、メモ用CSSは、css/(ユーザ名)/example.css のような形で表示されていた。
ユーザ名を (もとのユーザ名)/../adminNOw7Yaum とし、example.css をアップロードすると、メモ用CSSの表示が css/adminNOw7Yaum/example.css となった。
この性質を用いると、adminにアップロードしたCSSを参照させることができそうである。

この性質を用い、以下のようにしてflagを求めていった。

  1. 以下の gen.pl を用い、endpointにRequestBin.comのエンドポイントを指定してCSSを作成する。
  2. ユーザ名を (適当な文字列)/../adminNOw7Yaum に設定した上で、作成したCSSを example.css として設定する。
  3. 「adminNOw7YaumにadminNOw7Yaumのメモを確認してもらう」をクリックする。
  4. RequestBin にprefixとsuffixにそれぞれ1文字加わったデータが送られるので、それらを新しいprefixとsuffixとし、新しいCSSを作る。
  5. 2に戻り、flag全体が求まるまで繰り返す。

生成するCSSはprefixやsuffixに1文字足したものを data-content に対する属性セレクタに使用することで、これらの文字列が含まれるメモがあるかを判定するものである。
prefixとsuffixの存在判定を同じ要素で行ってしまうと片方しか送られないようだったので、suffixの存在判定にはメモを含む要素の兄弟を使用するようにした。

An URL of a web page and the files for the server were given.
These functions were available in the web page after registering and logging in:

Reading the source of the first page after logging in, I found that the contents of notes are in data-content attributes of elements whose class contains btn.

Reading web-styled-memo/django/app/crawler.py, I guessed that "adminNOw7YaumにadminNOw7Yaumのメモを確認してもらう" is a function to have the admin to log in his/her own account.
Also, the CSS for notes was shown like css/(username)/example.css.
When I set the username to (previous username)/../adminNOw7Yaum and uploaded example.css, the CSS for notes was displayed as css/adminNOw7Yaum/example.css.
This feature should be useful to have the admin refer uploaded CSS.

Using this feature, I obtained the flag in these steps:

  1. Create a CSS using gen.pl with the "endpoint" set to my endpoint for RequestBin.com.
  2. Set the username to (some string)/../adminNOw7Yaum and upload the created CSS as example.css.
  3. Click "adminNOw7YaumにadminNOw7Yaumのメモを確認してもらう".
  4. The "prefix" and "suffix" with one character added for each of them will be sent to RequestBin, so create a new CSS using them as new "prefix" and "suffix".
  5. Go back to 2 and repeat these steps until the whole flag is revealed.

The CSS to create uses "prefix" and "suffix" with one character added in the attrubute selector for data-content to check if notes that contain these strings exists.
Trying to perform existence check for both of "prefix" and "suffix" using the same element resulted in seeing only one of the results, so I used a sibling node to check "suffix".

gen.pl

FLAG{CSS_Injecti0n_us1ng_d1r3ctory_tr@versal}

WaniCTF 2021