search.json

[{"title":"用 Hexo 上自己的 JS 無情消失 - 解決方式","url":"/2022/09/29/%E7%94%A8-Hexo-%E4%B8%8A%E8%87%AA%E5%B7%B1%E7%9A%84-JS-%E7%84%A1%E6%83%85%E6%B6%88%E5%A4%B1-%E8%A7%A3%E6%B1%BA%E6%96%B9%E5%BC%8F/","content":"Hexo 上 JS 無情消失的解決方式\n\n我遇到的問題套上模板之後，我發現我不能像一般寫靜態網站一樣把 JS 打在 index.html 上，每次一寫好在terminal輸入 hexo deploy 或是 hexo g -d 都會被原本被蓋掉，不能新增。上圖為試圖新增 &lt;div id=&quot;Hello&quot;&gt;&lt;/div&gt; 在 index.html然後正常來說，按儲存推上去就沒問題了吧？我們試試\n$ hexo g -d\n他就…無情的消失了QAQ\n推理時間\n是推上 git 的問題嗎？\n否。\n\n\n\n\n用 hexo s 在畚箕檢查檢測後發現他是在本機就消失所以推測是在下載下來的 theme 中有檔案複製他自己架好的文件\n\n\n是全部都不見嗎？\n只有 html 檔被重整\n\n\n\n\n試著在裡面 style.css 和 index.html 裡新增自己的東西只有 html 被刪除\n\n\n依照上述問答推理，我們可以知道是有一個檔案來自動生成或修改 HTML 檔\n\n但是這麼多檔案要怎麼找？？？\n解決\n所以我對照 theme 裡的文件，尋找熟悉的身影…\n找到了兩個我沒見過的副檔名 .ejs 和 .ts\n.ts\nTypeScript\n官方介紹：TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.\nUmmmm… 說是基於 JS 的強型別語言，感覺不是。\nTypeScript 新手指南\n\n\n.ejs\nEJS\n官方介紹：What is the “E” for? “Embedded?” Could be. How about “Effective,” “Elegant,” or just “Easy”? EJS is a simple templating language that lets you generate HTML markup with plain JavaScript. No religiousness about how to organize things. No reinvention of iteration and control-flow. It’s just plain JavaScript.\n說是基於 JS 的簡單模板語言讓我生成 HTML 檔\n找到了～\n\n\n\n\n稍微學會看懂他的使用方式，可以照著原本寫HTML的方式寫，差別只是在於是寫在 .ejs 檔裡面而已。\n我的作法是把我會寫的 JS 直接寫在 EJS 裏面，像這樣：\n\n原本的程式碼\n&lt;script&gt;        setTimeout(() =&gt; &#123;localSearch(&quot;&lt;%= theme.search.path || &#x27;search.json&#x27; %&gt;&quot;)&#125;, 0)&lt;/script&gt;\n我新增的\n&lt;script&gt;        setTimeout(() =&gt; &#123;localSearch(&quot;&lt;%= theme.search.path || &#x27;search.json&#x27; %&gt;&quot;)&#125;, 0)        const wrapper = document.getElementById(&quot;bubble-wrapper&quot;);        const animateBubble = x =&gt; &#123;          const bubble = document.createElement(&quot;div&quot;);          bubble.className = &quot;bubble&quot;;        bubble.style.left = `$&#123;x&#125;px`;           wrapper.appendChild(bubble);          setTimeout(() =&gt; wrapper.removeChild(bubble), 2000);        &#125;        window.onmousemove = e =&gt; animateBubble(e.clientX);&lt;/script&gt;\n要注意的是原作者 EJS 檔名不見得很直覺，要一個一個檢查看看你要換的是在什麼地方\n\n剩下的 CSS 就塞在原本會放的位置 ex: style.css。然後就解決了～～（那個藍藍的是海浪（？）會隨著滑鼠移動）\n\n％％％％％\nEJS 介紹\n簡單介紹一下 EJS 怎麼寫\n就是用 &lt;%= %&gt; or &lt;%- %&gt; 把 JS 包起來，被包起來的就會進行編譯。舉個例子：&lt;body&gt;&lt;ul&gt;&lt;% for(var i = 0; i &lt; users.length; i++) &#123; %&gt;&lt;% var user = users[i]; %&gt;    &lt;li&gt;&lt;%= user %&gt;&lt;/li&gt;&lt;% &#125; %&gt;&lt;/ul&gt;&lt;/body&gt;\n如果 users &#x3D; [‘one’, ‘two’, ‘three’] 那渲染出來的就是：\none\ntwo\nthree\n\n那這可以幹嘛呢？如果每個網頁都有重複的東西 ex: home, tags, about...的header就可以靠 EJS 解決。舉個栗子：原本是每個介面都要寫一次這個：\n&lt;header&gt;    &lt;a href=&quot;/&quot;&gt;my Blog&lt;/a&gt;    &lt;nav&gt;        &lt;li&gt;&lt;a href=&quot;about&quot;&gt;about&lt;/a&gt;&lt;/li&gt;        &lt;li&gt;&lt;a href=&quot;tags&quot;&gt;tags&lt;/a&gt;&lt;/li&gt;        &lt;li&gt;&lt;a href=&quot;Categories&quot;&gt;Categories&lt;/a&gt;&lt;/li&gt;    &lt;/nav&gt;&lt;/header&gt;\n用 EJS 的方式處理：我們可以當作一個模板片段單獨獨立出來（這裡叫做common-header.ejs）處理這個重複的部分，然後在各個頁面引入。\n&lt;body&gt;    &lt;%- include(&#x27;./templates/common-header.ejs&#x27;); %&gt;    &lt;h1&gt;my Blog&lt;/h1&gt;&lt;/body&gt;\n\n參考檔案：\n\nhttps://zhuanlan.zhihu.com/p/52722144\nhttps://ejs.bootcss.com\nhttps://medium.com/@charming_rust_oyster_221/ejs-內嵌式的樣板引擎-筆記-482d83c73887\nhttps://medium.com/web-design-zone/ejs樣板引擎的使用方式-40873ea2dfae\n\n","categories":["tech_page"],"tags":["hexo","JavaScript"]},{"title":"一鍵部署 Hexo 到 Github","url":"/2022/09/28/%E4%B8%80%E9%8D%B5%E9%83%A8%E7%BD%B2-Hexo-%E5%88%B0-Github/","content":"簡單的教你如何將 Hexo 推上 Github\n\nStep.1 建立 Github 專案\n登入 Github 帳號，按左上角的 New 建立新專案（repository）\n按進去之後，出現這個畫面，Owner不用填，然後旁邊的 Repository name 按照下圖格式填寫然後記得調成 Public\n按下 Create Repository\n專案建立完成～\n\nStep.2 Hexo 部署\n安裝 hexo-deployer-git在 terminal (cmd)打上以下指令，安裝一鍵部署插件\n$ npm install hexo-deployer-git --save\n然後在原始的 _config.yml （不是 theme 底下的）修改 deploy 資料\ndeploy:    type: git #部屬模式    repo: https://github.com/[username]/[username].github.io.git # GitHub repository 的連結      branch: master #選擇分支，此為預設不用動\nGitHub repository 的連結（就是專案建完看到的第一個可以複製的東西）\n\n改好後記得儲存\n\n\nStep.3 一鍵部署\n輸入以下指令就建好了（\\\\\\恭喜&#x2F;&#x2F;&#x2F;）$ hexo deploy\n要更新頁面$ hexo g -d \ng是建立靜態網頁，d是上傳到Github\n\n而完成的網站就是username.github.io\n","categories":["tech_page"],"tags":["hexo","Github"]},{"title":"how to hexo","url":"/2022/09/26/how-to-hexo/","content":"hexo小教學\n\nhow to hexoSet up小的用 MacOS 安裝，其他作業系統這裡沒有QAQ要先載好以下兩個東西\n\nGit\nNode.js\n可以順邊裝一下 npm 他是Node.js的版本管理\n\n\n\n檢查一下有沒有裝好(我一律用檢查版本的方式檢查)\nnode -v #檢查版本npm -v #檢查版本\n\n接著安裝 Hexo\n$ npm install -g hexo-cli\n如果你 Git 和 Node.js 有裝好但無法下載，有可能是權限問題。用以下指令解決\n$ sudo npm install --unsafe-perm --verbose -g hexo\n檢查安裝是否完成\n$ hexo -v #檢查版本\n\nokok安裝就這樣完成了！\n建立專案terminal移動到想要的資料夾上打以下指令生成專案\nhexo init 專案名稱\n\n啟動專案\n$ hexo s\n\n這樣就建好了喔～可以看到已經有一個預設文章，裡面是hexo的指令介紹，可以稍微看一下。\n_config.yml_config.yml就是網站的主要設定檔，資料都會在這裡設定。介紹一些我會比較會動到的東西。\n# Sitetitle: Hexo # 網站名稱subtitle: &#x27;&#x27; # 網站副標題description: &#x27;&#x27; # 網站描述keywords: # 關鍵字author: John Doe # 作者language: en # 語言 timezone: &#x27;&#x27; # 時區\n這是網站最主要得東西，可以修改成自己喜歡的樣子。但語言與時區須依照規範而打，像是 Zh-TW 是繁體中文(但我會使用預設，好像沒什麼區別)， Asia/Taipei 是台北時區\n# Writingnew_post_name: :title.md # File name of new postsdefault_layout: posttitlecase: false # Transform title into titlecaseexternal_link:  enable: true # Open external links in new tab  field: site # Apply to the whole site  exclude: &#x27;&#x27;filename_case: 0render_drafts: falsepost_asset_folder: falserelative_link: falsefuture: truehighlight:    # 為 code 上色  enable: true  line_number: true  auto_detect: false  tab_replace: &#x27;&#x27;  wrap: true  hljs: falseprismjs:    # 為 code 上色，跟 highlight 只能保留一個  enable: false  preprocess: true  line_number: true  tab_replace: &#x27;&#x27;\n這段其實我只會用到 highlight 為 code 上色，畢竟要打一些需要用到程式碼的文章。\n# Extensions## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/theme: landscape # 主題\n主題是Hexo中最好玩的東西，會額外拉一個段落來講如何使用\n建立第一個文章我喜歡用 VSCode 打開，打開專案之後在 terminal 輸入以下指令\n$ hexo new 文章名稱\n執行完就可以在 source/_posts 中看到你新建立文章。藍色框框就是他得所在位置，紅色是寫文章的地方，綠色是 terminal\n我們來放大看一下\n---title: myfirstpage # 文章標題date: 2022-09-26 10:39:41 # 建立時間tags: # 標籤---\n這些都可以隨時修改而 tags 如果只有一個，那就在後面打上就好，諾有數個，要用無序清單的方式呈現：\n---title:...tags:    - one    - two    - ...---\n也可以用另一種 list 方式呈現\n---title:...tags:    - [one, three]    - [two, four]    - ...---\n除了標題、時間還有標籤，還有其他可以加入的東西：\n---title: myfirstpagedate: 2022-09-26 10:39:41tags:categories: # 分類thumbnail: # 預覽圖參數banner: # 預覽圖位置---\n開始打文章拉～～\n文章首句只能是純文字，不能是標題之類的，要不然會跑不出來，我之前在這裡卡超級久＝＝\n\n打完之後儲存，打 hexo s 就可以看到自己的文章樓～\n建立分頁來建一個關於 about\n$ hexo new page 分頁名稱\n打完之後按下 Enter 就可以在 soource 底下看到你建立的新分頁了\n更換主題在介紹 _config.yml 時，有稍微提到主題就是在那裡換的。按照以下步驟：\n\n進入 hexo 官網挑選喜歡的主題 https://hexo.io/themes/\n點開一個下載 zip 檔\n把下載好的zip 檔解壓縮，移至專案底下的 theme\n把 _config.yml 底下的 theme 改成 zip 檔上的主題\n\n測試看看\n$ hexo s\n\n","categories":["tech_page"],"tags":["hexo"]},{"title":"web first attack","url":"/2022/09/26/web-first-attack/","content":"這篇是我web攻擊的隨筆，很亂，酌情參考。\n\n\nWeb入門靶機介紹\ndemo .testfire .com\nhttps://demo.testfire.net/\n\n\nAcunetix\nhttp://testaspnet.vulnweb.com/\n\n\nOverTheWire\nhttps://overthewire.org/wargames/\n\n\nTryHackMe\nHeck The Box\nPortSwigger - Web Security Academy\n\nOSI與DoD模型\n依據網路運作方式，OSI模型共切分成7個不同的層級，每級按照網路傳輸的模式，定義所屬的規範及標準。\nDoD 模型與網路互連的關聯    \n首先，使用者端會發出 HTTP 請求(裡面包含了使用者資料)；然後到了傳輸層再加上 TCP 表頭；到了網路層，再加上 IP 表頭；到了網路連結層，再加上乙太表頭，整體會變成一個網路封包，再整包傳給伺服器端，一層層往上處理至 Server。  \n\n\n那如果傳送的是含 TCP 表頭的網路封包(因為也有可能傳送的是含 UDP 表頭的封包)，必須要經過「三向交握」來建立連線。三向交握簡單來說就是使用者端會發出 SYN 封包給伺服器，伺服器再回傳 SYN&#x2F;ACK 封包給使用者，使用者端再傳送 ACK 封包。如此三次來回，即可開始傳輸封包\n完成三向交握後，就可以開始傳送 TCP 封包。而直到封包傳送完，回傳 200 OK 狀態碼，才表示資料傳送完成。傳送完封包，瀏覽器便開始渲染網頁。這時如果還欲傳送其他資料，就從下圖中的第 2 點至第 4 點再重複一次，直到所以資料都傳送完，進行 TCP 四次揮手，終止連線。  \n(補充： 若請求的網站為 HTTPS，則表示其為加密網站，在傳輸層及應用層多了一道 SSL &#x2F; TLS 憑證。此網站使用 WireShark 去監測封包，會看不到封包內容，比較安全；若為 HTTP 網站，則表示沒有加上 SSL &#x2F; TLS 憑證。HTTP 是走 80 port；HTTPS 則走 443 port)  \n\n\n瀏覽器的渲染過程  \n總結    參考資料https://medium.com/yu19941994/%E7%B6%B2%E8%B7%AF%E8%AB%8B%E6%B1%82%E8%88%87%E7%80%8F%E8%A6%BD%E5%99%A8%E6%B8%B2%E6%9F%93-2c1232c23fbf\n\nXSS攻擊\n漏洞成因\navascript這個在前端上不可或缺的語言，不過就是因為他的方便性，也常常變成駭客拿來利用的工具\n駭客可能會在你瀏覽的網頁中，允許惡意的使用插入惡意的javascript，達到某種目的，簡單的可能只會瘋狂地跳alert視窗，嚴重的可能竊取別人的帳戶資訊，接下來就一一介紹XSS的各種型態\n\n\n:::spoiler 反射型(Reflected)\n\n讓使用者發出惡意的requests(可以是網址, 奇怪的按鈕, 表單form…)，後端如果沒有過濾，將結果傳給給前端，瀏覽器就有可能執行這段惡意的程式碼\n需要社交工程，不能做主動攻擊  :::\n\n\n:::spoiler DOM型(Dom-based)\n\nDOM 全名為Document Object Model，能將HTML中的各個標籤形成一個樹狀結構\n詳細資料：DOM\n發生原因\n使用DOM的API的時候，使用innerHTML，就可能將script插入到網頁當中\n觸發跟反射型類似，只差在反射型把資料傳給後端，但DOM不會  :::\n\n\n\n\n:::spoiler 儲存型(Stored)\n\n會將惡意語法儲存到伺服器或資料庫當中\n通常會發生在論壇文章、留言板…等\n當使用者瀏覽時，就可能讀取到資料庫中的惡意語法，瀏覽器進而去執行 :::\n\n\nXSS攻擊偵測\n通常會嘗試看source code，看看有沒有濾掉甚麼特定的標籤\n目前看下來最常使用的方式就是**alert(1)**，因為最快最方便，一但有跳出alert視窗就代表有機會做XSS攻擊\n網路上也有許多各種花式組成的XSS payload，以下就提供兩個連結\nhttps://github.com/payloadbox/xss-payload-list\nhttps://github.com/pgaijin66/XSS-Payloads\n\n\n\n\n偷取cookie\nCookie是甚麼 :::spoiler\n為了能保持server端與client端保持長久的互動與活動狀態，server會給瀏覽器一組或多組的key&#x2F;value，儲存在瀏覽器當中一般來說cookie會用來紀錄用戶的資訊，常見狀況是用在購物網站的購物車、會員登入或瀏覽紀錄也就是為甚麼在瀏覽器登入fb, twitter…過後，下次打開不需再次登入，因為cookie已經記住你的帳戶資訊換句話說，當駭客想要竊取帳戶資訊，可以透過竊取別人瀏覽器留下的cookie，來偽造登入 :::\n\n\n架設環境\n利用docker-compose, 將東西container化也方便跨平台架設\nphp\nselenium(模擬admin瀏覽管理介面與留言)\nmysql(儲存留言)\n想了解docker-compose怎麼用的可以參考此篇鐵人賽文章https://ithelp.ithome.com.tw/articles/10194183\n\n\n\n\n\n\n工具 - Pipedream\n為了要將cookie彈回server，可以使用線上工具，就不需要自架server或租VPS\n新增一組新的workflow，接收HTTP requests\nhttps://pipedream.com/workflows\n\n\n工具 - EditThisCookie\ncookie的管理器。您可以增加、刪除、修改、搜尋、保護和封鎖cookies\nhttps://chrome.google.com/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg/related?hl=zh-TW\n\n\n\n\n\nSQL injection\n介紹\n發生在後端與資料庫之間的安全漏洞。駭客在輸入的字串中能夠夾帶SQL指令，並沒有過濾字串\n通常是使用字串串聯方式來構成SQL的指令，若又在連線的時候使用權限過大的帳戶(工程師偷懶使用root或sa連接資料庫XD)，甚至可以Get Shell\nSQL-injection最經典的一部漫畫\n媽媽接到電話，你好，我這邊是你兒子的學校，我們電腦出了點狀況oh, 他用壞了甚麼東西嗎，媽媽問。 校方說: 可以這麼說\n校方說: 你真的把你兒子取名為 Robert’); DROP TABLE Students; – 嗎?媽媽說: 是的，我們都叫他寶貝table\n校方回說: 我們今年的學生資料都不見了，希望你覺得滿意。媽媽說: 希望你以後會記得把寫進Table的資料清掉\n\n\n\n\n例子\n網站的登入驗證 sql = &quot;SELECT * FROM users WHERE (name = &#x27;&quot; + username+ &quot;&#x27;) and (pw = &#x27;&quot;+ password +&quot;&#x27;);&quot;;db-&gt;execute(sql);\n\n\n這時駭客輸入在登入介面分別輸入\nusername: ‘ OR 1&#x3D;1 –\npassword: ‘ OR 1&#x3D;1 –\n\n\n組合完會像這樣\nname &#x3D; ‘1’ OR 1&#x3D;1\n前面的語句就算邏輯錯誤，後面的1&#x3D;1條件恆為True，False or True &#x3D; True\n因此，後面兩個OR條件後的句子，都恆為True，進而達到沒有帳號密碼就能登入網站的尷尬情況\n\n\n–為註解，目的是將無用的語句去掉\nMySQL還有其他註解像是 #, &#x2F;*sql = &quot;SELECT * FROM users WHERE (name = &#x27;&#x27; OR 1=1--&#x27;) and (pw = &#x27;&#x27; OR 1=1 --&#x27;);&quot;;db-&gt;execute(sql);\n\n\n\n\n搭配漫畫的例子\n將password改成: ‘ OR 1&#x3D;1; DROP TABLE Students; –\n很恭喜，你的整張表就直接不見囉sql = &quot;SELECT * FROM users WHERE (name = &#x27;&#x27; OR 1=1 --&#x27;) and (pw = &#x27;&#x27; OR 1=1; DROP TABLE users --&#x27;);&quot;;db-&gt;execute(sql);\n\n\n如何避免?\n單純的過濾輸入，但駭客的手法百百種，他們能在有限的狀況下，又找出新的方法可以繞過恩，後面講的靶場就是模擬駭客在受限的各種字元過濾下，盡情的絞盡腦汁繞過\n比較安全的作法：\n使用prepared statements(預先準備SQL語句)搭配parameterized queries(參數化的查詢)\n透過預先準備SQL語句與參數化查詢，能讓資料庫知道說要插入甚麼值作為甚麼功用，就不會對甚麼OR 1&#x3D;1 –和空的密碼做query，或是用;截斷語句做其他事情\n\n\n\n\n\n\n1.資料收集的分類\n敏感目錄洩露\n\n\ngit洩露\n\n\n正常git洩漏\n工具: https://github.com/denny0223/scrabble.&#x2F;scrabble http://example.coom/執行工具即可取得原始程式碼 -&gt; flag\n\n\ngit回覆\ngit 是一個版本控制工具，會記錄每次提交(commit)的修改，所以當題目存在git洩漏之時，flag檔案可能在修改中被刪除或被覆蓋了。\n\n\n使用git的git reset來回覆到之前的版本，回到上一個檔案 “git reset –hard HEAD^”\n或是使用 “git log -stat” 來檢視每一個commit修改了甚麼檔案，再用 “git diff HEAD commit-id” 比較在目前版本與想檢視的commit之間的變化\n\n\ngit分支\n在每次提交時，git都會自動把他們串成一條時間線，就是分支。git允許使用多條分支，讓使用者從開發主線中抽離。因此，我們要找的flag可能不在目前的分支中，這時使用\n\n$ git log\n\nGitHacker(https://github.com/WangYihang/GitHacker)\n\n$ python GitHacker.py http://127.0.0.1:800/.git/ //執行指令 進入資料夾 $ git log --all or $ git branch -v   //只能看到master分支資訊$ git reflog  //checkout的紀錄 除了master還有一個secret分支\n\n但自動化工具只還原了master的資訊，secrat的head資訊需手動下載。\n\n$ wger http://127.0.0.1:8000/.git/refs/head/secret//恢復head資訊\n\n\n\nSVN洩漏\n\n\n\n\n敏感備份檔案\n\nBanner識別\n\n\n\n\n","categories":["hack"],"tags":["web","hack"]},{"title":"Hello World","url":"/2022/09/25/hello-world/","content":"Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.\nQuick StartCreate a new post$ hexo new &quot;My New Post&quot;\n\nMore info: Writing\nRun server$ hexo server\n\nMore info: Server\nGenerate static files$ hexo generate\n\nMore info: Generating\nDeploy to remote sites$ hexo deploy\n\nMore info: Deployment\n","categories":[],"tags":["hexo_note","test"]},{"title":"Dart for Flutter with MacOS","url":"/2022/09/25/Dart-for-Flutter-with-MacOS/","content":"安裝 Flutter 以及使用 VS Code\nsetup\nflutter\n跟著官方下載\nterminal執行以下指令cd ~/developmentunzip ~/Downloads/flutter_macos_arm64_3.3.2-stable.zip\nexport PATH=&quot;$PATH:`pwd`/flutter/bin&quot;\n\n\nVS code\n\n\n\n\n\n\n\nimport &#x27;package:flutter/material.dart&#x27;void main()&#123;    var appTitle = Text(&#x27;my first Flutter App&#x27;);        var hiFlutter = Text(&#x27;Hi, Flutter.&#x27;, style: TextStyle(fontSize: 30));    var appBody = Center(child: hiFlutter,);        var appBar = AppBar(title: appTitle, );    var app = MaterialApp(      home: Scaffold(        appBar: appBar,        body: appBody,      ),    );    runApp(app);&#125;","categories":["tech_page"],"tags":["Dart","Flutter"]}]