2017/07/09

Web App Manifest

把 WEB APP 圖示放到桌面, 啟動時候有各轉場的動作。

這篇寫得很清楚
https://developer.mozilla.org/en-US/Apps/Progressive

https://developers.google.com/web/updates/2014/11/Support-for-installable-web-apps-with-webapp-manifest-in-chrome-38-for-Android

https://w3c.github.io/manifest/

最常見的應用
https://makeappicon.com/webclip

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html



2017/07/05

Nginx Ip Whitelist (白名單快速轉成 nginx 使用的清單)

Nginx Ip Whitelist

by pass whitelist ref: http://www.kitploit.com/2016/11/fireaway-next-generation-firewall-audit.html


# 白名單設定方式可以參考 stackoverflow 這一篇
https://stackoverflow.com/questions/13917866/nginx-ip-whitelist

# 中文可以參考這一篇
https://www.centos.bz/question/nginx-ip-whitelist/


想把白名單快速轉成 nginx 使用的清單, 但是又不想寫太多程式。
所以直接用 google spreadsheets 轉成 csv 功能
透過 linux shell script 轉換成為 nginx 可以使用的清單

在實際工作動作:
客服人員:編輯 spreadsheets 檔案
系統人員:白名單轉成檔案驗證,並 reload nginx 生效.

## ----------------------------------------------------
## linux script
## ----------------------------------------------------
#!/bin/bash
# 編輯網址 , google doc 權限設定控制
# 將 google doc 白名單取出成為 csv
URL="https://docs.google.com/spreadsheets/d/{請改成你的網址}/pub?gid=0&single=true&output=csv"
echo "w3m -dump '${URL}' > whitelist.csv" | sh

# 備份原本的白名單
mv -f customer_ip customer_ip.bak
echo "# $(date -R) update." > customer_ip
# 去除註解
grep -v '#' "whitelist.csv" > tmp_file
# 取行數
max=$(wc -l tmp_file  | cut -f1 -d" ")
for i in `seq 1 $max`
do
    line=$(awk "NR==${i}" tmp_file)
    action=$(echo $line | cut -d, -f1)
    cidr=$(echo $line | cut -d, -f2)
    echo "${action} ${cidr};" >> customer_ip
done
rm -f tmp_file
#rm -f whitelist.csv

# nginx 重新啟動
# run in /etc/nginx/conf.d
echo "restart NGINX service"
systemctl reload nginx
# return
echo "OK! Done. csv URL in ${URL} ";
## ----------------------------------------------------



2017/07/01

推力(Nudge):決定你的健康、財富與快樂

推力:決定你的健康、財富與快樂

此書的作者
http://www.books.com.tw/exep/prod/booksfile.php?item=0010445555

推力:決定你的健康、財富與快樂
Nudge: Improving Decisions About Health, Wealth, and Happiness

演講內容: 作者:Richard Thaler 在Google的演講
http://www.youtube.com/watch?v=Dz9K25ECIpU

泛科學有一篇寫得很清楚, 可以快速的了解這本書要傳達的概念。
http://pansci.asia/archives/69875



傳統的文字激勵法


荷蘭機場的蒼蠅便斗


Linux Performance 效能評估工具


這個文章說明了系統個連接點的效能評估工具與方式。
http://www.brendangregg.com/linuxperf.html

netflix 工程師先透過 10 個工具在 60 秒告訴你,系統的效能摘要狀況...
http://techblog.netflix.com/2015/11/linux-performance-analysis-in-60s.html

接下來要仔細的分析效能上面的問題,透過 Brendan’s Linux Performance Tools tutorial 的這一篇文章來解釋。


每個指令都是獨有專精的效能評估工具
例如 : perf
https://perf.wiki.kernel.org/index.php/Main_Page
他是可以顯示CPU 上面資訊的計數器 及分析軟體、硬體的性能。
http://wiki.csie.ncku.edu.tw/embedded/perf-tutorial   成大資工WIKI

看起來就是折磨研究生的工具,但是工程師的好朋友。(泣...)

其他就慢慢研究,遇到再來使用了。





HTML5 OpenSource Code Game 免費開放原始碼遊戲


很多 Opensource Game code IN GITHUB
https://github.com/leereilly/games 這份 README 推薦很多遊戲連結


簡易角子機 Opensource html5 game
https://github.com/clintbellanger/Karma-Slots

免費的 HTML5 GAME 原始碼
http://www.java2s.com/Open-Source/Javascript_Free_Code/Game_HTML5/List_of_Free_code_Game_HTML5.htm


W3C 上面的HTML5遊戲教學
https://www.w3cschool.cn/html5/html5-game2.html

捕魚機 HTML5原始碼
http://www.htmleaf.com/html5/html5youxi/2014100552.html



Bitnami 的預設安裝 VM 及容器服務

https://bitnami.com/   是一個提供預先安裝基礎建設及應用程式的服務網站,可以讓開發人員「初期」不用花太多心思再基礎建設上面,就可以用預先安裝好的服務。

所以先選你要的機器影像檔 VM
https://bitnami.com/stack/nginx/virtual-machine

因為我用的是 Linux KVM 但上面只提供 .OVA 格式,所以需要轉換一下格式。
https://wiki.hackzine.org/sysadmin/kvm-import-ova.html  KVM: Importing an OVA appliance

然後就是設定 KVM 的 Machine 了!!
(略)

設定好後,把 SSH 打開最重要的。
https://docs.bitnami.com/virtual-machine/faq/

至於服務該如何使用,可以參考他的文件說明

其他的操作,就和一般使用 Linux 是一樣的。很快速的你就可以有一個可靠的開發環境了。

最後,bitnami 會自動回傳統計資訊回他的網站,記得把他關閉。


2017/05/13

WanaCrypt0r 2.0 病毒 = 勒索病毒 + 網芳分享漏洞攻擊


從症狀來簡單說明一下這病毒可怕的地方,

WanaCrypt0r 2.0 病毒 = 勒索病毒 + 網芳分享漏洞攻擊 
也就是區網內有一台中毒就會全區網沒更新的都被勒索 + 中毒 (如果資訊正確的話)

這等級可比 2001 的 Troj_Nimda.a 型態, 當時幾乎辦公室內的 Windows 都中了
連重新安裝 Windows 後, 還沒修補漏洞插上網路線也會中。
最該害怕的是區域網路有很多 Windows PC 的地方, ex: 學校, 辦公室
因為年代久遠, 剛入行十年內的 MIS 可能都還沒遇過這種等級的病毒 , 所以請各位 MIS 特別注意了。

* 重點直接講:它透過漏洞入侵 ,電腦只要能上網被掃到 TCP 445 PORT 就中毒了。和 2001 年的 Troj_Nimda.a 病毒一樣的感染方式。所以最快的方式是把 TCP 445 鎖住或關閉就暫時安全。 你可以用 netstat -ant  觀看本機是否有開啟 TCP port 45 。


*  http://roger6.blogspot.tw/2017/05/wanacrypt0r-20-eternalblue-ms-17-010.html 這篇有教學關閉 SMBv1

* 漏洞應該是這個 MS17-010  ,    2017-3月份的更新
https://technet.microsoft.com/zh-tw/library/security/ms17-010.aspx#KBArticle


1.目前這已知最新版w10(1703版)沒有這個Bug,所以不會中該隻病毒2. 去「控制台\系統及安全性\Windows Update\檢視更新記錄」
 找有沒有 KB4012215 or KB4012216,如果有就不用擔心
3. XP, Win8, server 2003 也有這個Bug, 微軟特別再 5.12 釋出更新程式


Win7 32bit ↓
http://download.windowsupdate.com/d/msdownload/update/software/secu/2017/03/windows6.1-kb4012215-x86_e5918381cef63f171a74418f12143dabe5561a66.msu
Win7 64bit ↓
http://download.windowsupdate.com/c/msdownload/update/software/secu/2017/03/windows6.1-kb4012215-x64_a777b8c251dcd8378ecdafa81aefbe7f9009c72b.msu

Win8.1 32bit
http://download.windowsupdate.com/c/msdownload/update/software/secu/2017/03/windows8.1-kb4012216-x86_d4facfdaf4b1791efbc3612fe299e41515569443.msu
Win8.1 64bit
http://download.windowsupdate.com/d/msdownload/update/software/secu/2017/03/windows8.1-kb4012216-x64_cd5e0a62e602176f0078778548796e2d47cfa15b.msu

* 當年 2001 年的 娜坦(Troj_Nimda.a) 病毒的災情
https://pttweb.tw/thread/m-1000901707-a
「娜坦(Troj_Nimda.a)」,正透過相當罕見的三重感染管道在網路上大量散
播,包括「電子郵件」、「網路資源分享」及「微軟 IIS伺服器」等三種感染

* 這篇是講攻擊即防禦的重點
https://www.facebook.com/groups/www.businesscity/permalink/377711095957498/
簡單說,W7(KB4012215 )、W8.1(KB4012216)還沒中毒的用戶趕快去載

* 這篇是講災情
https://www.facebook.com/DDHS.TW/posts/415720288808975?pnref=story

* 這篇講解法技術即防禦細節
http://roger6.blogspot.tw/2017/05/wanacrypt0r-20-eternalblue-ms-17-010.html

其實重點在於, 只要有更新上面得 windows update 應該都會沒事. Windows 8 , Windows XP , Windows Vista, windows server 2003 以前, 那就等死巴!!!

* 更新 2017.5.12 微軟釋出更新檔 XP, Win8 , Server 2003 更新檔
* https://www.cool3c.com/article/124186  隱科技報導
https://blogs.technet.microsoft.com/msrc/2017/05/12/customer-guidance-for-wannacrypt-attacks/

* 整理 WanaCrypt0r 2.0 大規模攻擊漏洞系統相關資訊整理與現階段預防方式(2017.05.13更新)

2017/05/04

檢查 https 的 SSL 憑證何時過期?



# 這是簽發的機構 root 憑證過期日
[root@ssl]# openssl x509 -enddate -noout -in ca_bundle.crt 
notAfter=Mar 17 16:40:46 2021 GMT

# 這是你的 https 憑證過期日
[root@v1 ssl]# openssl x509 -enddate -noout -in certificate.crt 
notAfter=Jun 15 02:53:00 2017 GMT

2017 年 6 月 15 日會過期
憑證申請 https://www.sslforfree.com/ 

ref: http://www.esate.com/tc/images/page_ssl_works.png

ref: http://www.esate.com/tc/images/page_ssl_works.png 

2017/04/03

關於PHP, HTML and Javascript 程式碼的混肴與壓縮

把 php 程式碼的混肴密, 可以加上密碼
Free Online PHP Obfuscator
http://www.fopo.com.ar/

把 php 加密
jjencode demo
http://utf-8.jp/public/jjencode.html

美化你的 html code
Format, Beautify, Maxify, Unpack or Deobfuscate JavaScript/jQuery/HTML/JSON/CSS Codes
http://jenson.in/codeformatter/

壓縮你的 html code
Speed up your web pages
https://htmlcompressor.com
壓縮 html




# 原始檔案內容
[mtchang@jangmt]$ cat phpobs.php
echo sha1('12345678');
?>

# 加密過後的內容-執行結果
[mtchang@jangmt]$ php phpobs_code.php
7c222fb2927d828af22f592134e8932480637c0d

# 沒有加密-執行結果
[mtchang@jangmt]$ php phpobs.php
7c222fb2927d828af22f592134e8932480637c0d

# 檔案大小差很多
[mtchang@jangmt]$ ls -la phpobs*
-rw-rw-r--. 1 mtchang mtchang 6634 Apr  3 01:17 phpobs_code.php
-rw-rw-r--. 1 mtchang mtchang   32 Apr  3 01:16 phpobs.php
原始碼貼上去

立即混淆看不懂程式碼

2017/04/01

以 Bootstrap 3 為基礎的扁平化設計 UI Kit

以 Bootstrap 3 為基礎的扁平化設計 UI Kit

沒有美感的工程師, 寫網站最大的問題就是畫面很糟糕. 即使引進了 Bootstrap 的框架後, 能夠做的很糟糕的還是不少. 不過通常已經大幅度改善了原本很糟糕的網站設計.

但寫了一陣子後, 衍伸出另一個問題, 開始有人說 你的網站長得很 Bootstrap  , 這時 Bootstrap 它成為了一個形容詞.

自從 IOS 7 後大家跟風的似的回到扁平化設計  ,  以前曾經研究過相關的扁平化 Framework 有何特點. 但是最後還是選擇了 Bootstrap 的套件. 就因為他真的很好用.

最近發現了好東西  , 就是原本用 Bootstrap 開發的網站  , 只要加上別人家開發好的 UI KIT 就可以變更原本很 Bootstrap 的設計風格, 成為簡潔的扁平化風格.




很 Bootstrap 的 UI



Bootflat 是一個開放原始碼的 bootstrap flat 專案 , 有提供現成的 css 設計及 free PSD 可以提供你自行修改 UI 元件. 使用最簡單的方式就是把 CSS 放在網站的 bootstrap css 後面就可以了.

CDN 版本的 sample code:






Bootswatch 也是一個可以改變 Bootstrap 的設計, 用法和上面雷同 . 他現有 18 種不同的設計可以讓你切換. https://bootswatch.com/



FLAT UI 也是
http://designmodo.github.io/Flat-UI/




看完  , 趕快去改巴,


2017/03/10

網站追蹤技術--音頻指紋追蹤(audio fingerprinting web-tracking)

網站追蹤技術--音頻指紋追蹤(audio fingerprinting web-tracking)


透過 HTML AudioContext 的函式,來追蹤使用者。這功能本來是設計來在 web browser
上面處理聲音分析、過濾的,但用在追蹤及網站使用者識別,更是令人驚豔。(這是根本是 HTML5 版本的程式奇淫技巧呀!!)


Audio Fingerprinting測試DEMO頁面:
https://audiofingerprint.openwpm.com/



研究機構:
普林斯頓大學的研究室,關於音頻指紋(AudioContext Fingerprinting)、WebRTC Local IP Discovery 及帆布指紋(Canvas Fingerprinting)的說明
https://webtransparency.cs.princeton.edu/webcensus/index.html#fp-results
其中關於 AudioContext Fingerprinting 但需要進一步的研究,指紋的穩定性及唯一性。

這研究室開發的 OpenWPM 看起來很強大呀!!
https://github.com/citp/OpenWPM


另一個研究機構,大量收集,並探討 fingerprinting 的有效性。
https://amiunique.org/
還發了一篇 IEEE http://ieeexplore.ieee.org/document/7546540/?reload=true


實作的GITHUB專案:
這個專案,不相容於前一個專案版本 Fingerprintjs ,這個版本但使用多個不同的偵測技術。

線上測試:
http://valve.github.io/fingerprintjs2/

原始碼:
https://github.com/Valve/fingerprintjs2
作者的裡面有一段寫到:「I'm also paying special attention to IE plugins, popular in China, such as QQ, Baidu and others.」 , 幫 china user 廠廠了!!

這是我直接放在我網站的連結 http://jangmt.com/fingerprintjs2/ 
他可以分辨到不同的 chrome 使用者以及更細微的差異.


我寫了一個簡單的測試的頁面,可以讓使用這測試一下他的 展示閱覽的狀態歷史
http://jangmt.com/fingerprintjs/





網站使用者識別機制-帆布指紋( canvas fingerprinting )



* Canvas fingerprinting 可以透過HTML5  BROWSER 的 CANVAS ,依據不同軟體及硬體裝置上對於 Canvas 的實作,得到不同的指紋,得到一個唯一 HASH 值,用這個值來判斷使用者的唯一性。且它無法被無痕視窗封鎖阻擋,也沒有防毒軟體可以阻止它洩漏你的機器識別資訊,AdBlock 要檔是可以,但要自己加入規則鎖 Canvas JS。

* 這讓我想到上一篇,我用 IP清單來抵擋大量的暱名 IP,現在換成這個機制,加上 IP 管制,就可以更精準的阻止匿名攻擊的註冊!!

* 至於哪些沒有 CANVAS 的 browser 就直接把它拋棄了,根本不讓他連網。目前大概只有機器人會用沒有 CANVAS 的 BROWSER 巴。

WIKI: https://en.wikipedia.org/wiki/Canvas_fingerprinting

誰提出的想法:https://cseweb.ucsd.edu/~hovav/dist/canvas.pdf

解釋:https://securehomes.esat.kuleuven.be/~gacar/persistent/the_web_never_forgets.pdf
開始解釋這種追蹤工具的難以抵擋性, 2014年的調查已經有 5% 以上的網站使用這種技術。

猜測正確率論文:https://panopticlick.eff.org/static/browser-uniqueness.pdf  ‎被引用 535 次
「在我們的樣本中,帆布指紋變化相當快速,但即使一個簡單的試探通常能夠猜到是
什麼時候的指紋,是以前觀察過的 '升級版' 瀏覽器指紋,
有 99.1% 的猜測正確 和只有 0.86% 是未命中(false positive rate)。」


* 線上立即可以測試的網站:

(1) 線上測試網站
https://fingerprint.pet-portal.eu/  更詳細的 fingerprint 還可以猜你安裝哪些軟體,且有不錯的識別率。



(2)
我下載 https://github.com/Valve/fingerprintjs 的本機測試結果 ,可以點擊這裡測試。這個比較簡單,直接分析得到一組code ,在同一個機器同 browser 開啟會是唯一值。 v2 版本比較進階,甚至可以識別你的 chrome 帳號登入的不同。



GITHUB 已經有人寫成 framework 可以直接用的 code:
https://github.com/Valve/fingerprintjs  第一版
https://github.com/Valve/fingerprintjs2  第二版


more...
http://valve.github.io/blog/2013/07/14/anonymous-browser-fingerprinting/
http://www.ghacks.net/2014/07/21/companies-use-canvas-fingerprinting-track-online/

另一個研究機構,大量收集,並探討 fingerprinting 的有效性。
https://amiunique.org/
還發了一篇 IEEE http://ieeexplore.ieee.org/document/7546540/?reload=true

我寫了一個簡單的測試的頁面,可以讓使用這測試一下他的展示閱覽的狀態歷史
http://jangmt.com/fingerprintjs/


2017/03/06

TOR 匿名網路的抵擋

有各做網站很麻煩的問題, 就是會遇到透過大量的 ip 重複註冊. 然後 client 可以大量使用匿名網路 ex. TOR , open proxy 等方式大量註冊,且一定是透過機器人來大量註冊,通常會搭配圖檔認證機器人,如果可以雙管齊下, 先擋住機器人,再來擋住 tor or open proxy 就可以防堵匿名的大量註冊。

可以檢查你的網路IP是否為 tor 網路 https://torstatus.blutmagie.de/ 
這個提供 tor db list https://www.dan.me.uk/tornodes 提供ip-list DB and client
這是另一個付費的匿名網路的名單 https://udger.com/resources/ip-list/web_proxy
但能夠完全阻擋嗎?
我猜檔個 80%~90% 應該可以巴 , 要全檔太難了, 畢竟連手機都有 tor browser 了, 無處不再呀!





至於機器人那段, 加強文字驗證碼應該可以解決. 但要搞到很難辨識又失去方便性,
這是可以取捨的點.
google reCAPTCHA  https://www.google.com/recaptcha/intro/





2017/02/12

快速的 ping 很多主機, 並且使用網頁呈現結果.


這是以前管理很多主機的時候,寫的小工具. 雖然很簡單,但是很好用。

* 我是透過 fping 來快速的 ping 很多主機 , fping 可以執行一個列表 .txt 的清單,並且使用多執行緒的方式顯示 ping 的結果。每次 ping 大約只要 5~6 秒左右,再多的主機也是大約這樣的時間。

* 安裝 fping 程式 ,  這個工具可以快速的平行 ping 很多的主機. 可以協助快速偵測主機服務是否存在。
* http://fping.org/

* 安裝 memcached sevice and php 的 mod
http://php.net/manual/en/book.memcached.php

* 接下來我使用 php + bootstrap 顯示執行後的結果, 並且為了讓使用者不要一直 reload ,透過了 php memcached 來加速再 60 sec 內不小心的 reload page 行為。

程式連結:https://github.com/mtchang/code/blob/master/fping.php
顯示結果:


程式碼:

2017/02/04

PHP 檢查傳入的 DATE 日期是否合法,不合法的話就以現在的日期為值。

PHP 檢查傳入的日期時間是否合法,不合法的話就以現在的日期為值。


  // get example: ?current_datepicker=2017-02-03
  // ref: http://php.net/manual/en/function.checkdate.php

  function validateDate($date, $format = 'Y-m-d H:i:s')
  {
      $d = DateTime::createFromFormat($format, $date);
      return $d && $d->format($format) == $date;
  }

  // 取得 get 傳來的變數,如果有的話就是就是指定的 yy-mm-dd 沒有的話就是今天的日期
  if(isset($_GET['current_datepicker'])) {
    // 判斷格式資料是否正確
    if(validateDate($_GET['current_datepicker'], 'Y-m-d')) {
      $current_datepicker = $_GET['current_datepicker'];
    }else{
      $current_datepicker = date('Y-m-d');
    }
  }else{
    // php 格式的 2017-02-24
    $current_datepicker = date('Y-m-d');
  }
  // var_dump($current_datepicker);

2017/01/27

粉粒體設備--粉碎機


這是一台粉碎機的設備,以前每天都在做這些事,從事產業設備輸送、粉碎設備的製造。從設計、製造、組裝、採購全部都有參與整個過程,因為這些經驗讓我加速了社會化的過程。

經過了 1x 年了還是映像深刻,讓我再來製作也還行的,每天的耳濡目覽,不是那麼容易的忘記。這機器有很多用途,主要是把物品打成更細小。可以把粗玉米類的原料物品打碎成為比較小的顆粒。也有商家買去把回收物打碎成為更小的顆粒,以利於環保回收。 差異只是在於設備的網子及刀片的規格不一樣。現在來看網子、刀片就是耗材,賣耗材及設備的維修才是後續可以長遠經營的方式。但那時候沒有這種觀念,也不知道如何經營與行銷。

所以我現在的職業是寫程式的工程師,最近因為有需要又把這些圖檔挖出來,想想這些設備應該還是會一直存在,只是角色、用途會有所轉變,至於是否能夠轉變成為一種獲利的方式,就要看經營者的智慧了。




















2017/01/12

神馳經驗(flow experience)


昨天寫程式好像有進入了 zone ,也就是所謂的神馳經驗(flow experience)

http://topic.parenting.com.tw/issue/2013/futurelearning/article2-3-1.aspx

但也不是每天寫程式都可以進入大概一週只能出現 1~2次 ,每次持續約 6-10 hr 。

感覺進入的方式是從身旁的小事件開始累積到一段時間(30min ~ 60min) 後,

整個頭腦的思考非常的清晰,開始進入寫程式有如神助的情境。

如果把頻率拉高的話,我程式早就寫完了。



like