Lab Vibe 4 — เนื้อหาเป็นของจริง: rich text + รูปปก

Lab นี้คือวันตรวจรับ ไม่ใช่วันสร้าง

สไลด์หน้า 14 ให้ Lab นี้เป็น "เขียน prompt ให้ AI ทำทั้งบล็อก แล้วตรวจ" · เว็บนี้เลือกให้คุณทำเองเป็นก่อน — ทุกบรรทัดของเป้าหมายและข้อกำหนดในหน้านั้นคุณทำไปแล้วในบท 137–140 · ที่เหลือคือส่วนที่สำคัญที่สุดของการทำงานกับ AI: ตรวจรับให้เป็น

Lab นี้มี 5 ขั้น — เหมือนบท 135 ทุกขั้น เปลี่ยนแค่ของที่ตรวจ:

ขั้น 1 — ใบสั่งงาน prompts/04-content.md: ทุกบรรทัดมาจากบทไหน

ไฟล์นี้คือใบสั่งงานที่จะส่งให้ AI ทำบล็อก D ทั้งหมดในครั้งเดียว · สี่ส่วนเหมือนไฟล์ 01–03: เป้าหมาย · ข้อกำหนด · ห้าม · เกณฑ์ตรวจรับ

ตอนนี้ ls prompts ควรเห็น 4 ไฟล์ (00-context.md · 01-views.md · 02-styling.md · 03-hotwire.md) · สร้างไฟล์ prompts/04-content.md แล้วพิมพ์ตามนี้ (ทั้งไฟล์ — ก็อปจากสไลด์หน้า 14 แล้วเพิ่มบรรทัดในวงเล็บหนึ่งบรรทัด ใต้เรื่องย้ายข้อมูล):

## เป้าหมาย

เปลี่ยน description เป็น rich text แก้ไขได้
เพิ่มรูปปกให้โพสต์ เก็บใน MinIO และโชว์รูปย่อในหน้า index

## ข้อกำหนด

- ใช้ Action Text สำหรับเนื้อหา (has_rich_text :body)
- ย้ายข้อมูลเดิมจาก description มา body
  ใช้ท่า expand-contract ไม่ลบคอลัมน์เก่าในรอบนี้
  (ย้ายด้วย rake task ที่รันซ้ำได้ ไม่ใช่ใน migration · escape ข้อความเดิมก่อนเป็น HTML)
- รูปปกใช้ Active Storage -> service minio
- เปิด direct_upload: true
- validate ชนิดไฟล์ (png/jpeg/webp) และขนาด <= 5MB
- index ใช้ variant resize_to_limit [400,300]
- controller ต้องมี with_attached_cover
  และ with_rich_text_body
- เพิ่มคอลัมน์ plain_text สำหรับค้นหาภายหลัง

## ห้าม

- raw หรือ html_safe กับ body ที่ไหนก็ตาม
- ตั้ง bucket เป็น public
- เชื่อ content_type ที่ client ส่งมาอย่างเดียว
- เขียน access key ลง storage.yml ตรง ๆ
- ลบคอลัมน์ description ในรอบนี้

## เกณฑ์ตรวจรับ

- [ ] พิมพ์ตัวหนา ใส่ลิงก์ ในเนื้อหาได้
- [ ] อัปรูปแล้วเปิด MinIO console เห็นไฟล์จริง
- [ ] ก๊อป URL รูปไปเปิด incognito -> ใช้ได้ แล้วรอหมดอายุ
- [ ] Network tab: ไฟล์ขึ้นตรงไป :9000 ไม่ผ่าน :3000
- [ ] log หน้า index ไม่เกิน 6 query
- [ ] อัปไฟล์ .txt ที่เปลี่ยนนามสกุลเป็น .png -> ต้องถูกปฏิเสธ
- [ ] ข้อมูลเดิม 30 โพสต์ยังอ่านได้ครบ

ทวนสัญลักษณ์: ## = หัวข้อ · - [ ] = ช่องติ๊กที่ยังไม่ติ๊ก · -> = ลูกศรธรรมดาที่สไลด์ใช้ ไม่ใช่คำสั่งอะไร · ไฟล์นี้ยาว 36 บรรทัดพอดี (นับด้วย wc -l prompts/04-content.md) · ทุกบรรทัดของข้อกำหนดกับข้อห้ามมาจากเรื่องที่คุณเจอมาแล้ว:

ขั้น 2 — ตรวจรับ 7 ข้อของสไลด์หน้า 14 ด้วยของจริง

เตรียมโต๊ะตรวจ

1. terminal แท็บที่ 1: bin/dev · แท็บที่ 2 ไว้พิมพ์คำสั่ง
2. ทำ "ไฟล์ปลอม" สำหรับข้อ 6 — ข้อความธรรมดาที่ตั้งชื่อลงท้าย .png (เก็บไว้ใน tmp/ ของโปรเจกต์ git จะไม่เห็น):

   echo "hello this is just text, not an image" > tmp/fake.png
   ls -l tmp/fake.png

   > = เขียนผลของ echo ลงไฟล์ · ไฟล์ที่ได้ขนาด 38 bytes (37 ตัวอักษร + ขึ้นบรรทัดใหม่ 1)
3. เตรียมรูปจริงไว้หนึ่งรูป (jpg/png ไม่เกิน 5 MB) · ของผมเป็น cover.jpg 1600×1000 ขนาด 36,582 bytes
4. เปิด Chrome ที่ http://localhost:3000/posts/new แล้วเปิด DevTools (Mac Cmd+Option+I · Windows F12) → แท็บ Network · ติ๊ก Preserve log (ไม่ให้รายการหายตอนเปลี่ยนหน้า) · Network tab คือสมุดจดว่าเบราว์เซอร์คุยกับใครบ้าง ทุกคำขอ ทุกปลายทาง
5. เปิดอีกแท็บที่ http://localhost:9001 (MinIO console) → Username minioadmin · Password minioadmin → Login (ค่าทดลองจาก compose.yaml · บท 138)

ตารางตรวจรับ (ผลจริงที่ผมได้ บนโค้ดสถานะเดียวกับของคุณ · DB ใหม่จาก seeds)

ข้อ 3 — URL รูปมีสองตัว ก๊อปผิดตัวแล้ว "ผ่านแบบหลอก ๆ"

ทวนบท 139: รูปในหน้าเว็บไม่ได้ชี้ไปที่ MinIO ตรง ๆ · src ของ <img> คือ URL ของ Rails · พอเบราว์เซอร์ขอ Rails ตอบ 302 (ไปที่อื่น) พร้อม URL ของ MinIO ที่เพิ่งเซ็นสด ๆ · ดูด้วย curl -I (ขอแค่หัวคำตอบ ไม่เอาเนื้อ) กับ src ของรูปในหน้า /posts/31 (ผลจริง · ตัดหัวที่ไม่เกี่ยวออก):

$ curl -sI "http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MSwicHVyIjoiYmxvYl9pZCJ9fQ==--9cb571efe743a82b14364270d1427f3ec543ab59/cover.jpg"
HTTP/1.1 302 Found
date: Tue, 10 Nov 2026 03:22:28 GMT
location: http://localhost:9000/wongnok-dev/fe20nsqraac0pyfnxqmith9brend?response-content-disposition=inline%3B%20filename%3D%22cover.jpg%22%3B%20filename%2A%3DUTF-8%27%27cover.jpg&response-content-type=image%2Fjpeg&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20261110%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261110T032228Z&X-Amz-Expires=300&X-Amz-SignedHeaders=host&X-Amz-Signature=75c7da6c4cc91c9980975faf6f8811b7f21dcd3e372cd2225be97594a9adf788
cache-control: max-age=300, private

• -s = เงียบ ไม่โชว์แถบความคืบหน้า · -I = ขอแค่หัว · ใส่ URL ใน "…" เพราะมีตัว = และ - ปนอยู่
• location: = "ไปเอาที่นี่" · เป็น URL ของ :9000 (MinIO) · X-Amz-Date=…T032228Z = เซ็นตอน 03:22:28 เวลาโลก (= 10:22:28 เวลาไทย) · X-Amz-Expires=300 = ใช้ได้ 300 วินาที = 5 นาที · X-Amz-Signature = ลายเซ็น
• X-Amz-Credential=minioadmin… = ชื่อกุญแจ (ไม่ใช่รหัสลับ) โผล่ใน URL ได้ · รหัสลับไม่เคยออกจาก server
• cache-control: max-age=300, private = บอกเบราว์เซอร์ว่า "จำคำตอบนี้ไว้ได้ 5 นาที" เท่าอายุลายเซ็นพอดี

วิธีก๊อปตัวที่ถูก (ตัว :9000) ในเบราว์เซอร์:

1. หน้า /posts/31 คลิกขวาที่รูปปก → Open image in new tab · แถบที่อยู่ของแท็บใหม่จะเป็น localhost:9000/wongnok-dev/… แล้ว (เบราว์เซอร์ตาม 302 ให้เอง)
2. ก๊อป URL จากแถบที่อยู่นั้น → เปิดหน้าต่าง incognito (Mac Cmd+Shift+N · Windows Ctrl+Shift+N) → วาง → เห็นรูป
3. จดเวลาไว้ · รอให้เลย 5 นาที → กด refresh ในหน้าต่าง incognito → เห็นข้อความ XML ว่าหมดอายุ

ผลจริงของผม (เปิดใน Chrome โปรไฟล์ใหม่ที่ไม่มี cookie เลย — ผลเท่ากับ incognito เพราะ URL ที่เซ็นแล้วไม่ใช้ cookie):

# 10:22:38 (10 วินาทีหลังเซ็น) — Chrome โปรไฟล์ใหม่ · cookie 0 ตัว
ได้รูป 1600×1000

# 10:28:01 (5 นาที 33 วินาทีหลังเซ็น) — URL เดิมทุกตัวอักษร · curl ได้ HTTP 403
<?xml version="1.0" encoding="UTF-8"?>
<Error><Code>AccessDenied</Code><Message>Request has expired</Message><Key>fe20nsqraac0pyfnxqmith9brend</Key><BucketName>wongnok-dev</BucketName><Resource>/wongnok-dev/fe20nsqraac0pyfnxqmith9brend</Resource><RequestId>18E6915195788FD3</RequestId><HostId>dd9025ba…</HostId></Error>

XML = ข้อความที่มีแท็กแบบ HTML แต่ใช้ส่งข้อมูล ไม่ได้ใช้ทำหน้าเว็บ — MinIO ตอบ error เป็นแบบนี้ · ใน Chrome จะขึ้นบรรทัด This XML file does not appear to have any style information associated with it. นำหน้า แล้วโชว์ XML เดียวกันแบบเป็นต้นไม้ — ไม่ต้องตกใจ แปลว่า "ไฟล์ XML ที่ไม่มีหน้าตา"

AccessDenied + Request has expired = "ลายเซ็นหมดอายุแล้ว" · ต่างจากไม่มีลายเซ็นเลย ที่ได้ Access Denied. เฉย ๆ (เดี๋ยวลองในภารกิจ) — อ่านคำใน <Message> ให้ออกว่าโดนปฏิเสธเพราะอะไร

ข้อ 4 — Network tab: ตัวไฟล์ไม่ผ่านร้านเลย

รายการใน Network ตอนกด "บันทึก" ในข้อ 1 (ผลจริงจาก Chrome · เรียงตามเวลา · ย่อ URL ยาว ๆ ด้วย … · ตัดไฟล์ CSS/JS ไอคอน และบรรทัด POST …/mini-profiler-resources/results ออก — อันหลังเป็นของตัวจับเวลา rack-mini-profiler (บท 120) ไม่เกี่ยวกับการอัปไฟล์):

POST     200  http://localhost:3000/rails/active_storage/direct_uploads
OPTIONS  204  http://localhost:9000/wongnok-dev/fe20nsqraac0pyfnxqmith9brend?X-Amz-Algorithm=…&X-Amz-Expires=300&X-Amz-SignedHeaders=content-length%3Bcontent-md5%3Bcontent-type%3Bhost&…
PUT      200  http://localhost:9000/wongnok-dev/fe20nsqraac0pyfnxqmith9brend?X-Amz-Algorithm=…&X-Amz-Expires=300&…
POST     302  http://localhost:3000/posts
GET      200  http://localhost:3000/posts/31
GET      302  http://localhost:3000/rails/active_storage/blobs/redirect/…/cover.jpg
GET      200  http://localhost:9000/wongnok-dev/fe20nsqraac0pyfnxqmith9brend?response-content-disposition=…&X-Amz-Expires=300&…

อ่านทีละบรรทัด (ภาพร้านอาหารของบท 139):

1. POST …/direct_uploads — เบราว์เซอร์ขอใบอนุญาตจากร้าน · ส่งไปแค่ชื่อไฟล์ ชนิด ขนาด และ checksum (ตัวเลขสรุปเนื้อไฟล์ ไว้เช็คว่าไฟล์ไม่เสียระหว่างทาง) — ไม่มีตัวไฟล์ (ใน log ของ bin/dev: {"filename" => "cover.jpg", "content_type" => "image/jpeg", "byte_size" => 36582, "checksum" => "aUg779RDG3S8ZQ8+Dczm1g=="})
2. OPTIONS 204 — เบราว์เซอร์ถามโกดังก่อนว่า "รับของที่ส่งมาจากเว็บ localhost:3000 ไหม" (ด่านถามสิทธิ์ข้ามเว็บ เรียกว่า CORS · บท 139) · 204 = รับ
3. PUT 200 … :9000 — ตัวไฟล์จริงวิ่งตรงเข้าโกดังบรรทัดนี้ · นี่คือบรรทัดที่เกณฑ์ข้อ 4 ต้องการเห็น
4. POST 302 …/posts — ส่งฟอร์มเข้าร้าน มีหัวข้อ + HTML ของเนื้อหา + รหัสไฟล์ (signed id) ไม่มีตัวไฟล์ · บันทึกได้ → 302 ไปหน้าบทความ
5. สองบรรทัดสุดท้าย = เปิดรูปปก: ถามร้าน (302) → ไปเอาที่โกดังด้วยบัตรผ่านใบใหม่ (200)

ข้อ 5 — log หน้า index: นับ 6 query ให้เห็นกับตา

เปิด /posts แล้วดูแท็บ bin/dev (ผลจริง · หน้าแรกมีบทความใหม่ที่มีรูป 1 ชิ้น + บทความจาก seeds 9 ชิ้น · ตัดบรรทัด ↳ และ Rendered ออก):

Started GET "/posts" for ::1 at 2026-11-10 10:20:23 +0700
Processing by PostsController#index as HTML
  Post Count (1.1ms)  SELECT COUNT(*) FROM "posts"
  Post Load (0.9ms)  SELECT "posts".* FROM "posts" ORDER BY "posts"."created_at" DESC LIMIT 10 OFFSET 0
  Category Load (7.9ms)  SELECT "categories".* FROM "categories" WHERE "categories"."id" IN (1, 5, 4, 3, 2)
  ActionText::RichText Load (1.3ms)  SELECT "action_text_rich_texts".* FROM "action_text_rich_texts" WHERE "action_text_rich_texts"."record_type" = 'Post' AND "action_text_rich_texts"."name" = 'body' AND "action_text_rich_texts"."record_id" IN (31, 30, 29, 28, 27, 26, 25, 24, 23, 22)
  ActiveStorage::Attachment Load (0.8ms)  SELECT "active_storage_attachments".* FROM "active_storage_attachments" WHERE "active_storage_attachments"."record_type" = 'Post' AND "active_storage_attachments"."name" = 'cover' AND "active_storage_attachments"."record_id" IN (31, 30, 29, 28, 27, 26, 25, 24, 23, 22)
  ActiveStorage::Blob Load (0.7ms)  SELECT "active_storage_blobs".* FROM "active_storage_blobs" WHERE "active_storage_blobs"."id" = 1
Completed 200 OK in 27ms (Views: 20.1ms | ActiveRecord: 3.5ms (6 queries, 0 cached) | GC: 7.9ms)

บรรทัดสุดท้าย Completed … = สรุปทั้ง request · Views / ActiveRecord / GC = เวลาที่ใช้แต่ละส่วน (ไม่ต้องสนตอนนี้) · ตัวที่เกณฑ์ข้อ 5 ดูคือ (6 queries, 0 cached) = ถามตู้แฟ้มไป 6 ครั้ง

สังเกต: ทั้ง 6 บรรทัดไม่มีตัวไหนเกิดซ้ำต่อบทความ (ไม่มี 10 บรรทัดหน้าตาเหมือนกัน) — นั่นคือหน้าตาของ "ไม่มี N+1"

ที่ได้ 6 ไม่ใช่ 8 ขึ้นไป เพราะบรรทัด config.active_storage.track_variants = false ใน config/application.rb (บท 140) — ปิดการจดประวัติรูปย่อลงตาราง Rails เลยไม่ต้องเบิกตารางนั้นเพิ่ม · บรรทัดนี้ไม่อยู่ในสไลด์ ถ้า AI ทำตามสไลด์อย่างเดียวจะไม่ผ่านข้อนี้

ข้อ 6 — ถูกปฏิเสธแล้ว แต่ไฟล์ปลอมยังนอนอยู่ในโกดัง

ใน log ตอนส่งไฟล์ปลอม (ผลจริง · ตัดมา) ดูสองจุด:

Started POST "/rails/active_storage/direct_uploads" for ::1 at 2026-11-10 10:20:23 +0700
  Parameters: {"blob" => {"filename" => "fake.png", "content_type" => "image/png", "byte_size" => 38, "checksum" => "i6qWQX4nSMSe4tJLtV293Q=="}, …}
…
Started POST "/posts" for ::1 at 2026-11-10 10:20:23 +0700
Completed 422 Unprocessable Content in 14ms (Views: 2.2ms | ActiveRecord: 3.4ms (3 queries, 0 cached) | GC: 0.4ms)

• "content_type" => "image/png" — เบราว์เซอร์เดาจากนามสกุล แล้วเขียนฉลากว่าเป็นรูป · ถ้าเชื่อฉลากนี้ ไฟล์ปลอมผ่าน (ตาราง "AI พลาดประจำ")
• 422 — model อ่าน 4 KB แรกของไฟล์ด้วย Marcel (เปิดกล่องดูของข้างใน · บท 140) ไม่เจอลายนิ้วมือของรูป จึงไม่รับ

แต่ก่อน 422 นั้น Network มี PUT 200 … :9000 ไปแล้ว — direct upload ส่งไฟล์เข้าโกดังก่อนส่งฟอร์ม · ใน MinIO console ผมเห็นแถว 48d6zqf2kp2sluwcfi24iiiocdo2 · Today, 10:20 · 38.0 B · และใน console ของ Rails (ผลจริง):

$ bin/rails console
Loading development environment (Rails 8.1.4)
wongnok-blog-all-in-one(dev):001> ActiveStorage::Blob.unattached.pluck(:filename, :content_type, :byte_size)
  ActiveStorage::Blob Pluck (0.5ms)  SELECT "active_storage_blobs"."filename", "active_storage_blobs"."content_type", "active_storage_blobs"."byte_size" FROM "active_storage_blobs" LEFT OUTER JOIN "active_storage_attachments" ON "active_storage_attachments"."blob_id" = "active_storage_blobs"."id" WHERE "active_storage_attachments"."id" IS NULL
=> [["fake.png", "image/png", 38]]

บรรทัดที่ขึ้นต้นด้วย ActiveStorage::Blob Pluck = SQL ที่ Rails ส่งไปถามตู้แฟ้ม · => = คำตอบ: ใบรับฝาก 1 ใบ ชื่อ fake.png ขนาด 38 bytes

unattached = ใบรับฝากที่ไม่มีป้ายผูกกับบทความไหน = ของฝากที่ไม่มีใครมารับ (ไฟล์กำพร้า · บท 140) · ตรวจรับข้อ 6 ผ่าน (ปฏิเสธจริง) แต่ขยะในโกดังเป็นงานค้าง — ต้องมีพนักงานหลังร้านมาเก็บกวาดเป็นรอบ ๆ ซึ่งคือเรื่องของบล็อก E (บท 142 เป็นต้นไป) · พิมพ์ exit ออกจาก console

ข้อ 7 — 30 บทความเดิมยังอ่านได้ครบ

ให้คอมพิวเตอร์เปิดทีละหน้าแทนเรา (รันในแท็บที่ 2 · ทั้งหมดบรรทัดเดียว):

for i in $(seq 1 30); do curl -s localhost:3000/posts/$i | grep -c 'class="trix-content"'; done | sort | uniq -c

• for i in $(seq 1 30); do … ; done = ทำซ้ำโดยให้ i เป็น 1, 2, … 30 · $i = ค่าของรอบนั้น
• grep -c 'class="trix-content"' = นับว่าหน้านั้นมีกล่องเนื้อหาของ Action Text กี่กล่อง (หน้าปกติ = 1)
• | sort | uniq -c = รวมผล 30 บรรทัดให้เหลือ "ผลแบบนี้ มีกี่หน้า"

ผลจริง:

     30 1

อ่านว่า "ผล 1 มี 30 หน้า" = ครบ · ถ้ามีบรรทัด 0 โผล่ เช่น 2 0 แปลว่ามี 2 หน้าที่ไม่มีกล่องเนื้อหา — บทความพวกนั้นยังไม่มี body (ลืมรัน bin/rails posts:backfill_body ของบท 137) หรือหน้านั้นพังเป็น error (เปิดในเบราว์เซอร์ดู) · ถ้า DB ของคุณเคยลบหรือเพิ่มบทความ เลข id อาจไม่ใช่ 1–30 พอดี ให้ดูที่ bin/rails runner 'p Post.where(plain_text: nil).count' ต้องได้ 0 แทน

ขั้น 3 — ที่ AI พลาดประจำ 3 ข้อ — อาการ · ตรวจยังไง · แก้ยังไง

สไลด์หน้า 14 รวมไว้ 3 ข้อ · ผมใส่บั๊กแต่ละแบบเข้าไปในโค้ดที่ทำงานถูกแล้วทีละข้อ แล้วดูอาการจริง · สังเกตว่าสองข้อแรกหน้าเว็บไม่โชว์ error อะไรเลย ข้อสามพังก็ต่อเมื่อมีคนกดแก้บทความ:

ผลจริงของแถวที่สอง — ถามฉลากกับถามเนื้อไฟล์ ได้คำตอบไม่ตรงกัน · ส่วนนี้แค่อ่านดูผลก็พอ ไม่ต้องพิมพ์ตาม · ผมเขียนไฟล์ tmp/fake_test.rb แล้วรันด้วย bin/rails runner tmp/fake_test.rb (สร้างบทความในหน่วยความจำ ยังไม่บันทึก จึงไม่มีไฟล์ขึ้นโกดัง):

# tmp/fake_test.rb
post = Post.new(title: "ทดสอบไฟล์ปลอม", body: "<div>x</div>", category: Category.first,
                cover: { io: File.open("tmp/fake.png"), filename: "fake.png", content_type: "image/png" })
p post.cover.content_type
p post.cover.filename.extension
p post.valid?
p post.errors.full_messages
p Marcel::MimeType.for(StringIO.new(File.binread("tmp/fake.png")))

• cover: { io: …, filename: …, content_type: … } = ยื่นไฟล์ให้ Active Storage พร้อมฉลากที่เราเขียนเอง — แบบเดียวกับที่เบราว์เซอร์เขียนฉลาก image/png ให้ตอนอัป · io: = ตัวไฟล์ที่เปิดไว้
• p = พิมพ์ค่าออกมาดู · post.cover.content_type = ฉลาก · filename.extension = นามสกุล
• post.valid? = สั่ง validation ทุกตัวทำงานโดยยังไม่บันทึก ได้ true/false · errors.full_messages = ข้อความ error ที่จะขึ้นในกล่องแดง
• บรรทัดสุดท้าย: File.binread = อ่านเนื้อไฟล์ดิบทั้งก้อน · StringIO.new(…) = ห่อเนื้อนั้นให้หน้าตาเหมือนไฟล์ · ส่งให้ Marcel::MimeType.for ดูแค่เนื้อ ไม่ส่งชื่อไฟล์หรือฉลากไปด้วย

"image/png"
"png"
false
["Cover รองรับเฉพาะ PNG, JPEG, WebP"]
"application/octet-stream"

บรรทัด 1–2: ฉลาก (content_type) กับนามสกุลบอกว่าเป็น png ทั้งคู่ → AI ที่ตรวจแบบนี้จะปล่อยผ่าน · บรรทัด 3–4: validation ของเรา (บท 140) ไม่ยอม · บรรทัด 5: Marcel อ่านเนื้อแล้วบอก application/octet-stream = "ข้อมูลอะไรไม่รู้ ไม่ใช่รูปแน่" · (ถ้าลองทำตามแล้ว ลบทิ้งด้วย rm tmp/fake_test.rb)

โจทย์ recap หน้า 13 case 1 — raw ในอีเมล · body.to_s ใน JSON

สไลด์หน้า 13 ให้โค้ดสองบรรทัดแล้วถามว่าปลอดภัยไหม — บรรทัดแรกในอีเมลสรุปรายสัปดาห์ · บรรทัดที่สองใน API ที่ส่งให้แอปมือถือ · ก่อนตอบ ต้องรู้ก่อนว่า @post.body.to_s ให้อะไรออกมา · ผมใส่ HTML อันตรายลงในเนื้อหาบทความ (แบบที่คนร้ายส่งตรงเข้าฟอร์มโดยไม่ผ่าน Trix · บท 136) แล้วลองจริงใน mailer · ส่วนนี้อ่านดูผลอย่างเดียว ไม่ต้องพิมพ์ตาม (อีเมลเป็นเรื่องของบล็อก E) · และลองแบบนี้ได้เฉพาะกับแอปในเครื่องตัวเอง ห้ามส่งของแบบนี้เข้าเว็บคนอื่น

# ทดลองใน bin/rails runner · ทำใน transaction แล้วย้อนกลับ ข้อมูลจริงไม่เปลี่ยน
class WeeklyTestMailer < ApplicationMailer
  def digest(post)
    @post = post
    mail(to: "reader@example.com", subject: "สรุปรายสัปดาห์") do |format|
      format.html { render inline: "<%= raw @post.body.to_s %>" }
    end
  end
end

post.update!(body: %(<div>สูตรเด็ด <strong>ตัวหนา</strong><script>alert(1)</script><img src="x" onerror="alert(2)"></div>))

• ApplicationMailer = แม่แบบของ "คนส่งจดหมาย" ที่มากับ rails new (ละเอียดในบล็อก E) · mail(…) = เขียนซองจดหมาย (ส่งถึงใคร หัวเรื่องอะไร)
• do |format| format.html { … } end = "อีเมลฉบับ HTML หน้าตาเป็นแบบนี้" · render inline: = ใช้ ERB ในเครื่องหมายคำพูดเป็นหน้าตาอีเมล — ตรงกับบรรทัดในสไลด์ <%= raw @post.body.to_s %>
• post ในบรรทัดสุดท้าย = บทความหนึ่งตัวที่ผมหยิบมาจาก DB · %(…) = วิธีเขียน string ของ Ruby ที่ข้างในมี " ได้สบาย ๆ · alert(1) = payload ทดลองที่ไม่ทำอันตราย แค่เด้งกล่องข้อความ
• จากนั้นสร้างอีเมลจาก mailer นี้ (ยังไม่ส่งจริง) แล้วเปิดดู HTML ข้างใน — ผลอยู่ในเฉลยข้างล่าง

--- ที่เก็บในตาราง (post.body.body.to_html)
<div>สูตรเด็ด <strong>ตัวหนา</strong><script>alert(1)</script><img src="x" onerror="alert(2)"></div>
--- HTML ในอีเมล
<div class="trix-content">
  <div>สูตรเด็ด <strong>ตัวหนา</strong>alert(1)<img src="x"></div>
</div>

ส่วนบรรทัดที่สอง render json: { body: @post.body.to_s } (API = ช่องที่ส่งข้อมูลเป็น JSON ให้แอปมือถือ) — ผมรันจริงกับบทความที่ใส่ HTML อันตรายแบบเดียวกัน (รันใน runner เป็น { body: post.body.to_s }.to_json ซึ่งคือสิ่งที่ render json: ทำ) · ได้ 2 อย่างที่ควรรู้:

• ได้ HTML ที่ล้างแล้วเหมือนในอีเมล ห่อด้วยกล่อง trix-content — แอปมือถือต้องเอา HTML ไปวาดเอง · และใน development ยังติด comment บอกที่อยู่ไฟล์ในเครื่อง server มาด้วย ซึ่งไม่ควรไปถึงลูกค้า
• ถ้าแอปมือถือแค่โชว์ข้อความ ใช้ post.body.to_plain_text แทน — ผลจริงได้ "สูตรเด็ด ตัวหนา" (ทิ้งทั้งแท็กและเนื้อใน script) · API ของเราตอนนี้ (_post.json.jbuilder) ส่ง description ซึ่งเป็นข้อความล้วนอยู่แล้ว (บท 137)

ขั้น 4 — เติมกฎ 13–15 ลง 00-context.md: คู่มือโตจาก 12 ข้อเป็น 15 ข้อ

ใบสั่ง 04-content.md ใช้ครั้งเดียวต่อบล็อก · ส่วน 00-context.md คือกฎถาวรของร้านที่ AI อ่านทุกครั้ง (โหลดผ่าน CLAUDE.md · บท 121) · บทเรียนที่ต้องใช้ซ้ำในงานอื่นจึงย้ายมาอยู่ที่นี่ · เปิด prompts/00-context.md แล้วแทรกก้อนนี้ไว้ระหว่างกฎข้อ 12 กับหัวข้อ ## รูปแบบการตอบ · ให้มีบรรทัดว่าง 1 บรรทัดทั้งก่อนและหลังก้อนนี้ (แบบเดียวกับหัวข้ออื่นในไฟล์ — ลืมบรรทัดว่างหลังกฎข้อ 15 แล้วไฟล์จะไม่ตรงกับบทเรียน):

## กฎเพิ่มจากบล็อค Rich text และไฟล์

13. attachment และ rich text ที่โชว์ในหน้ารวม ต้องมี with_attached_* / with_rich_text_* ใน controller
    Bullet เตือน AVOID eager loading "rich_text_*" = เตือนผิด ห้ามลบ ให้ add_safelist ใน development.rb
14. ตรวจชนิดไฟล์จากเนื้อไฟล์จริง (magic bytes) ไม่เชื่อ content_type หรือนามสกุลที่ client ส่งมา
15. bucket เป็น private เสมอ ให้ดูไฟล์ผ่าน signed URL และ access key อยู่ใน credentials เท่านั้น

ข้อห้ามสองข้อที่ไม่ย้ายมาเป็นกฎถาวร:

• "ลบคอลัมน์ description ในรอบนี้" — เรื่องเฉพาะงานนี้ · หลักการทั่วไปมีอยู่แล้วในกฎข้อ 7 (expand-contract)
• "raw หรือ html_safe" — ควรเป็นกฎถาวรด้วยซ้ำ แต่อย่าเพิ่งเติมเองตอนนี้ · บทถัด ๆ ไปเติมกฎต่อจากเลข 15 · ถ้าไฟล์ของคุณมีกฎเกินมา เลขจะไม่ตรงกับบทเรียน เทียบยาก · ระหว่างนี้ข้อห้ามนี้อยู่ในใบสั่ง 04-content.md แล้ว

ขั้น 5 — เก็บเข้าโปรเจกต์

ดูก่อนว่าจะเก็บอะไร (ผลจริง — ต้องมีแค่สองบรรทัดนี้):

$ git status --short
 M prompts/00-context.md
?? prompts/04-content.md

M = แก้ไฟล์เดิม · ?? = ไฟล์ใหม่ · tmp/fake.png ไม่โผล่เพราะ tmp/ อยู่ใน .gitignore ตั้งแต่ rails new · ถ้ามีไฟล์ใต้ app/ หรือ config/ โผล่มาด้วย แปลว่ายังมีของทดลองค้าง → git diff ดูก่อน แล้ว git restore <ไฟล์>

$ git add .
$ git commit -m "prompts: ใบสั่งงาน rich text + รูปปก และกฎ 13–15"
[my-day3 828d702] prompts: ใบสั่งงาน rich text + รูปปก และกฎ 13–15
 2 files changed, 43 insertions(+)
 create mode 100644 prompts/04-content.md

43 insertions = 7 บรรทัดใน 00-context (หัวข้อ · บรรทัดว่าง · กฎ 4 บรรทัด · บรรทัดว่าง) + 36 บรรทัดของไฟล์ใหม่ · ในวงเล็บเหลี่ยมคือชื่อ branch ที่คุณอยู่กับเลข commit — ของคุณจะต่าง

ทางเลือก: ลอง vibe จริง — ให้ AI ทำบล็อก D ใหม่ทั้งหมด แล้วตรวจด้วย checklist ชุดนี้

ทำหลัง commit ข้างบน · ไม่บังคับ · ขั้นตอนเหมือนบท 135 หัวข้อ "ทางเลือก" ทุกข้อ ต่างแค่จุดเริ่มกับชื่อใบสั่ง · บทนี้ไม่โชว์ว่า AI ตอบอะไร (ของแต่ละคนต่างกันทุกครั้ง)

1. git log --oneline → หาเลข commit prompts: ใบสั่งงาน Hotwire + กฎ 9–12 (จบ Day 3 ก่อนเริ่มบล็อก D)
2. git switch -c ai-vibe4 <เลข commit นั้น> → git checkout @{-1} -- prompts/ (ก็อปโฟลเดอร์ prompts/ ที่มีใบสั่ง 04 และกฎ 13–15 ตามมาด้วย · ทวนบท 135)
3. ปิด bin/dev → bin/rails db:reset → เปิด bin/dev ใหม่ — ตู้ต้องกลับไปเป็นแบบที่ยังไม่มีตาราง Action Text / Active Storage
4. สั่ง AI ประมาณ "ทำตาม @prompts/04-content.md ทีละข้อกำหนด · เสร็จแต่ละข้อให้บอกว่าแก้ไฟล์ไหน และบอกวิธีตรวจเกณฑ์ที่เกี่ยวข้อง"
5. ตรวจเองครบ 7 ข้อ + ภารกิจท้ายบท + ตาราง "AI พลาดประจำ" · จ้องเป็นพิเศษ: AI เขียน minioadmin ลง storage.yml ตรง ๆ ไหม (ห้ามข้อ 4) · ใช้ bundle add แล้วได้ gem เวอร์ชันอื่นไหม (บท 138) · ลบ with_rich_text_body ตาม Bullet ไหม (กฎ 13)
6. กลับบ้าน: commit → git switch my-day3 → ปิด bin/dev → bin/rails db:reset → เปิด bin/dev ใหม่

สรุปบล็อก D — ได้อะไรไปบ้าง

งานค้างที่บล็อก D ทิ้งไว้ให้บล็อก E: ไฟล์กำพร้าต้องมีคนเก็บกวาด · และตอนอัปรูปในขั้น 2 log ของ bin/dev มีบรรทัด [ActiveJob] Enqueued ActiveStorage::AnalyzeJob … to Async(default) — Rails มี "ใบงานหลังร้าน" อยู่แล้วโดยที่เราไม่ได้สั่ง · บท 142 เริ่มเรื่องนี้

ภารกิจ: ตรวจข้อห้าม 5 ข้อด้วยคำสั่ง

$ grep -rnw -e raw -e html_safe app/views app/helpers app/controllers app/models
app/views/posts/_post.html.erb:20:      <%# Action Text ล้าง HTML อันตราย (sanitize) ให้เองตอนแสดง — ห้ามใส่ raw/html_safe %>
$ curl -s -w '\nHTTP %{http_code}\n' http://localhost:9000/wongnok-dev/fe20nsqraac0pyfnxqmith9brend
<?xml version="1.0" encoding="UTF-8"?>
<Error><Code>AccessDenied</Code><Message>Access Denied.</Message><Key>fe20nsqraac0pyfnxqmith9brend</Key><BucketName>wongnok-dev</BucketName><Resource>/wongnok-dev/fe20nsqraac0pyfnxqmith9brend</Resource><RequestId>18E691191E004D90</RequestId><HostId>dd9025ba…</HostId></Error>
HTTP 403
$ grep -rn "Marcel\|content_type" app/models
app/models/post.rb:29:      # ชนิดไฟล์: ดูจากเนื้อไฟล์จริง (magic bytes ต้นไฟล์) ไม่ใช่ content_type หรือนามสกุลที่เบราว์เซอร์บอกมา
app/models/post.rb:30:      real_type = Marcel::MimeType.for(StringIO.new(cover_head))
$ grep -n "access_key\|secret" config/storage.yml
18:  access_key_id: <%= Rails.application.credentials.dig(:minio, :access_key_id) %>
19:  secret_access_key: <%= Rails.application.credentials.dig(:minio, :secret_access_key) %>
21:# Use bin/rails credentials:edit to set the AWS secrets (as aws:access_key_id|secret_access_key)
24:#   access_key_id: <%= Rails.application.credentials.dig(:aws, :access_key_id) %>
25:#   secret_access_key: <%= Rails.application.credentials.dig(:aws, :secret_access_key) %>
$ grep -n '"description"' db/schema.rb
74:    t.text "description", null: false

Quiz

ถ้าเปิดสไลด์ดูประกอบ

อ้างอิง

• Rails Guides — Active Storage: Redirect Mode — อ่านย่อหน้าแรก: URL ของ Rails คงที่ แล้ว redirect ไปหา URL ของ service ที่หมดอายุใน 5 นาที (ที่มาของกับดักข้อ 3)
• Rails Guides — Active Storage: Purging Unattached Uploads — ไฟล์ที่อัปแล้วไม่ถูกผูก (เช่น ฟอร์มไม่ผ่าน) ค้างอยู่ใน storage · ตัวอย่างงานเก็บกวาดที่จะเข้าใจเต็ม ๆ ในบล็อก E
• Rails Guides — Action Text: Avoiding N+1 Queries — สั้นมาก · ที่มาของ with_rich_text_body ในเกณฑ์ข้อ 5
• Rails Guides — Action Text: Rendering Rich Text Content — อ่านว่า Action Text sanitize เนื้อหาตอนแสดงผล (เหตุผลที่ body.to_s ใน case 1 ไม่มี script)
• OWASP File Upload Cheat Sheet — File Signature Validation — อ่านหัวข้อนี้กับ "Content-Type Validation" ข้างบนมัน: ทำไมเชื่อ Content-Type ไม่ได้ และต้องดู magic bytes (ที่มาของกฎ 14)
• rails/marcel (GitHub) — README ส่วน Usage: ส่งแค่เนื้อไฟล์ = ดูจากเนื้ออย่างเดียว · ส่ง name:/declared_type: ด้วย = ยอมถอยไปเชื่อชื่อไฟล์
• repo ของอาจารย์ — wongnok-blog-all-in-one — เลือก branch day3-d-done ถ้าอยากเทียบกับเฉลยของอาจารย์ · จำไว้ว่าไฟล์ต่างจากบทเรียนนี้