ค้นหาว่าเว็บโดน Hack ได้ยังไง ผ่าน Log file

ช่วงที่ผ่านมาเจอปัญหาการ Hack เว็บที่ตัวเองทำอยู่ แบบว่าป้องกันยังไงก็แล้ว ก็ยังโดนเจาะเข้ามาเขียนไฟล์ index ได้อยู่ดี

จนเมื่อวานลองเข้าไปเปิดดู Log file บน server ก็เลยเจอต้นเหตุ

กรณีที่ผมเจอคือ Hacker ใช้ช่องโหว่ในการอัปโหลดไฟล์ ทำการอัปโหลดไฟล์ .php เข้ามา แล้วก็ดัน execute ได้ซะด้วย ทำให้สามารถเข้ามาแก้ไขไฟล์ต่างๆ ในหน้าเว็บได้

ผมไล่ดูตั้งแต่อาทิตย์ก่อนที่รู้ว่าจะโดน hack เลยเห็นว่ามีการส่ง POST เข้ามาที่ไฟล์ๆ นึง จากนั้น IP เดียวกันนี้ก็เรียกใช้ไฟล์ที่เป็น .php ที่ไม่น่าจะอยู่ตรงนั้น แล้วก็มีการส่งค่าต่างๆ เข้ามาที่ไฟล์นี้หลายๆ ครั้ง จนผมมั่นใจว่าใช่แน่นอน ก็เลยทำการปิดการ execute ของ PHP ที่ directory อันนี้ไป

ตอนนี้ก็เหมือนจะหยุดการ hack ลงได้ละ แต่ก็ยังต้องตามดูกันต่อไปครับ แต่ทางที่ดีที่สุดคือ update software ทั้งหลายที่อยู่ในระบบซะ

ใช้ .htaccess ป้องกันไม่ให้ PHP ทำงานในบาง directory

เจอ hack เว็บไซต์มาครับ หาวิธีป้องกันหลายแบบมาก แต่ก็ยังโดนเข้ามาวางไฟล์ได้อยู่ดี

วิธีการแก้ไขล่าสุดเลยหาวิธีป้องกันไม่ให้ไฟล์ PHP ทำงานได้ เพราะเดาว่ามี script ในการอัปโหลดไฟล์ ที่ยอมให้อัปโหลดไฟล์ PHP แล้วก็ทำให้มันทำงานได้ด้วย

วิธีแก้คือ
สร้างไฟล์ .htaccess ขึ้นมา
แล้วก็เอา code แบบนี้ไปใส่ไว้ครับ

php_flag engine off

มันจะทำให้ไฟล์ PHP ที่อยู่ใน directory เดียวกับไฟล์ .htaccess ตัวนี้ มันจะแสดงเป็นเหมือน text file ธรรมดาเลยครับ

วิธีแก้ iOS Safari Javascript New Date แล้วมีค่าเป็น NaN

วันนี้เจอปัญหาที่แปลกประหลาดของ iOS Safari ที่ไม่สามารถ new Date() ออกมาได้ มันกลายเป็นค่า NaN (Not a number) ซะอย่างงั้น

ลองค้นดูก็เจอว่ามันเป็นเฉพาะ iOS Safari จริงๆ เจอวิธีแก้อยู่หลายอัน บางคนก็บอกให้ไปใช้ DateJS ช่วยเอาเลย แต่มันก็ดูยุ่งยากไปหน่อย

เลยลองหาดูมีวิธีแก้ง่ายๆ อยู่เหมือนกัน จากเว็บนี้
https://coderwall.com/p/gvwb9g/fix-invalid-date-on-safari-ie

//  Safari & IE browsers do not support the date format “yyyy-mm-dd”
const fixDateForAllBrowsers = dateString => dateString.replace(/-/g, '/');

ก็เออแก้ได้จริงๆ ด้วยนะ คือเจ้า iOS Safari มันไม่ยอมให้เราใช้การ New Date เป็น YYYY-MM-DD เท่านั้นแหละ ถ้าเปลี่ยนเป็น YYYY/MM/DD มันก็จะใช้ได้ละ

วิธีแก้ WordPress กด Update แล้วหมุนไม่หยุด

อาทิตย์ก่อนเจอปัญหาว่าแก้ไข Custom Post Type กด Update แล้วอัปเดตไม่ได้ หมุนติ้วๆๆ

พยายามอัปเดททุกอย่างก็แล้วก็ไม่หาย แต่สุดท้ายลืมไปตัวนึงคือเจ้า Visual Composer ที่แถมมากับตัว Theme ที่ไม่ได้อัปเดต พอไปโหลดตัวล่าสุดมาลงก็หายเลย :D

ใครที่เจอปัญหานี้ก็ลองดูนะครับว่าได้อัปเดต Plugin ต่างๆ ครบหมดแล้วหรือยัง

วิธีแก้ Plugin WordPress Advanced Custom Fields ไม่ยอมเซฟและแสดงผลไม่ได้

ทำเว็บให้ลูกค้าแล้วก็ใช้ Plugin ที่ชื่อ Advanced Custom Fields(ACF) มาช่วยในการเพิ่ม field เก็บข้อมูลที่ลูกค้าต้องการ เพื่อให้แก้ไขได้ง่ายๆ

ปกติก็ใช้งานได้ดีไม่เคยเจอปัญหาอะไร แต่ Project นี้มันมีต้องทำแบบสองภาษาแล้วก็มี WooCommerce มาผสมด้วยอีก เลยตีกันมั่วเลย

ปัญหาที่เจอล่าสุดคือเราใช้ Field แบบ Repeater แล้วตอนแรกมันก็ดึงข้อมูลมาแสดงได้ปกติดี แต่อยู่ๆ มันก็ไม่แสดงผลซะงั้น งมหาอยู่หลายวันเลย เพราะไม่เห็นมีใครเจอปัญหาแบบนี้เท่าไหร่ ปัญหาที่เจอในกรณีนี้คือเจ้า field ต่างๆ ที่เราเพิ่มมันจะไม่ยอมเซฟข้อมูลด้วย

ทีแรกนึกว่าเป็นที่ Code ที่เราเขียน ซึ่งจริงๆ เราก็เขียนเหมือนเดิมมันไม่น่าจะทำให้ไม่แสดงผลแบบนี้ แล้วก็คิดว่าอาจจะเป็นที่ Plugin หรือ Theme ก็อัปเดตทุกตัวหมดแล้ว แต่ปัญหาก็ยังไม่หาย ลองย้อนเวอร์ชั่นของ Advanced Custom Fields ดูก็ไม่หาย นั่งกลุ้มอยู่นาน

จนในที่สุดก็ใช้วิธี duplicate fields ที่มีปัญหาออกมา แล้วก็ลบ fields อันเก่าออก แล้วก็เข้าไปที่หน้านั้นเพื่อเซฟอีกรอบนึง ก็เรียบร้อยหาย...

วิธีใส่ Lightbox (FancyBox) ลงไปใน WordPress Theme

ช่วงนี้มีงานที่ต้องใช้ Lightbox บนหน้าเว็บไซต์ แต่เราต้องการการ customize พิเศษอยู่สักหน่อย ก็เลยต้องหาวิธีที่จะเขียนมันใส่ไว้ใน Theme ของ WordPress ที่เราทำ เลยเจอ tutorial จากเว็บ tutsplus.com เจ้าประจำ สอนละเอียดยิบ สามารถทำตามได้เลย แจ่มจริงๆ

http://code.tutsplus.com/tutorials/add-a-responsive-lightbox-to-your-wordpress-theme--wp-28100

เพิ่ม jQuery ลงใน Wordpress theme

เวลาทำเว็บที่ใช้ Wordpress ปกติใช้แต่ Theme สำเร็จรูป และก็ไม่ค่อยได้มีเหตุให้ต้องใช้ jQuery อะไรซักเท่าไหร่ แต่วันนี้ต้องแก้ปัญหาที่ใช้ CSS ไม่สำเร็จ ก็เลยต้องเอา jQuery มาใช้ใน Theme

แต่พอลองใส่ code jQuery เข้าไปมันดันไม่ทำงาน ลอง inspect ดูก็พบว่ามันไม่มีการเรียก library ของ jQuery ขึ้นมาน่ะเอง มันก็เลยไม่รู้จัก

ลองหาวิธีแก้ว่าจะเรียกยังไงถึงจะดี ก็เจอกระทู้นี้

https://wordpress.org/support/topic/include-jquery-in-headerphp-please-help

แล้วก็เลยกลับไปใส่เพิ่มบ้างลงใน header.php ซะเลย

<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>

จากนั้นก็เขียน jQuery ใส่เข้าไปโดยเปลี่ยนการใช้ $ ไปเป็น jQuery แทนทั้งหมดเช่น

จากเดิม

$(function(){
     $("#header").hide();
});

ก็เป็น

jQuery(function(){
    jQuery("#header").hide();
});

แต่จริงๆ เราสามารถใช้ $ เหมือนเดิมได้ด้วย แต่ให้ใช้แบบนี้

jQuery(document).ready(function($) {
 //code.
});

ทำภาพใส่ Cover สำหรับ Facebook ให้ต่อกันเนียนๆ ไม่ยาก

เห็นเค้าเล่นกันมาพักนึงแล้วที่ทำให้ภาพ Profile ของเรากับภาพ cover ด้านหลังมันดูต่อเนื่องกันไป เลยลองทำเล่นเอง ก็พบกว่ามีความยากอยู่หน่อยที่จะทำให้รอยต่อมันพอดีเป๊ะๆ

แต่วันนี้ลองค้นดู ก็เจอเว็บที่ช่วยทำให้เราได้เลย สามารถจัดวางรูปใส่ตัวหนังสือลงไปเพิ่มก็ยังได้

http://www.easycovermaker.com

หน้าตาเว็บจะเป็นแบบนี้ครับ (ในรูปนี้ผมลองใส่รูปลงไปแล้ว)

เราสามารถกดที่ปุ่ม + Add Image เพื่ออัพโหลดรูปที่เราต้องการทำเข้าไปได้เลยครับ โดยเค้าจะทำไว้เป็น Layer ซ้อนๆ กัน เราสามารถที่จะขยายหรือหมุนรูปได้ด้วย เสร็จแล้วก็กดปุ่มสีดำด้านข้าง โหลดออกมาเป็นไฟล์ zip แล้วก็แตกไฟล์เอาไฟล์สองไฟล์ในนั้นไปเซ็ตเป็น Profile และ Cover ได้เลยครับ

สร้าง template สำหรับ NextGen Gallery (WordPress)

ปกติ NextGen Gallery plugin ของ WordPress จะไม่แสดงข้อมูลใน description ออกมา เราก็เลยไปหาวิธี ซึ่งก่อนหน้านี้เราไปแก้ในไฟล์ gallery.php ซึ่งอยู่ในตัว plugin เลย พอมันอัพเดทเวอร์ชั่นไฟล์นี้ก็ถูกเขียนทับทำให้มันหายไป

ก็เลยลองหาวิธีใหม่ ก็เลยเพิ่งรู้ว่ามันมีวิธีสร้าง template ไว้ใช้เองด้วย
http://wordpress.org/support/topic/plugin-nextgen-gallery-missing-description-under-thumbnails

ก็เลยลองทำตามดูก็เลยพบว่าเราสามารถเก็บ template ที่ทำไว้แยกออกจากตัว plugin ได้ ทำให้ไม่โดนทับไฟล์เวลาที่ตัว plugin มีการอัพเดทขึ้นมา

แต่เราก็เจอปัญหาแปลกๆ ขึ้น เมื่อเราพยายามใส่ description ลงไปบน title ของ link เท่าไหร่ มันก็ไม่เปลี่ยนซักที แต่ถ้าใส่ tag ที่อื่นมันก็ทำงานได้ปกติ ลองหาอยู่นาน จนลองเปิด source code ดู ก็เลยเห็นว่ามันมีการเปลี่ยนแปลงในตัว title ไปแล้ว แต่เจ้า FancyBox ที่เอาใช้ มันไปทำการดึง title จากในรูปมาใส่ให้แทนมันก็เลยไม่มีการเปลี่ยนซักที สุดท้ายก็เลยต้องไปใส่ตรง title ของรูปแทน แล้วก็ใช้งานได้ดีเลย

มี trick เล็กๆ สำหรับการใส่ html tag ลงไปด้วยบน title ด้วยการแปลงตัวอักษรให้เป็น html entity ซะก่อน เช่น < ก็เป็น &lt; และ > ก็เป็น &gt; ก็จะสามารถใช้ tag html ใส่ลงไปใน title ของรูปได้ แล้วแสดงผลออกมาบน title ของรูปได้ละ

ทำเว็บให้ใช้งานแบบ Offline ได้

iPhone offline webapps

เหมาะที่จะใช้ทำพวก Web Application ง่ายๆ ที่ใช้ Javascript เป็นหลัก 

Redirect ไป URL ใหม่ด้วย .htaccess

เพิ่งลองเช็คเว็บที่ทำไว้เล่นๆ ว่าเข้าผ่าน www. แล้วเจออะไร ปรากฏว่าเจอหน้าตั้งต้นของเว็บ แต่จริงๆ ต้องการให้ไปที่ blog. มากกว่าเพราะตอนนี้เน้นเขียนข้อมูลไปที่ blog

เมื่อก่อนใช้วิธีการ refresh หน้าจากหน้า www. ไปที่ blog. แต่วิธีนี้ไม่เนียน คือต้องมีการ refresh หน้าแบบเห็นๆ และเสียเวลา เลยไปลองหาวิธีใหม่(แต่เก่าแล้ว) ก็คือใช้ .htaccess ตามนี้ครับ


Options +FollowSymLinks
RewriteEngine on
RewriteRule (.*) http://blog.yourdomain.com/$1 [R=301,L]


พอเขียนแบบนี้ก็จะสามารถทำให้หน้าเว็บเด้งไปเองอัตโนมัติ แถมเวลาเข้า www. แล้วมี /xxx.html ต่อท้ายมันก็จะเด้งไปที่ blog. พร้อมมี /xxx.html ต่อท้ายด้วยเลย

เทคนิคในการทำเว็บให้เข้าถึงได้สะดวก (Drupal slide)

จริงๆ มันเป็นคำแนะนำในการออกแบบ Theme สำหรับ Drupal แต่ก็เอามาปรับใช้กับการทำเว็บทั่วไปได้

Designing Accessible Drupal Themes

View more presentations from Heather Wozniak

class ที่ใส่มาทีหลังจะถูกเมิน (CSS)

วันนี้หาทางแก้ปัญหาเรื่องปุ่ม Add to Cart ของเว็บที่ทำอยู่ มันไม่ยอมเช็คก่อนว่าสินค้านั้นมันมี option อะไรหรือเปล่า ซึ่งก่อนนี้มันก็ใช้งานได้ปกติดี

เลยมานั่งงมหา คิดว่าปัญหาน่าจะเกิดจาก javascript ที่เข้าไปเช็ค ซึ่งเว็บนี้ใช้ jQuery ช่วย แล้วเจ้าปุ่มนี้เราก็ไปตบแต่งเพิ่มเติมด้วยการใส่ class="red-button" ลงไป ซึ่งมันมี class อยู่แล้วอีกอันตอนท้ายของ tag ซึ่งเราคิดว่าไม่เป็นอะไร


แต่การใส่ <a href="#" class="class1" title="blablabla" class="class2"> แบบนี้ทำให้เกิดปัญหาในการค้นหาของ jQuery ได้ มันจะเจอแต่ class1 แล้วถ้าเราสั่งให้มันหา class2 มันก็จะไม่เจอไปเลย *-*


นั่งแก้อยู่นาน จนสุดท้ายก็เปลี่ยนมาเป็น <a href="#" title="blablabla" class="class2 class1"> มันก็จะทำงานได้ตามปกติแล้ว

Redirect ไปหน้าอื่นแบบไม่เปลี่ยน URL

หาวิธีเลิกใช้ index.php ไฟล์เพราะว่าเป็นที่หมายตาของ script ที่เจาะเข้ามาฝัง iframe ในหน้าเว็บ ก็เลยลองใช้ Mod Rewrite ลงในไฟล์ .htaccess ดูซะเลย

สอนอยู่ที่เว็บนี้ http://www.yourhtmlsource.com/sitemanagement/urlrewriting.html

เราก็ใช้อยู่แค่นี้แหละ

RewriteEngine on
RewriteRule ^old\.html$ new.html

แต่ถ้าเขียนแบบมี [R] อยู่ข้างหลังแบบนี้จะทำให้ URL บน address bar มีการเปลี่ยนแปลงไป

RewriteRule ^old\.html$ new.html [R]

ง่ายดีเหมือนกันแฮะ

เขียน jQuery บน Wordpress แล้วไม่ยอมทำงาน

วันนี้ต้องปรับหน้าเว็บ Wordpress ของลูกค้าให้แสดงหน้าเป็น step เราก็พยายามทำตามที่ดูใน podcast ของ http://css-tricks.com แต่ทีนี้เขียน jQuery ใส่ลงไปยังไงมันก็ไม่ยอมทำงาน เราก็เช็คดูทุกตัวอักษรแล้วนะว่าเราเขียนไม่ผิด แต่มันไม่ทำงานเลย

พยายามหาอ่านเบสิค jQuery ก็ไม่เจอ จนต้องไปหาว่ามันเป็นเพราะ Wordpress ด้วยหรือเปล่า ก็เลยเจออันนี้

Apparently you are using both jQuery and Mootools and both of them do use $ as an alias to a core function. Probably the $ function which is generating this error is the Mootools function. I'd suggest you to try to write your jQuery code using jQuery instead of $ so you can confirm my point is right or not.

จาก http://stackoverflow.com/questions/5706093/jquery-error-uncaught-typeerror-object-htmldocument-has-no-method-ready

ก็เลยไปแก้จาก $("#XXX").hide(); เป็น jQuery("#XXX").hide(); ก็ใช้งานได้ทันทีเลย ^ ^

การใส่ issuu ลงในหน้า Facebook page

วันนี้เว็บที่ผมช่วยดูแลอยู่ Amthai.co.uk เค้าอยากให้ช่วยเข้าไปเพิ่มส่วนที่ทำให้หน้า Page บน Facebook สามารถแสดงหนังสือพิมพ์ฉบับที่อ่านบนเว็บ issuu ลงไปได้ พี่เค้าก็ส่งตัวอย่างหน้า Page ที่อยากได้มาให้ดู เป็นอันนี้

http://www.facebook.com/pages/iASiA-Magazine/85444033316

เราก็เข้าไปดูแล้วมันก็เป็นแบบแสดงรูปหน้าปกแล้วกดเข้าไปก็จะไปเจอหน้าของ issuu ที่เหมือนที่ Embed มาใส่ลงไปในเว็บทั่วไป

เราก็ทำการ sign in เข้า Facebook แล้วก็เข้าไปหา App ตัวที่จะใส่ แต่ก็เดาไปเรื่อยเลย ไม่เจอ สุดท้ายนึกได้ว่าน่าจะลองหาจาก Google ดู ถึงวิธีการใส่ issuu ลงบนหน้า Page ของ Facebook ก็เลยไปเจออันนี้ http://blog.issuu.com/?p=1586  ซึ่งก็มาจากหน้าเว็บของ issuu เองน่ะแหละ

แล้วเราก็เข้าไปหาวิธีใส่เจ้า Static FBML ว่าเค้าไปเพิ่มกันตรงไหน มันก็ไม่เห็นมีเหมือนที่เค้าบอกในเว็บนี้เลย แล้วเราก็นึกได้ว่าเห็น คุณ Samarn เค้าสอนๆ เอาไว้ ก็เลยไปหาดูที่ http://samarn.multiply.com ซึ่งก็ลิงก์ต่อไปยังหน้า fanpage ของเค้าคือที่นี่
http://www.facebook.com/samarnfan ในนี้ก็มีสอนหลากหลายเลยครับ ก็เลยได้รู้ว่าวิธีการใส่ Static FBML เค้าทำยังไง แล้วก็ไปเจอวิธีใส่ Static FBML ให้ได้มากกว่า 10 หน้า https://travel-is.com/samarn/facebook/fanpage-fbml/index.html ซึ่งก็ทำให้ติดตั้งเจ้า Static FBML สำเร็จ แล้วก็เข้าไปทำการพิมพ์ค่าตามในเว็บ issuu บอก ก็เสร็จเรียบร้อยละครับ