主題

【前端】淺談五倍券網站程式碼爭議

大きな小代 | 2021-10-12 14:58:54 | 巴幣 22 | 人氣 174

  標題打淺談不是因為不想負責,而是我不認為自己有多資深,但又想講些什麼,才以「淺談」開頭。
  先自我簡介(談不上什麼人權),文組畢業,但喜歡 coding,自學走上前端職涯,目前年資 2 年(就是菜XD),後端因工作需求略有涉獵(古老的 php......)。
  這件事件爆發,我首先看到有人罵「不懂不要裝懂」——對我也想這樣罵(雖說直接罵所有文組有點一概而論了),老實講,當部分不懂這個領域的對此大放厥詞,處在這領域中的人大概都會覺得很好笑XD 而不懂的除了那些被稱作「文組」的人,還有「非前端的人」,前端、後端和其他程式領域,其實真的差滿多的,無論是程式碼細節、版控與發佈流程等。
  以下內容沒有參考過誰說的,也沒有政治立場,單從程式面向來分析。在我眼中其實不是什麼很大的事...... 也不是什麼會有多個論點的人文議題,就是很單純的程式碼問題。所以若我有講得很糟的部分,請不要懷疑,是我自己能力不足
  若要扣我帽子,我只能不客氣的說:「這篇內容太深了不適合你,請離開。」

|那些簡體的註解是什麼?

  已有人找到來源:CSDN 上的 福州-司馬懿 的文章。這篇文章其實是在講「怎麼使用 qrcode.js」這個 davidshimjs 在 Github 開放的套件,而這個套件我也有使用過。

[ 套件 ] 針對特定功能寫成的封閉性的程式。可以在要求的環境下,引入自己的程式碼中,達成特定目的。
[ Github ] 一個版本控管與開源程式碼網站。每個開源專案通常都會聲明使用權限。

  使用這個套件,並無抄襲的問題,主要是因為該套件作者聲明了「可以商用」,所以單就引用這套件,是絕對沒問題的。
  那麼直接複製此文章的段落,是否構成抄襲呢?...... 我不確定在法律上這算不算抄襲,因此僅以文章那段程式碼能做些什麼來看這件事:此段僅僅是解釋怎麼使用這個套件,有哪些控制參數,每個參數的意義是什麼
  因此複製的這部分,也不太算是什麼功能(?)這些參數實際上都是套件裡就有的,不是這文章中擴充的...... 要說是抄,我自己覺得不是,因為他也沒轉載這段內容說是自創的,也不是這些程式碼達成「產生 QRCode」的實際功能 / 過程。

|我認為的事件可能起因

  該前端工程師(可能僅是網頁設計師,很多這種網頁設計公司沒有前端工程師的職位)接到需要在前端產生 QRCode 的需求,或是不能額外建立後端 api,所以只能在前端實現......

[ 路線 1 ] 至 CSDN 搜尋「qrcode js」,跑出了福州-司馬懿的那篇文章。因為這篇文章,知道有這個套件。引用了套件後,複製這段參數說明,直接修改參數內容,留下註解方便日後要修改參數用。

[ 路線 2 ] Google 搜尋「qrcode js」,跑出了「qrcode.js」這個套件。引入後,想了解有什麼詳細參數,加以搜尋,跑出了福州-司馬懿的那篇文章,複製這段參數說明,直接修改參數內容,留下註解方便日後要修改參數用。

|前端是什麼?

  在一個網站運作中,分別由「前端」與「後端」共同維護。
  後端負責「資料庫」與「提供前端 api(窗口的概念)」。後端可以給前端想拿的資料,或是接收回傳的資料後,由後端處理、寫進資料庫。
  前端負責「網頁呈現」的部分,舉凡網頁排版、網頁互動,以及拿到的資料如何呈現、把使用者輸入的資料丟給後端等。

  哪端會產生資安問題?答案是「都會」。
  後端在寫進資料庫時,沒針對有安全性疑慮的資料做額外處理,以及 api 設定有漏洞,讓駭客有機可趁,就有可能產生資安問題。
  前端在傳輸資料給後端時,若包含有安全性疑慮的資料,或是後端回傳回來的資料有未加密過的資料(連加密過都可能被破解了),個人認為相對後端而言更容易被駭。
  但我個人並沒有很深入研究資安這一塊,因此不細講,單就不認同有些人說「前端才不會有資安問題」做出反論。

|這段程式碼的問題

1. html 與 js 沒有分離:不是現在開發的趨勢...... html 和 js 沒分離,維護上會有困難,且裸露在 html 的 js 通常無法透過打包再處理。
2. 打包時應去註解;寫程式碼時應自我要求註解的可維護性。

[ 打包 ] 前端的打包指,將部分開發流程自動化、做客製化的檔案處理,減少以往需要人工去做的重複性工作,且能做到複雜的處理,並能維持開發與發佈環境的獨立。

  對,這段的問題就只有這樣,沒有其他的了。

  「分離程式碼」這問題說起來不大不小,端看這個專案的複雜度。網路上亦有寫的很清楚的文章,在此不獻醜了。

  而註解的部分,是可以透過打包處理掉的。我翻了五倍券官網的檔案,發現獨立的 js(套件)檔案註解也全都在,且沒壓成一個檔案,私認為其打包的方式有點過於簡易了,或可能根本沒打包...... 算是有點舊式的開發方式,也不能說錯,就是會有一些問題(註解、容易被拆、使用者讀取速度等)無法處理罷了。
  至於該註解在開發時,是否需要被重寫?我認為雖然團隊沒要求,但是自我要求是對自己好也對他人好,以利日後的維護。
  其實在開發流程中,每個 team 都會有自己的管理模式,且通常會在 push 至 git 時做基本的統一風格處理,若沒有處理,就是該 team 沒要求(也可能是單獨一人開發)。而除非團隊夠大能夠做 code reivew,不然不做在台灣業界很常見的,這狀況下主管也不會閒來無事看你的程式碼...... 能正常運作就可以了(當然也可能是等到功能出問題才會找你XD)
  code review 可以讓團隊成員都清楚程式碼的變數與走向,並能統一開發風格;但是當團隊不大,缺點就會被放大——需要花非常多時間在這上面,會侵佔開發時間。所以台灣的很多中小企業不流行這種開發方式(等到出問題時就有機會看到很多很恐怖的 code)。如同程式碼的世界通常沒有唯一解,團隊管理方式也沒有唯一解,因此看到有些人說「會 code review 啊還出這種錯一定是XXX的問題」,恕我無法苟同,這僅僅牽涉自我要求的問題。

|有沒有資安疑慮?

  單就這段程式碼,沒有資安疑慮。
  首先,前面有說到這段複製過來帶有簡字的程式碼的意義,很明顯沒有任何資安問題參雜在內。再者,我自己拆過 qrcode.js 的程式碼內容(還改編過),裡面完全沒有會回傳資料或植入病毒的內容,所以針對五倍券網站產生 QRCode 這個部分,完完全全沒有資安問題。
  至於是否為外包給中國工程師?目前網站上檔案裡存在的註解含有正體中文,滿像台灣工程師會開發的方式(至於註解應用英文或中文那又是另一個議題了),但是曾出現過「質量」這個用詞,不知道是不是不小心的。因此我覺得這個議題還需要更多證據
  而其他部分的資安疑慮...... 我個人有點懶得翻其他部分,所以不好意思沒辦法解答,待有心人士翻 Network 傳輸紀錄了!且除了前端,後端的資安問題從前端這邊無法看見,所以真的算是大哉問了。



以上淺談,未深入分析之處基本上是我沒有研究的領域,不敢大放厥詞
歡迎各方討論,若我有分析錯誤的地方,也請幫忙指正,謝謝!


創作回應

Xan
媒體吵這個在程式設計師的眼中,真的是無言傻眼翻白眼……
2021-10-12 15:47:50
大きな小代
他們只是想上升到政治議題,結果一堆人不懂還起舞(嘆)
2021-10-12 15:50:13
絕對黑油的一個人
我覺得這個專案
在上面眼中可能真的沒什麼機會再維護
所以打包之類的隨便就算

沒 我是說 一定是給的薪金不夠
令工程師沒心情認真做(X
2021-10-12 16:01:38
大きな小代
這種網頁設計公司,通常都有既定的模板和一套流程,我傾向是他們都用很舊的開發方法QQ
2021-10-12 16:30:42
紅杏
長知識 感謝!!!
2021-10-12 16:33:35
大きな小代
謝謝你看完,我打完都覺得文好長對不起讀者QQ
2021-10-12 16:34:28
紅杏
有內容的文章 不會有太長的問題 LOL
2021-10-12 16:38:58
大きな小代
[e19] [e19] [e19]
2021-10-12 16:45:39

更多創作