picoCTF_Insp3ct0r/Bookmarklet_writeup
前言
本來打算是一天一題的，但前天興致高昂，一不小心就寫了兩題。
不過，也因為這兩題相對簡單，所以我才能完成這樣的任務。要知道在 picoCTF 平台裡，難的事非常難。我就曾經為了一題足足花了兩天才弄懂。
最後在開始之前和大家分享一個挑題的小技巧。
如果是初學者，可以挑按讚趴數高的，這種題會相對簡單，就如今天要分享的這兩題。
如果是有基礎的人，大可從自己擅長的領域下手。這樣可以使自己看到不一樣的世界。
Insp3ct0r
都說學資安需要先學會通靈，這題就是很典型的例子。
先來看看題目敘述。
題述
- link：picoCTF - picoGym Challenges
- Description：Kishor Balan tipped us off that the following code may need inspection:
https://jupiter.challenges.picoctf.org/problem/41511/(link) or http://jupiter.challenges.picoctf.org:41511 - hint1：How do you inspect web code on a browser?
- hint2：There's 3 parts
其實題目提示的很明顯，他就是要叫我們檢查網址中網頁的 code。不過，要怎麼檢查呢？
開始解題
網頁不外乎就是由 HTML、CSS、Javascript 這三種標籤語言所組成。
如果我們想看這些 code 可以按 F12或按右鍵檢查，右側會碰出看起來很複雜的東西，那個就是 HTML，有的時候也會看到 CSS，很少會看到 Javascript。
會說需要通靈就是在這裡。
我知道這種題目通常會把 flag 藏在註解裡，所以我把 HTML 裡的夾層通通打開。果然，在最下面的地方藏著 flag。正當我暗自竊喜時，定睛一看，他只給了我三分之一個 flag。檢查了老半天也檢查不出個所以然來。當下心想，這鬼才知道另外的三分之一在哪。
後來看了其他人的 writeup 後，一種點點點的心情油然而生。後面就讓我說說這題的作者他的出題邏輯到底是甚麼吧。
回到最一開始，網頁是由 HTML、CSS、Javascript 組成。既然 HTML 檢查完了，那換CSS 和 Javascript 。這題也非常好心的將這兩個的檔案以連結的方式夾在 head 標籤內。點開後，滑到最下方就可以分別拿到另外的三分之一。
結語
他這題不過是想考「網頁是由 HTML、CSS、Javascript 組成」這麼一個簡單的概念而已。而且其實，就算看不懂 HTML、CSS、Javascript 也沒關係，我們只要會找東西就好。所以我也才會說看完writeup 後，會有一種點點點的心情油然而生。
Bookmarklet
這題的含金量比上一題的還高。
想解這題必須要有 HTML、Javascript 的先備知識。
讓我們一起看看這有趣的一題吧。
題述
- link：picoCTF - picoGym Challenges
- Description：Why search for the flag when I can make a bookmarklet to print it for me?Additional details will be available after launching your challenge instance.
- hint1：A bookmarklet is a bookmark that runs JavaScript instead of loading a webpage.
- hint2：What happens when you click a bookmarklet?
- hint3：Web browsers have other ways to run JavaScript too.
他說他既然都已經印書籤給你了，你為甚麼還要去找 flag 呢？
很顯然地它的 flag 應該是藏在書籤裡。
再來給大家看一下網址開起來長啥樣
下面有一串 javascript 的程式碼，而且往下滑還發現，題目非常好心的幫我們把 flag 給解碼出來了。(應該也是因為不想讓我們直接看出答案OwO)
而究竟這串程式碼和書籤有甚麼關係？又我們要怎麼開啟他所謂的書籤呢？請繼續往下看。
開始解題
其實這題有兩種解法。
第一種解法是我先想到的。
我就不管甚麼書籤的。反正我只要想辦法把它解碼出來的 flag 給印出來就好，所以我就開了一個 HTML檔想要做一個簡易版網頁。之後我又上網查如何將 javascript 的變數傳給 HTML。結果發現，其實我們可以用<script></script>將 javascript 的 code 整個包起來，再將其直接放入 HTML 的 body 裡就可以執行 javascript 了。
長成這樣......
最上面幾行雖然長得很令人退避三舍，不過那只是 HTML 的標準框架。只要在 vscode 的 HTML 檔裡打一個驚嘆號在按下 enter 就會咻一聲的碰出來了，或是去網路上找一錠都複製的到。
中間被<script></script>夾住的就是我們今天的主角啦。我們只要將網站中的 code 複製過來即可。
運行起來後我們就會開心的拿到 flag 啦ヾ(≧▽≦*)o
第二種方法應該算是正解。
因為很好奇其他人是怎麼解的，所以上網找了一下別人的 writeup，發現到了第二種神奇的做法。
- 開啟 chrome 的書籤管理員
- 新增一個書籤
- 名稱隨便取，網址內貼上 javascript 的程式碼
- 在新分頁開啟後就會看到 flag 了
因為我已經新增好了，所以我這邊展示出的截圖是編輯書籤。
大結語
其實這篇昨天就已經打了一半，會拖一天才發是因為昨天去練機車練到太晚來不及發😅幸好今天機車駕照拿到了，這篇也打完了。(灑花灑花o(〃＾▽＾〃)o)
最後祝大家行車平安❤️
