發表文章

ASP.NET透過jQuery Ajax不斷更新呼叫WebMethod存取套用jQuery Sortable效果的DIV內項目順序列表

圖片
  首先先有辦法在drag放置完取得順序列表 See the Pen jQuery Sortable Test by Jacob ( @dryjoker ) on CodePen . 在前台stop方法裏頭包覆傳遞order list的ajax呼叫 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 $ . ajax ({ type : "POST" , url : "../SubWin/PatentDeDup.aspx/SaveOrderList" , contentType : "application/json;charset=utf-8" , data : '{order_list: "' + sort_id + '" }' , dataType : "json" , success : function ( data ) { if ( data . d == "success" ) { console . log ( "save order list successfully" ); } else { //alert(data.d); console . log ( "save order list not return success" ); console . log ( data . d ); } }, error : function ( result ) { alert ( "API Error" ); } }); 後端aspx.cs 1 2 3 4 5 6 7 8 [System.Web.Services.Web...

網頁跑馬燈Marquee的替代方案使用css動畫達成

圖片
  由於marquee tag 已經過時此物在一些主流瀏覽器上也常遇到怎麼沒有跑馬燈效果 所以這裡筆記一下解決替代方案 marquee在之後瀏覽器html tag語法中已算過時了 https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/marquee 因此這裡建議使用最新css3  animation方案 在開始style 定義css樣式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 < style > .news_marquee { animation : slide 7s linear infinite ; color : white ; } @keyframes slide { 0 % { transform: translatex( 0 %) } 100 % { transform: translatex( 100 %) } } </ style > 在要顯示跑馬燈效果的地方div包覆(class name記得套用樣式才吃的到) 這裡假設是在使用bootstrap container row 的情境 建議要在最外層再包一個div且這個div的style要設定overflow:hidden; padding就隨意 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <div class= "container" > <div class= "row" > <div class= "col-12" style= "padding: 0.5rem;overflow: hidden;" > < % marquee_data[0].forEach(item=>{%> ...

C#定義一個Call API並返回Stream的共用方法_參數支援傳入不同物件的彈性設計(依賴倒轉原則DIP)

圖片
  在很久以前有寫過有關SOLID的文章 設計模式特訓_Day01_SOLID五項鐵則 https://coolmandiary.blogspot.com/2017/05/day01solid.html 如今在專案偕同過程也遇到實踐機會 假設我今天有一個method想要傳入固定要做 json反序列化成其對應物件的Model Class 這種Model Class可能在專案裡面有一或多個 IC_KeyWord_Model 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 using Newtonsoft.Json; using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Web; /// <summary> /// IC_KeyWord_Model 的摘要描述 /// </summary> public class IC_KeyWord_Model { [JsonProperty(PropertyName = "keyword")] public string keyword { get ; set ; } [JsonProperty(PropertyName = "similar words")] public string [] similarwords { get ; set ; } [JsonProperty(PropertyName = "additional words")] public string [] additionalwords { get ; set ; } } IC_RcmdAssg_Model 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 using Newtonsoft.Json; using System...

C#_當呼叫API內容返回結果反序列化成物件遇到對應Raw data欄位名稱空白間隔Json.NET處理方式

圖片
  由於近期偕同專地圖系統推薦相關詞詞向量檢索API 要接回Response做反序列化時遇到的問題 做一個筆記紀錄 這是用PostMan看的到的  Input跟Output皆為Json格式 而對應要反序列化的物件Class定義 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 using Newtonsoft.Json; using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Web; /// <summary> /// IC_KeyWord_Model 的摘要描述 /// </summary> public class IC_KeyWord_Model { public string keyword { get ; set ; } public string [] similarwords { get ; set ; } public string [] additionalwords { get ; set ; } } 這裡遇到尷尬的點就是 可以看到它原始Response的欄位資料有空白間隔 然額我們在C#裡面不可能空白間隔命名我們物件的property 這裡只要記得在屬性欄位上方加上一個 [JsonProperty(PropertyName = "XXXX")]即可 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 using Newtonsoft.Json; using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Web; /// <summary> /// IC_KeyWord_Model 的摘要描述 /// </summary> publ...

如何在Digital Ocean的ubuntu主機上透過certbot配置Let's Encrypt免費且自動續啟用的SSL安全憑證

圖片
  在有一篇簡單介紹了port 443的 https https://coolmandiary.blogspot.com/2021/02/https.html 和基礎密碼學概念 而一個對外網站通常也對於安全認證算是一個門面 就跟豬肉攤有無拿到標示國產標章是類似概念 約2018之後 沒有HTTPS認證的網站預設會被Chrome瀏覽器標記為不安全 這更會影響流量和讓人多願意停留在此網頁上瀏覽的時間 在此我們採用certbot這套工具 Certbot 可在託管主機上執行的指令 sudo add-apt-repository ppa:certbot/certbot sudo apt-get update sudo apt install python-certbot-nginx (舊指令) sudo apt install python3-certbot-nginx (新版本要用這只令) 最後 sudo certbot --nginx -d {domain name} -d www.{domain name} 透過指令會自動幫我們 修改nginx default file的port設定指向443 路徑:/etc/nginx/sites-enabled 將預設80改為443  當指令一下會有如下output 這裡要小心注意會有兩個問題回應 其中當問到有用戶想要透過 HTTP 80來進入網站時要做的事情 要輸入2 給他重新導向443 HTTPS前綴的網站路徑 此時將網頁重新刷新就會發現本來顯示不安全的 突然變為有憑證的鎖頭外觀 通常是3個月就到期 這裡用 sudo certbot renew --dry-run 測試印出是否會在到期時重新啟用另一個憑證 移除參數 --dry-run 就會正常執行,會覆蓋舊憑證。 完整經過certbot幫我們弄好的 nginx default file配置文件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 6...

經得起原始碼資安弱點掃描的程式設計習慣培養(二)_8.Insecure Deserialization :不安全的反序列化漏洞ASP.NET處理方式

圖片
近期在專案偕同上被Checkmarx掃碼掃到高風險的程式片段 偵測到Deserialization of Untrusted Data (OWASP  2017第8點Insecure Deserialization) 因此要做程式碼安全品質的修正 情境: Call web api 回傳回來(讀取外部的json測試檔案)的json  字串要反序列化轉為DataTable for GridView Bind呈現 CheckMarx掃碼報告給的說明 ============================================================ Deserialization of Untrusted Data 風險: 對不受信任的資料進行反序列化,可能允許攻擊者提供惡意的物件給反序列化程式碼使用。如果危險物件被不安全地反序列化,則可能透過反序列化的過程中,呼叫可能可用的類別(Class)或方法(method)來執行程式碼或操作系統命令。 此外,反序列化可能會繞過邏輯驗證。由於反序列化通常使用自己的方法,從序列化資料中構造新物件,因此它可以繞過建構函數或setter中強制執行的檢查,這將允許攻擊者反序列化未經驗證不正確或完全惡意的物件。這可能會導致例外狀況,進而影響程式邏輯。 發生原因: 序列化和反序列化物件,對於遠端Web Service流程是不可或缺的,其中物件通過Web Service(例如透過網路)在程式碼實作之間傳遞。在反序列化期間,從Web Service上提供的序列化物件建構新物件;但是,如果被反序列化的物件不受信任,則可能包含意外或有潛在危險的物件。 如何避免: 盡可能不要在遠端Web Service之間傳遞序列化物件。相反地,請考慮在Web Service之間傳遞原始值( value primitives),並使用這些值填入新建構的物件。如果需要,使用白名單方法傳遞物件。 務必確保傳遞的物件是已知的、可信的和可預期的。除非物件已經過驗證且屬於受信任的已知類型,並且不包含不受信任的物件,否則不要從任何來源動態建構物件。 ============================================================ 攻擊者在欲被反解譯(de-serialize)回物件的byte stream...

TFS日常使用筆記2_從AzureDevOps抓一個專案下來

圖片
 由於很久沒有抓過了所以有點小忘記 這裡在Little Note一下 開啟vs2019後 選複製存放庫 在本機新建一個空目錄 TFS側欄選擇 原始檔控制總管 針對目標專案repo去選擇對應的Local空目錄 按下確定->對應 選擇是 就會開始抓下來

jQUery套件台灣地址快速串出TWzipcode

圖片
  在頁面中有時會需要填寫 聯絡資訊地址等等 而台灣地址縣市對應轉換鄉政跟郵遞區號 在過去要串可能要自己手工刻製很久 可能要去弄捨麼爬蟲爬取國家地址縣市鄉鎮資訊、資料庫儲存 定時還要更新..... 而如今有TWzipcode 幫助我們節省了不少時間 jQuery外掛官網 https://code.essoduke.org/twzipcode/ 範例: See the Pen twzipcode_example by Jacob ( @dryjoker ) on CodePen . Ref: 縣市升格與網站地址表單雜談 https://www.minwt.com/webdesign-dev/js/21756.html 台灣縣市鄉鎮郵遞區號 下拉選單外掛 TWzipcode 使用心得 https://www.wfublog.com/2017/08/complex-form-custom-grid-system.html https://www.wfublog.com/2017/10/taiwan-county-town-zip-address-twzipcode-jquery.html 如何設計購物網站的地址欄位? https://www.astralweb.com.tw/shopping-site-address/ [外掛] jQuery TWzipcode 免資料庫,只需載入外掛模組,立即產生臺灣 3 碼郵遞區號 https://www.minwt.com/webdesign-dev/js/21756.html