前言
最近公司的同事修了一門資安相關的課，因為我本來就對資安滿有興趣的，所以就會跟同事討論一下，這也導致了我這兩週一直在研究相關的東西，都是一些以前聽過但沒有認真研究過的，例如說 LFI（Local File Inclusion）、REC（Remote code execution）、SSRF（Server-Side Request Forgery）或是各種 PHP 的神奇 filter，也能複習原本就已經相對熟悉的 SQL Injection 跟 XSS。
而 CTF 的題目裡面常常會出現需要繞過各種限制的狀況，而這就是考驗對於特定協定或者是程式語言的理解程度的時機了，要想想看怎麼在既有的限制之下，找出至少一種方法可以成功繞過那些限制。
原本這一週不知道要寫什麼，想寫上面提的那些東西但還沒想好怎麼整理，之前的 I Don't know React 後續系列又還沒整理完，就想說那來跟大家做個跟「繞過限制」有關的趣味小挑戰好了，那就是標題所說的：
在 JavaScript 當中，你可以做到不用英文字母與數字，就成功執行 console.log(1) 嗎？
換句話說，就是程式碼裡面不能出現任何英文字母（a-zA-Z）與數字（0-9），除此之外（各種符號）都可以。執行程式碼之後，會執行 console.log(1)，然後在 console 印出 1。
如果你有想到以前聽過什麼有趣的服務或是 library 可以做到，先不要。在這之前可以自己先想一下，看有沒有辦法寫出來，然後再去查其他人的解決方法。
若是能從零到有全都自己寫出來，就代表你對 JS 這個程式語言以及各種自動轉型的熟悉程度應該是滿高的。
底下我就提供一下我自己針對這一題的一些想法以及解題過程，有雷，還沒解完不要往下捲動。
==防雷==
==防雷==
==防雷==
==防雷==
==防雷==
==防雷==
==防雷==
==防雷==
==防雷==
==防雷==
==防雷==
==防雷==
==防雷==
分析解題的幾個關鍵
要能成功執行題目所要求的 console.log(1)，必須要完成幾件事情，像是：
- 找出如何執行程式碼
- 如何不用字母與數字得出數字
- 如何不用字母與數字得出字母
只要這三點都解開了，應該就能達成題目所要求的東西。
讓我們先來想想第一點：「要怎麼執行程式碼？」
直接 console.log 是不可能的，因為就算你用字串拼出 console，你也沒辦法像 PHP 那樣拿字串來執行函式。
那 eval 呢？eval 裡面可以放字串，就可以執行任意程式碼了！可是問題是，我們也沒辦法用 eval，因為不能打英文字。
還有什麼方法呢？還可以用 function constructor：new Function("console.log(1)") 來執行，但問題是我們也不能用 new 這個關鍵字，所以乍看之下也不行。不過其實不需要 new 也可以，只要 Function("console.log(1)") 就可以建立一個能夠執行特定程式碼的函式。
所以接下來的問題就變成：那我們該如何拿到 function constructor？只要能夠拿到就有機會了。
在 JS 裡面可以用 .constructor 拿到某個東西的 constructor，例如說 "".constructor 就會得到：ƒ String() { [native code] }，而今天如果你有一個 function，就可以拿到 function constructor 了，像是這樣：(()=>{}).constructor，然後因為我們可以預期這一題會是用字串拼出各種東西，所以沒辦法直接 .constructor，應該改成：(()=>{})['constructor']。
那如果不支援 ES6 了？沒辦法支援箭頭函式怎麼辦？有什麼方法可以拿到一個函式嗎？
有，而且很容易，就是各種內建函式，例如說 []['fill']['constructor']，其實就是 [].fill.constructor，或者是 ""['slice']['constructor']，也可以拿到 function constructor，所以這不是一件難事，就算沒有箭頭函式也可以拿到。
一開始我們期望的程式碼是這樣：Function('console.log(1)')()，用上面改寫的話，就會把前面的 Function 替換成 (()=>{})['constructor']，變成：(()=>{})['constructor']('console.log(1)')()
只要能湊出這一段，問題就解決了。至此，我們已經解決了第一個問題：執行函式。
如何湊出數字
接下來因為數字比較簡單，所以我們先來想一下怎麼湊出數字好了。
這邊的關鍵就在於 JS 的 coercion，如果你有看過一些 JS 轉型的文章，或許會記得 {}+[] 可以得出 0 這個數字。
就算不記得好了，利用 ! 這個運算子，我們可以得出 false，例如說 ![] 或是 !{} 都可以得出 false。然後兩個 false 相加就可以得到 0：![]+![]，以此類推，既然 ![] 是 false，那前面再加一個 not，!![] 就是 true，所以![] + !![] 就等於 false + true，也就是 0 + 1，結果就會是 1。
或其實也有更短的方法，用 +[] 也可以利用自動轉型得到 0 這個結果，那 +!![] 就是 1。
有了 1 之後，就可以湊出所有數字了，因為你只要一直暴力不斷相加就好了，有多少就加多少次。或如果你不想這樣做，也可以利用位元運算 << >> 或者是乘號，比如說要湊出 8，就是 1 << 3，或者是 2 << 2，那要湊出 2 就是 (+!![])+(+!![])，所以 (+!![])+(+!![]) << (+!![])+(+!![]) 就會是 8，只要四個 1 就行了，不需要自己加 8 次。
不過我們可以先不考慮長度，只要考慮能不能湊出來就行了，只要湊出 1 我們就已經獲勝了。
如何湊出字串？
最後呢，就是要想辦法湊出字串了，或者換句話說，要能湊出 (()=>{})['constructor']('console.log(1)')() 裡面的各個字元。
可是我們要怎麼樣才能湊出字元呢？
關鍵跟數字一樣，就是 coercion！
上面有講過 ![] 可以拿到 false，那你後面再加一個字串：![] + ''，不就可以拿到 "false" 了嗎？那這樣我們就可以拿到 a, e, f, l, s 這五個字元。舉例來說，(![] + '')[1] 就是 a，為了方便紀錄，我們來寫一點小程式吧！
const mapping = {
a: "(![] + '')[1]",
e: "(![] + '')[4]",
f: "(![] + '')[0]",
l: "(![] + '')[2]",
s: "(![] + '')[3]",
}
那既然有了 false，拿到 true 也不是一件難事，!![] + '' 就可以拿到 true，我們的程式碼就可以改成：
const mapping = {
a: "(![] + '')[1]",
e: "(![] + '')[4]",
f: "(![] + '')[0]",
l: "(![] + '')[2]",
r: "(!![] + '')[1]",
s: "(![] + '')[3]",
t: "(!![] + '')[0]",
u: "(!![] + '')[2]",
}
再來呢？再來一樣利用轉型，用 ''+{} 可以得到 "[object Object]"（或是你要用神奇的 []+{} 也行），我們的表就可以更新成這樣：
const mapping = {
a: "(![] + '')[1]",
b: "(''+{})[2]",
c: "(''+{})[5]",
e: "(![] + '')[4]",
f: "(![] + '')[0]",
j: "(''+{})[3]",
l: "(![] + '')[2]",
o: "(''+{})[1]",
r: "(!![] + '')[1]",
s: "(![] + '')[3]",
t: "(!![] + '')[0]",
u: "(!![] + '')[2]",
}
再來，從陣列或是物件拿一個不存在的屬性會回傳什麼？undefined，再把 undefined 加上字串，就可以拿到字串的 undefined，像是這樣：[][{}]+''，就可以拿到 undefined。
拿到之後，我們的轉換表就變得更加完整了：
const mapping = {
a: "(![] + '')[1]",
b: "(''+{})[2]",
c: "(''+{})[5]",
d: "([][{}]+'')[2]",
e: "(![] + '')[4]",
f: "(![] + '')[0]",
i: "([][{}]+'')[5]",
j: "(''+{})[3]",
l: "(![] + '')[2]",
n: "([][{}]+'')[1]",
o: "(''+{})[1]",
r: "(!![] + '')[1]",
s: "(![] + '')[3]",
t: "(!![] + '')[0]",
u: "(!![] + '')[2]",
}
看了一下轉換表，再看一下我們的目標字串：(()=>{})['constructor']('console["log"](1)')()，稍微比對一下，發現要湊出 constructor 是沒有問題的，要湊出 console 也是沒問題的，可是就唯獨缺了 log 的 g，我們目前的轉換表裡面沒有這個字元。
所以一定還要再從某個地方把 g 拿出來，才能湊出我們想要的字串。或者也可以換個方法，用別的方式拿到字元。
我當初想到兩個方法，第一個方法是利用進位轉換，把數字用 toString 轉成字串的時候，其實可以帶一個參數 radix，代表這個數字要轉換成多少進制，像是 (10).toString(16) 就會得到 a，因為 10 進制的 10 就是 16 進制的 a。
英文字母一共 26 個，數字有 10 個，所以只要用 (10).toString(36) 就能得到 a，用 (16).toString(36) 就可以得到 g 了，我們可以用這個方法拿到所有的英文字母。可是問題來了，那就是 toString 本身也有 g，但我們現在沒有，所以這方法行不通。
另外一個當初想到的方法是用 base64，JS 有內建兩個函式：btoa 跟 atob，btoa 是把一個字串 encode 成 base64，例如說 btoa('abc') 會得到 YWJj，然後再用 atob('YWJj') 做 decode 就會得到 abc。
我們只要想辦法讓 base64 encode 後的結果有 g 就沒問題了，這邊可以寫程式去跑也可以自己慢慢試，很幸運地，btoa(2) 就能拿到 Mg== 這個字串。所以 btoa(2)[1] 就會是 g 了。
不過下一個問題來了，我們要怎麼執行 btoa？一樣只能透過上面的 function constructor：(()=>{})['constructor']('return btoa(2)[1]')()，而這次很幸運地，上面的每一個字元我們都湊得出來！
我們可以結合上面的 mapping，寫一個簡單的小程式來幫我們做轉換，目標是把一個字串轉成沒有字元的形式：
const mapping = {
a: "(![] + '')[1]",
b: "(''+{})[2]",
c: "(''+{})[5]",
d: "([][{}]+'')[2]",
e: "(![] + '')[4]",
f: "(![] + '')[0]",
i: "([][{}]+'')[5]",
j: "(''+{})[3]",
l: "(![] + '')[2]",
n: "([][{}]+'')[1]",
o: "(''+{})[1]",
r: "(!![] + '')[1]",
s: "(![] + '')[3]",
t: "(!![] + '')[0]",
u: "(!![] + '')[2]",
}
const one = '(+!![])'
const zero = '(+[])'
function transformString(input) {
return input.split('').map(char => {
// 先假設數字只會有個位數，比較好做轉換
if (/[0-9]/.test(char)) {
if (char === '0') return zero
return Array(+char).fill().map(_ => one).join('+')
}
if (/[a-zA-Z]/.test(char)) {
return mapping[char]
}
return `"${char}"`
})
// 加上 () 保證執行順序
.map(char => `(${char})`)
.join('+')
}
const input = 'constructor'
console.log(transformString(input))
輸出是：
((''+{})[5])+((''+{})[1])+(([][{}]+'')[1])+((![] + '')[3])+((!![] + '')[0])+((!![] + '')[1])+((!![] + '')[2])+((''+{})[5])+((!![] + '')[0])+((''+{})[1])+((!![] + '')[1])
可以再寫一個函式只轉換數字，把數字去掉：
function transformNumber(input) {
return input.split('').map(char => {
// 先假設數字只會有個位數，比較好做轉換
if (/[0-9]/.test(char)) {
if (char === '0') return zero
let newChar = Array(+char).fill().map(_ => one).join('+')
return`(${newChar})`
}
return char
})
.join('')
}
const input = 'constructor'
console.log(transformNumber(transformString(input)))
得到的結果是：
((''+{})[((+!![])+(+!![])+(+!![])+(+!![])+(+!![]))])+((''+{})[((+!![]))])+(([][{}]+'')[((+!![]))])+((![] + '')[((+!![])+(+!![])+(+!![]))])+((!![] + '')[(+[])])+((!![] + '')[((+!![]))])+((!![] + '')[((+!![])+(+!![]))])+((''+{})[((+!![])+(+!![])+(+!![])+(+!![])+(+!![]))])+((!![] + '')[(+[])])+((''+{})[((+!![]))])+((!![] + '')[((+!![]))])
把這結果丟去 console 執行，發現得到的值就是 constructor 沒錯。所以綜合以上程式，回到我們剛剛那一段：(()=>{})['constructor']('return btoa(2)[1]')()，要得到轉換完的結果，就是：
const con = transformNumber(transformString('constructor'))
const fn = transformNumber(transformString('return btoa(2)[1]'))
const result = `(()=>{})[${con}](${fn})()`
console.log(result)
結果超級長我就先不貼了，但確實能得到一個字串 g。
在繼續往下之前，先讓我們把程式改一下，新增一個能夠直接轉換程式碼的函式：
function transform(code) {
const con = transformNumber(transformString('constructor'))
const fn = transformNumber(transformString(code))
const result = `(()=>{})[${con}](${fn})()`
return result;
}
console.log(transform('return btoa(2)[1]'))
好，做到這邊其實我們已經接近終點了，只差有一件事情沒有解決，那就是 btoa 其實是 WebAPI，瀏覽器才有，Node.js 並沒有這函式，所以想要解得更漂亮，就必須找到其他方式來產生 g 這個字元。
可以回憶一下一開始所提的，用 function.constructor 可以拿到 function constructor，所以以此類推，用 ''['constructor'] 可以拿到 string constructor，只要再加上一個字串，就可以拿到 string constructor 的內容了！
像是這樣：''['constructor'] + ''，得到的結果是："function String() { [native code] }"，一瞬間多了堆字串可以用，而我們朝思暮想的 g 就是：(''['constructor'] + '')[14]。
由於我們的轉換器目前只能支援一個位數的數字（因為做起來簡單），我們改成：(''['constructor'] + '')[7+7]，可以寫成這樣：
mapping['g'] = transform(`return (''['constructor'] + '')[7+7]`)
結合所有努力
經歷過千辛萬苦之後，我們終於湊出了最麻煩的 g 這個字元，結合我們剛剛寫好的轉換器，就可以順利產生 console.log(1) 去除掉字母與數字過後的版本：
const mapping = {
a: "(![] + '')[1]",
b: "(''+{})[2]",
c: "(''+{})[5]",
d: "([][{}]+'')[2]",
e: "(![] + '')[4]",
f: "(![] + '')[0]",
i: "([][{}]+'')[5]",
j: "(''+{})[3]",
l: "(![] + '')[2]",
n: "([][{}]+'')[1]",
o: "(''+{})[1]",
r: "(!![] + '')[1]",
s: "(![] + '')[3]",
t: "(!![] + '')[0]",
u: "(!![] + '')[2]",
}
const one = '(+!![])'
const zero = '(+[])'
function transformString(input) {
return input.split('').map(char => {
// 先假設數字只會有個位數，比較好做轉換
if (/[0-9]/.test(char)) {
if (char === '0') return zero
return Array(+char).fill().map(_ => one).join('+')
}
if (/[a-zA-Z]/.test(char)) {
return mapping[char]
}
return `"${char}"`
})
// 加上 () 保證執行順序
.map(char => `(${char})`)
.join('+')
}
function transformNumber(input) {
return input.split('').map(char => {
// 先假設數字只會有個位數，比較好做轉換
if (/[0-9]/.test(char)) {
if (char === '0') return zero
let newChar = Array(+char).fill().map(_ => one).join('+')
return`(${newChar})`
}
return char
})
.join('')
}
function transform(code) {
const con = transformNumber(transformString('constructor'))
const fn = transformNumber(transformString(code))
const result = `(()=>{})[${con}](${fn})()`
return result;
}
mapping['g'] = transform(`return (''['constructor'] + '')[7+7]`)
console.log(transform('console.log(1)'))
最後產生出來的程式碼：
(()=>{})[((''+{})[((+!![])+(+!![])+(+!![])+(+!![])+(+!![]))])+((''+{})[((+!![]))])+(([][{}]+'')[((+!![]))])+((![] + '')[((+!![])+(+!![])+(+!![]))])+((!![] + '')[(+[])])+((!![] + '')[((+!![]))])+((!![] + '')[((+!![])+(+!![]))])+((''+{})[((+!![])+(+!![])+(+!![])+(+!![])+(+!![]))])+((!![] + '')[(+[])])+((''+{})[((+!![]))])+((!![] + '')[((+!![]))])](((''+{})[((+!![])+(+!![])+(+!![])+(+!![])+(+!![]))])+((''+{})[((+!![]))])+(([][{}]+'')[((+!![]))])+((![] + '')[((+!![])+(+!![])+(+!![]))])+((''+{})[((+!![]))])+((![] + '')[((+!![])+(+!![]))])+((![] + '')[((+!![])+(+!![])+(+!![])+(+!![]))])+(".")+((![] + '')[((+!![])+(+!![]))])+((''+{})[((+!![]))])+((()=>{})[((''+{})[((+!![])+(+!![])+(+!![])+(+!![])+(+!![]))])+((''+{})[((+!![]))])+(([][{}]+'')[((+!![]))])+((![] + '')[((+!![])+(+!![])+(+!![]))])+((!![] + '')[(+[])])+((!![] + '')[((+!![]))])+((!![] + '')[((+!![])+(+!![]))])+((''+{})[((+!![])+(+!![])+(+!![])+(+!![])+(+!![]))])+((!![] + '')[(+[])])+((''+{})[((+!![]))])+((!![] + '')[((+!![]))])](((!![] + '')[((+!![]))])+((![] + '')[((+!![])+(+!![])+(+!![])+(+!![]))])+((!![] + '')[(+[])])+((!![] + '')[((+!![])+(+!![]))])+((!![] + '')[((+!![]))])+(([][{}]+'')[((+!![]))])+(" ")+("(")+("'")+("'")+("[")+("'")+((''+{})[((+!![])+(+!![])+(+!![])+(+!![])+(+!![]))])+((''+{})[((+!![]))])+(([][{}]+'')[((+!![]))])+((![] + '')[((+!![])+(+!![])+(+!![]))])+((!![] + '')[(+[])])+((!![] + '')[((+!![]))])+((!![] + '')[((+!![])+(+!![]))])+((''+{})[((+!![])+(+!![])+(+!![])+(+!![])+(+!![]))])+((!![] + '')[(+[])])+((''+{})[((+!![]))])+((!![] + '')[((+!![]))])+("'")+("]")+(" ")+("+")+(" ")+("'")+("'")+(")")+("[")+((+!![])+(+!![])+(+!![])+(+!![])+(+!![])+(+!![])+(+!![]))+("+")+((+!![])+(+!![])+(+!![])+(+!![])+(+!![])+(+!![])+(+!![]))+("]"))())+("(")+((+!![]))+((+!![])+(+!![]))+((+!![])+(+!![])+(+!![]))+(")"))()
至此，我們用了 1800 個字元，成功製造出只有：[, ], (, ), {, }, ", ', +, !, =, > 這 12 個字元的程式，並且能夠順利執行 console.log(1)。
而因為我們已經可以順利拿到 String 這幾個字了，所以就可以用之前提過的進位轉換的方法，得到任意小寫字元，像是這樣：
mapping['S'] = transform(`return (''['constructor'] + '')[9]`)
mapping['g'] = transform(`return (''['constructor'] + '')[7+7]`)
console.log(transform('return (35).toString(36)')) // z
那要怎麼拿到任意大寫字元，或甚至任意字元呢？我也有想到幾種方式。
如果想拿到任意字元，可以透過 String.fromCharCode，或是寫成另一種形式：""['constructor']['fromCharCode']，就可以拿到任意字元。可是在這之前要先想辦法拿到大寫的 C，這個就要再想一下怎麼做了。
除了這條路，還有另外一條，那就是靠編碼，例如說 '\u0043' 其實就是大寫的 C 了，所以我原本以為可以透過這種方法來湊，但我試了一下是不行的，像是 console.log("\u0043") 會印出 C 沒錯，但是 console.log(("\u00" + "43")) 就會直接噴一個錯誤給你，看來編碼沒有辦法這樣拼起來（仔細想想發現滿合理的）。
總結
其實我以前有寫過一篇：讓 JavaSript 難以閱讀：jsfuck 與 aaencode，在講的就是同一件事，不過以前我只有稍微整理一下，這次則是自己親自下去試過，感覺更不一樣。
最後寫出來的那個轉換的函式其實並不完整，沒有辦法執行任意程式碼，沒有繼續做完是因為 jsfuck 這個 library 已經寫得很清楚了，在 README 裡面有詳細描述它的轉換過程，而且最後只用了 6 個字元而已，真的很佩服。
在它的程式碼當中也可以看出他的轉換是怎麼做的，大寫 C 的部分是用一個在 String 身上叫做 italics 的函式，可以產生出 <i></i>，產生出以後再呼叫 escape 去做跳脫，就會得到 %3Ci%3E%3C/i%3E，就有大寫 C 了。
有些人可能會想說平常程式碼寫得好好的，幹嘛這樣搞自己，但這樣做的重點其實不在於最後的結果，而是在訓練幾個東西，像是：
- 對於程式語言的熟悉度，我們用了很多型別轉換跟內建方法來湊東西，可能有些是你根本沒聽過的
- 解決問題，縮小範圍的能力，從如何把字串當作函式執行，再到湊出數字跟字串，一步步縮小題目，子問題解決之後原問題就解決了
總之呢，以上是我針對這一題的一些解題心路歷程，有什麼有趣的解法也歡迎留言讓我知道（例如說其他種拿到大寫字母 C 的做法），感謝！
