Day: May 23, 2018

  • Angular with Bootstrap & Component

    ในบทความนี้เรานำ Bootstrap มาใช้ในโปรเจค ซึ่ง Bootstrap เป็น CSS Framework ที่ใช้ในการตกแต่งเว็บให้มีความสวยงามและเป็นระเบียบมากยิ่งขึ้น ก่อนอื่นเราต้องติดตั้ง Bootstrap โดยใช้คำสั่ง

    เปิดไฟล์ angular.json และเพิ่มโค้ดในส่วน styles

    หลังจากนั้นลองรันแอพ จะเห็นได้ว่า font ของตัวอักษรเปลี่ยนแปลงไป หากต้องการดูว่า Bootstrap 3 ทำอะไรได้บ้าง สามารถดูได้ที่ https://getbootstrap.com/docs/3.3/ ต่อไปเราจะมาดูกันว่าหลังจากรันแอพแล้วเกิดอะไรขึ้นบ้าง มีการโหลดไฟล์ใดบ้าง

    ไฟล์แรกที่จะถูกเรียกขึ้นมาก็คือ main.ts

    ในบรรทัดที่ 11 จะมีการเรียกต่อไปยังโมดูลที่ชื่อ AppModule โดยดูจากการ import ด้านบนแล้วโมดูลนี้ก็คือไฟล์ app/app.module ซึ่งอยู่ที่ src > app > app.module.ts หากเราเข้ามาดูในไฟล์นี้จะพบโค้ดตามรูปข้างล่าง

    จากรูปในบรรทัดที่15 เป็นการบอกให้เริ่มจากการโหลดคอมโพเนนท์ที่ชื่อว่า AppComponent และเราก็ดูที่ import เหมือนเดิมว่าไฟล์นี้อยู่ที่ไหน และทำการเปิดไฟล์ app.component.ts ขึ้นมา

    ในส่วนของ @Component ประกอบด้วย properties :

    1. selector: ‘app-root’ หากไปดูที่ไฟล์ index.html เราจะพบ HTML Tag ที่ชื่อว่า app-root ซึ่งเป็นการกำหนดว่าสิ่งที่เกิดขึ้นในคอมโพเนนท์นี้จะไปใส่ไว้ในไหน โดยที่ template ในข้อ2 จะถูกเอามาใส่ใน tag app-root โดยอัตโนมัติ
    2. templateUrl: เพื่อบอกว่าเราจะเอา template มาจากไฟล์ไหน ในที่นี้คือ app.component.html
    3. styleUrls: เป็นส่วนที่ใช้ตกแต่ง โดยไฟล์ในข้อ2 จะใช้ style ที่อยู่ในไฟล์ที่กำหนด

    ทดลองเพิ่มโค้ดในไฟล์ app.component.css และ index.html ตามลำดับ

    และลองดูผลลัพธ์ที่เกิดขึ้น จะเห็นว่า “Hello… World” เป็นสีดำ แต่ “Welcome to My App 22-5-2018” เป็นสีแดง เป็นเพราะว่าเราตั้งค่าไว้ว่าเฉพาะคอมโพเนนท์นี้ให้ใช้ไฟล์ตกแต่งชื่อ app.component.css ทำให้ส่วนอื่นที่ไม่ได้อยู่ใน sector ที่กำหนดไม่ได้ใช้การตกแต่งนี้

     

     

  • ระวังการใช้งานบนเครื่องที่ยังเป็น Windows XP จะถูกติดตั้ง Key Logger ระบาดในมหาวิทยาลัย

    ช่วง 2-3 วันนี้ ระบบ PSU Webmail ตรวจพบว่า มีบัญชีผู้ใช้อย่างน้อย 3 ราย ถูกใช้งานจากสิงคโปร์ และตุรกี  แล้วส่ง email ออกไปเป็นจำนวนมาก ระบบตรวจจับได้ จึงทำการ Force Reset Password ของระบบ PSU Email บัญชีผู้ใช้ดังกล่าวอัตโนมัติ

    IP ที่ใช้งาน PSU Webmail ดังภาพด้านบน ตรวจสอบแล้ว พบว่า มาจาก

    • 202.189.89.116 จากเครือข่ายของ Twentieth Century Fox ที่ ตุรกี
    • 206.189.89.212 จากเครือข่ายของ Twentieth Century Fox ที่ สิงคโปร์
    • 128.199.202.189 จากเครือข่ายของ DigitalOcean ที่สิงคโปร์

    ส่งอีเมลจำนวน 4 ฉบับ ถึง 800 emails ภายใน 1 นาที ดังภาพ

    ในการตรวจสอบเชิงลึกต่อไป พบว่า IP  206.189.89.116 ยังพยายาม Login ไปยังบัญชีผู้ใช้ 2 ใน 3 ข้างต้นอีกด้วย จึงสันนิษฐาน ว่า น่าจะเป็นคนร้ายกลุ่มเดียวกัน เพียงแต่สลับแหล่งที่เข้าใช้ PSU Webmail ไปมา

    จากการลงพื้นที่ ไปดูที่เครื่องผู้ใช้ พบว่า มีพฤติกรรมที่เหมือนกัน คือ

    1. ยืนยันว่า ไม่เคยคลิกเปิด email ที่ต้องสงสัยจริง ๆ (เอ่อ ใครก็จะพูดเช่นนั้น เอาว่าไม่มีหลักฐาน ก็ไม่สามารถสรุปได้ว่าไม่จริง)
    2. *** มีการใช้คอมพิวเตอร์ส่วนกลาง *** ซึ่งหนึ่งในนั้น จะเป็น Windows XP และมีโปรแกรมเถื่อนเป็นจำนวนมาก

    จึงขอตั้งข้อสังเกตว่า ถ้าผู้ใช้ยืนยันว่า ไม่ได้คลิก email หลอกลวงแน่ ๆ และยืนยันว่า ไม่ถูกหลอกแน่ ๆ เป็นจริง ก็น่าจะเป็นเพราะพฤติกรรมการใช้คอมพิวเตอร์ส่วนกลาง ที่เป็น Windows XP ซึ่งเป็นไปได้อีกว่า คงจะมี Key Logger หรือ โปรแกรมดักจับการพิมพ์บน Keyboard แล้วส่งไปให้คนร้าย

     

    ในภาพใหญ่ของมหาวิทยาลัยสงขลานครินทร์ ยังมีเครื่องรุ่นเก่าที่ยังใช้ Windows XP อยู่ แถมยังใช้โปรแกรมเถื่อนที่อาจจะติดมาจากร้าน หรือ คนในออฟฟิซเองเอามาติดตั้งอยู่ หากสามารถ Enforce ให้เปลี่ยนได้ น่าจะลดปัญหาพวกนี้ได้

     

    กำลังหาหลักฐานที่หนักแน่นพอ เพื่อนำเสนอผู้ใหญ่ต่อไปครับ

     

  • ปัญหาในการลืมรหัสผ่านจะหมดไปด้วย … LastPass

    blog ที่ 3 สำหรับปีนี้ ทางเราขอนำเสนอ แทน แท่น แท๊นนนน Extension ที่ชื่อว่า “LastPass” นั่นเอง

    ส่วนเสริมตัวนี้จะช่วยให้ปัญหาการลืม Password ที่เข้าเว็บต่างๆ ทั้งร้อยแปดพันเก้า ที่เราเข้าใช้งานหมดไป
    ในปัจจุบันนี้ต้องยอมรับอย่างนึงว่า เว็บไซต์ที่เราใช้บริการทั้งหลายทั้งมวลนั้นมีมากมายหลากหลายเหลือเกิน

    ทั้งงานเอย social เอย หรือแม้แต่จะเป็น ฐานข้อมูลในการเก็บข้อมูลต่างๆ ทั้งหมดเหล่านี้ล้วนจะต้องมีการสร้าง

    account เพื่อเข้าไปใช้งานทั้งสิ้น และสิ่งนึงที่เราจะเจอบ่อยๆ ก็คือ website นี้ รหัสผ่านอะไรแล้วน้ออออ !! 55+

    อะ ไม่พูดพร่ำทำเพลงมากมาย ไปดูเจ้าตัว Extension “LastPass” กันเถิดดดด …..

    1. ติดตั้ง Extension ผ่านลิงค์นี้ได้เลย คลิก  จากนั้นเริ่มต้นสร้างบัญชี เพื่อเข้าใช้งาน

    ปล…จากนั้นต่อไปในอนาคตเราก็จะปล่อยให้ LastPass ช่วยเราจำในส่วนที่เหลืออื่นๆไง

     

     

     

     

     

     

     

     

     

     

     

     

    2.โดยให้ตั้งรหัสผ่านตามเงื่อนไขที่กำหนด (อันนี้เพื่อความปลอดภัยนั่นแหละ)

     

     

     

     

     

     

     

     

     

     

    3. เมื่อเราตั้งรหัสผ่านตรงตามเงื่อนความปลอดภัยที่กำหนด ก็จะพบกับหน้าจอตามรูป จากนั้น คลิก “NEXT” โลดดด

     

     

     

     

     

     

     

     

     

     

    4. เมื่อดำเนินการครบตามขั้นตอนแล้ว ก็จะพบกับหน้าตาเจ้า LastPass เรียบๆ ดูแล้วใช้งานง่าย ไม่ยากๆ

     

     

     

     

     

     

     

     

     

     

    5. คราวนี้เราก็มาจัดการเพิ่มข้อมูล ที่เราต้องการให้เจ้า LastPass ช่วยเราจำกันเถอะ โดยสามารถคลิกเลือก

    ในส่วนเมนูด้านซ้ายของหน้าจอ หรือจะเลือกจาก Icon ด้านล่างมุมขวาของหน้าจอก็ได้เช่นเดียวกัน

     

     

     

     

     

     

     

     

     

     

    6. ตัวอย่างเช่น สร้างข้อมูลรายละเอียดของเว็บที่เราเข้าใช้งานเป็นประจำ Gmail เป็นต้น จากขั้นตอนที่ 5

    เมื่อคลิก เพิ่มเว็บไซต์ ก็จะพบกับหน้าจอประมาณนี้นะ เมื่อใส่รายละเอียดครบถ้วนแล้ว ก็กด “บันทึก” ได้เลย

     

     

     

     

     

     

     

     

     

     

    7.  จากนั้นระบบก็จะบันทึกข้อมูลเว็บไซต์ Gmail ของเราเอาไว้ เราก็ทำแบบนี้ไปเรื่อยๆ จนครบทุกเว็บที่เราอยาก

    ให้เจ้า LastPass ช่วยจำ เพียงเท่านี้ก็เรียบร้อย ปัญหาการลืมรหัสผ่านเข้าเว็บต่างๆ ที่มีมากมายก่ายกองของเรา

    ก็จะหมดไป

    ** ปล… แต่ต้องไม่ลืมรหัสผ่านที่ใช้เข้า LastPass ตัวนี้น๊าาาา 555+

     

     

     

     

     

     

     

     

     

     

    8. สำหรับความปลอดภัยอื่นๆ เราก็สามารถเข้าไปดู ไปตั้งค่าได้ โดยเลือกผ่านเมนู การตั้งค่าบัญชี ซึ่งก็จะมีทั้งแบบ

    ฟรี และหากต้องการที่ปลอดภัยมากขึ้นไปอีกระดับก็ต้องเป็นแบบ premium กันแหละ แนะนำว่าลองเล่น ลองคลิกๆ

    ศึกษาเพิ่มเติมกันได้นะ

     

     

     

     

     

     

     

     

     

     

     

    สุดท้ายทางผู้เขียนหวังว่า อย่างน้อย ๆ เจ้าตัว Extension LastPass ตัวนี้ จะเป็นผู้ช่วยที่มีประโยชน์อีกตัวนึงสำหรับ

    ผู้อ่านทุกคน อย่างน้อยๆ หากจดในกระดาษแล้วหาย ก็เปลี่ยนมาให้ LastPass ช่วยจำกันเถิด แฮ่ …..

     

    ขอบคุณ แหล่งข้อมูลอ้างอิง : https://www.lastpass.com/how-lastpass-works