CodeLove 論壇 - 免費自學作業包＆新手友善討論區，幫你轉職工程師！

👉 讀技術文章 👉 上自學課程 👉 討論區交流

🔍 搜尋結果：資安

[發問]逆向與資安：這編碼(可能)是什麼？為何連使用者ID都要加密?

## 前情提要呈[上篇](https://codelove.tw/@JsLover0018/post/gqvQwa)，大概能理解有些檔案位置不想被try，所以需要動態改檔名。而如果又是有價值的影片，加上token或是用hash去加密，好像也很合理，總之讓你過期後就不能訪問，必須得經過再次驗證(允許的會員登入後發請求)再去拿到token，這樣子對於資安來說是很合理的。這也就延伸了我的新一個問題，有些網站連會員ID都經過加密(!?)。 ## 問題說明 ![](https://i.imgur.com/DbI8pUR.png) ![](https://i.imgur.com/j9naFqj.png) 這我就不特別說是哪些網站，就圖片提供，可以看到ID變成了 ``` oKA0twEww4DSxr9HDfMa 5a12d39f5e11b3702fa1922e ``` 這種東西當然很明顯這種訪問就出現在網址列上的東西，應該不是很重要，點別人的會員空間，通常就能看到，而且也是固定的，那麼加密的理由不是很明顯呢！其次是通常要進行這種"不重要"資訊加密，應該也不會是非對稱類型那種太過複雜的(?) 我感覺大約也就是md5之類，不過其長度好像不同，但確切去理解這兩種是什麼加密並不是我主要目的啦！主要目的是想知道：其加密的理由、若當我是後臺管理員，該選擇哪一種加密手段用在這種ID上？ ## 延伸討論像本站的ID就是明文，網路上幫PTT做備份的那個PTT網站也是 (可以輕易透過userID去肉搜PTT帳號的那個網站) 我在想這樣子的所謂"加密" 也對爬蟲沒有什麼抵擋效果才對難道說僅僅只是一種編碼? 其實會員帳號通常是英文的應該不需要特地把中文字拿去編碼如果說是因為保障安全怕被人家try密碼所以隱藏帳號...? 感覺有可能只是很多恐怕都能透過FB登入這樣子的"安全機制"倒也是好像沒很重要又或者這個編碼就正好是透過第三方憑證登入創造出來的一個code? 以上很多猜想都是我外行的想像逐漸了解這些未來有機會我也會架站希望能深入了解這背後的原理更重要的是動機還請前輩多多指教

1個讚 4留言 168瀏覽

站長阿川 · 11月01日

Laravel + GraphQL 接案心得＆範例分享 Part 1：強大優點、API 線上試玩、工具介紹

客戶最近有把舊 laravel 專案改寫為 SPA 的需求，需要前後端分離為了方便前後端溝通、改善開發者體驗，我建議＆協助他們導入 GraphQL 技術到 laravel 專案中！實際導入＆開發半年之後，成效非常不錯！前端工程師、後端工程師都用得很開心！今天跟大家分享一些心得＆範例程式碼！ ## 破除迷思 > 很多公司聽到 GraphQL 會有點卻步，覺得太新、不成熟其實，這技術面世八年了，在國外已經被許多公司廣泛採用，不算很新了！ > 很多公司會以為這是給大公司用的技術，小公司不適合使用其實，我自己的使用經驗是，就算團隊只有兩個工程師，這技術也很好用，會讓開發速度更快，不會更慢！ > laravel 社群會以為這技術在 node 社群、或其他社群比較常見其實，laravel 社群也有很好用的套件，導入也很方便！所以這技術非常值得學習、使用，至少了解一下！ ## 優點介紹我認為最大的優點就是，大幅降低了前後端溝通的成本！傳統開發，後端寫完 API，要另外寫文件告訴前端網址是多少、回傳的資料格式然後前端需要用 postman 之類的工具，方便測試、開發使用 graphql 的話，後端寫完程式碼，就同時自動生成文件＆測試工具了！為了方便讀者「親自試玩」以上描述，我準備了一個範例專案給大家！這個專案模擬電商網站，API 可以撈 products 與 comments 兩種資料！然後可以訂閱商家的電子報，也就是新增 subscriber 這種資料！ ## 實務範例與 API 線上試玩我先分享範例專案給大家！ https://graphql-laravel-example.tw/ 原始碼也已公開 https://github.com/howtomakeaturn/graphql-laravel-example --- 以往 RESTful 的設計，「讀取資料」這種動作，在 graphql 稱之為 query https://github.com/howtomakeaturn/graphql-laravel-example/tree/main/app/GraphQL/Queries 會去「更新資料庫」的動作，在 graphql 稱之為 mutation https://github.com/howtomakeaturn/graphql-laravel-example/tree/main/app/GraphQL/Mutations 以上兩個資料夾可以翻閱一下，每支 api 會是一個檔案，所以很好管理接著使用 graphql 社群的強大工具：graphiql，就同時得到文件＆測試工具了！ https://graphql-laravel-example.tw/graphiql 我安裝了一份 graphiql 給大家，點進去玩玩看吧！把他當成是技術規格文件與 Postman 測試工具，身兼兩種用途！有了這個工具，大幅減少了前後端需要溝通的事項，對於前後端合作有「巨大幫助」！（請注意，實務上 graphiql 建議在本機執行，不要這樣線上公開，會有資安疑慮） ## 套件介紹在 graphql 社群，有兩種開發 api 的哲學分別是 schema-first 與 code-first 兩種方法 laravel 社群最知名的 schema-first 套件是這款 https://github.com/nuwave/lighthouse laravel 社群最知名的 code-first 套件是這款 https://github.com/rebing/graphql-laravel schema-first 與 code-first 的差異與優缺點我先不細談總之，我個人比較喜歡 code-first，我覺得比較直觀、簡單、好導入所以我的範例是用 https://github.com/rebing/graphql-laravel 這套件您的 laravel 版本建議至少要是 8.0 以上版本，太舊的可能會有問題順帶一提，兩個套件背後都是使用 https://github.com/webonyx/graphql-php 所以底層元件一樣，兩者有很多通用的觀念，不用太擔心 --- graphiql 是 graphql 官方的重要工具 laravel 社群已經有人寫好懶人安裝套件了 https://github.com/mll-lab/laravel-graphiql 按照說明安裝即可得到超好用的自動文件＆測試工具面板！ ## 結論有了以上兩個套件，按照說明分別安裝然後參考我提供的範例程式碼 https://github.com/howtomakeaturn/graphql-laravel-example 您應該就可以在專案之中導入 graphql 基礎架構，並且開始用 graphql 寫出您的第一支 api 我在替客戶導入的時候，發現網路上 graphql 的教學、說明雖然很多但是剛開始寫還是很困難，很少範例所以我製作這份 open source 方便大家參考＆入門並且直接把 graphiql 面板公開部署上線，方便大家體驗！（此為系列文章，更多內容會在近期發佈） --- # 系列文章 - [Laravel + GraphQL 接案心得＆範例分享 Part 1：強大優點、API 線上試玩、工具介紹](https://codelove.tw/@howtomakeaturn/post/yx08mx) - [Laravel + GraphQL 接案心得＆範例分享 Part 2：前端 Query/Mutation 與 React 串接範例](https://codelove.tw/@howtomakeaturn/post/2an0Gx)

1個讚 0留言 2,689瀏覽

站長阿川 · 06月28日

回答網友提問：需要在意框架背後幫你做了哪些事情嗎？可以永遠不去管嗎？

收到網友提問如下： ``` 這是最近跟一個朋友聊天聊到的朋友是寫 .net Framework 的我剛碰Vue的時候，跟他說我看不懂Vue在背後是怎麼運作的、為什麼這樣寫會變成這樣的結果？他跟我說，不用去在意框架背後幫你做了哪些事情反正就是做那些制式的動作，把功能實現就好不然工程師哪有那麼多腦力去記住程式底層都做了什麼這樣真的是好的嗎？工程師的等級差距並不在於是否知其所以而不知其所以然嗎？ ``` 這應該是每個年輕工程師都有的疑問，寫一篇完整、公開回答跟大家分享，給類似狀況的人參考。我先講結論：這取決於你想不想越變越強、不斷提升競爭力，還是只想混口飯吃如果只想混口飯吃，什麼工具都是學個用法，懶得研究，然後東西做出來交差了事，那可以永遠不去管工具背後原理不過，這種心態，職涯成長、薪水成長空間會很有限，然後在 40 多歲的時候會有「中年危機」，會很慘、壓力很大因為屆時新工具你跟年輕人一樣不太會用，舊有的經驗又幫不上忙，因為你從來不肯學背後通用的觀念回到問題本身，我認為有兩件事情值得分享，有兩個觀點你需要去權衡，我們先談談「抽象」 # Abstraction 抽象軟體工程師的主要工作就是「抽象化」，把各種邏輯分不同層次「封裝為抽象」這樣才有重用性，別人才能基於你的成果，進一步開發更豐富的東西網路的七層架構，各種協定，程式語言，語言上面的工具、套件、框架，都是抽象 # The Law of Leaky Abstractions，抽象滲漏法則：除非無關緊要，否則所有抽象都或多或少會滲漏這是在軟體圈知名的一個理論，稍微資深的開發者都應該要知道這篇文章 https://www.joelonsoftware.com/2002/11/11/the-law-of-leaky-abstractions/ 我簡單說明一下，抽象滲漏法則就是在說：所有抽象都一定會在某些情境下失效，此時便是滲漏。你只要工作時間夠久就會知道，長遠來說，你還是要花時間去研究它抽象背後的東西。你本以為只是前端隨便寫一寫交差，卻發現有一天需要認真去看 HTTP 協定、CORS 在講什麼，否則無法處理資安問題你本以為只是後端 CRUD 隨便寫一寫交差，卻發現有一天需要認真去看 database 索引機制、記憶體管理，否則無法處理效能問題結論：「抽象」幫助我們省下一些工作的時間，但關於技術細節的學習時間，無法省下來。 # 你的生產力要對公司商業產值有幫助我認為工程師常常在另一個方面犯錯，就是鑽研自己喜歡的細節，不去管對於公司的商業產值與個人生產力我曾遇過公司要求協助更換一張網頁圖片，某工程師居然兩個星期還沒更換完成問他原因，原來是他看圖片尺寸不順眼，在研究分割、壓縮、整個網頁的整合機制，以及相關工具的導入問題是，那個網頁跟圖片並不重要，此時專案還沒進到效能優化的階段，此功能應該盡快上線，視情況決定下一步這完全是沒搞清楚優先順序，只顧著研究自己爽的東西，也沒跟相關人士確認任務目標 # 結論回到原 po 的描述 ``` 不然工程師哪有那麼多腦力去記住程式底層都做了什麼 ``` 這是大錯特錯，隨便找一個優秀的資深工程師，從 Vue 到 React 到各種工具，背後原理、相關機制，都能深入淺出跟你說明什麼 shadow DOM / virtual DOM / pure function / fiber tree / proxy / immutable 等等，就算好幾個月不碰工具，還是能輕鬆解釋，根本不是死記硬背的，這全都是經驗＆融會貫通的結果但是過猶不及，不顧公司需求，自顧自地研究技術細節也不好該花多少時間研究背後機制？這是一個需要權衡的問題請從公司需求的角度，以及個人長期職涯的角度，視情況判斷以上，簡單分享

2個讚 0留言 2,264瀏覽

站長阿川 · 05月17日

後端 JS 訓練一：第2課 ── 用 node 讀取檔案內容

## 課程目標 - 用 node 讀取檔案內容 ## 課程內容來學習一下用 node 讀取檔案的方法學會這方法，可以用 node 寫出簡易的檔案內容分析程式 --- 建立一個 `my-name.txt` 文字檔，在裡面輸入你的名字然後建立 `read-my-name.js` 程式，裡面輸入 ``` var fs = require('fs'); fs.readFile('my-name.txt', function(err, data) { console.log("您好，" + data); process.exit(0); }); ``` 然後去終端機輸入 ``` node read-my-name.js ``` 你會看到一段打招呼的訊息！ --- 讓我們逐行說明一下 ``` var fs = require('fs'); ``` 這是載入「檔案系統模組」的意思，`fs` 是 `file system` 的縮寫 `readFile` 函式，第一個參數是檔案名稱，第二個參數是「一個函式定義」看起來有點怪，其實是「非同步程式設計」的關係之前在學網頁元素的事件處理時，就是用「非同步」程式設計處理也就是我不確定「點擊」事件何時會發生，但我先「綁定」好事件發生時要做的任務還有在網頁呼叫 AJAX 時也是，我不確定「主機回應」何時會拿到，但我先「綁定」好拿到之後要做的任務這邊 `fs` 的意思就是：我不確定何時會「檔案讀取完畢」，但我先「綁定」好讀取完畢之後，要做的任務看起來很怪、很醜，這種設計的意義不明，對嗎？我也覺得！後面會教你如何改寫成「同步程式設計」，先照做就好 -- `console.log` 是印出訊息到終端機（語法就跟在瀏覽器環境一樣！） `process.exit(0);` 是結束程式的意思。那個 `process` 是代表當前 node 程式的全域變數 --- 在瀏覽器裡面，無法去操作「檔案系統模組」，否則也太可怕，每個人上網時，都能用 js 亂改電腦上的檔案，資安大問題！在瀏覽器裡面，也沒有 `process` 這個全域變數用 node 跑完這段程式，你應該會發現，這段程式拿到網頁環境，是無法執行的！在瀏覽器、node 跑 js 程式，有很多相似，也有很多相異之處，希望你慢慢抓到兩者的感覺！ ## 課後作業讓我們嘗試開發一個 CLI 版本的待辦管理工具請建立一個檔案 `todos.json` 並放入以下內容 ``` [ { "title": "去操場跑步" }, { "title": "去市場採購" }, { "title": "找朋友吃飯" } ] ``` 然後建立一個 `read.js` 檔案使用者輸入 `node read.js` 之後，終端機會去讀取 `todos.json` 並且顯示 ``` 您的待辦事項： #0 去操場跑步 #1 去市場採購 #2 找朋友吃飯 ``` 完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法： **方法一** 直接截圖視窗內容，上傳到留言區 **方法二** 開一個新資料夾，用 git 初始化這個資料夾接下來的作業，都放在這個資料夾，然後上傳 github 然後把 github 專案連結，貼到留言區即可

0個讚 6留言 490瀏覽

歡迎發文

💡 記錄日常工作的實踐、心得

💡 發表對生活和職場的感悟

💡 針對感興趣的事件發表隨筆或者雜談

💡 詳細介紹你掌握的一門語言、一個技術，或者一個興趣

💡 或者，就直接把你的部落格搬到這裡（支援 API 可以撈）