Rich text — ให้ผู้ใช้จัดตัวหนาได้ โดยไม่เปิดช่องให้รัน JavaScript

แผนที่ของ Part 1 — 3 บล็อก และ 3 ประโยคของวัน

Day 3 เราทำให้แอปเป็นหน้าเว็บ (หน้าตา · ขยับได้) · ชุดนี้ทำให้มันเป็นของที่เปิดให้คนใช้จริงได้ · เปิดสไลด์ดูจะเห็นป้าย "DAY 3" และคำว่า "Part 2" — เพราะอาจารย์วางชุดนี้ไว้เป็นครึ่งบ่ายของ Day 3 แล้วย้ายมาเรียนวันนี้ · ไม่ต้องสนใจป้าย เว็บนี้เรียกว่า Day 4 Part 1

ลำดับนี้ตั้งใจ (สไลด์หน้า 2): ใส่เนื้อหาหนัก ๆ (รูป + rich text) ก่อน หน้าแรกจะได้ช้าจริง ๆ แล้วบล็อก F ค่อยแก้ปัญหาที่เราสร้างเองกับมือ · จบ Part 1 โฟลเดอร์ prompts/ จะมี 7 ไฟล์ (ตอนนี้มี 4: 00–03)

Day 3 บท 120 ให้จำ 3 ประโยคไว้ก่อน · ตอนนี้ถึงเวลาของข้อ ② ③ แล้ว:

ของสองอย่างที่ผู้ใช้ใส่เข้ามา — แล้ว rich text คืออะไร

บล็อก D ว่าด้วยของสองอย่างที่ผู้ใช้เป็นคนใส่เข้ามา: ข้อความที่จัดรูปแบบได้ (บทนี้ + 137) กับไฟล์ (บท 138–140) · สไลด์หน้า 3 สรุปไว้ประโยคเดียว: ของที่ผู้ใช้ใส่เข้ามา เชื่อไม่ได้ทั้งคู่

rich text คือข้อความที่มีรูปแบบ — ตัวหนา ตัวเอียง ลิงก์ หัวข้อ รายการข้อ ๆ · นึกถึงช่องเขียนอีเมลใน Gmail หรือ Google Docs ที่มีปุ่ม B I ด้านบน · กดปุ่ม B แล้วพิมพ์ ข้อความก็หนาทันที

เบื้องหลังปุ่มพวกนั้นคือ HTML · กดตัวหนา = editor (ช่องพิมพ์แบบมีปุ่ม) แอบเขียน <strong>อร่อย</strong> ให้ · แปลว่าถ้าเว็บเรามี rich text เราต้องเก็บ HTML ที่มาจากผู้ใช้ แล้วเอาไปโชว์ให้คนอื่นดู

เทียบกับ React (บท 125 เล่าไว้): {post.title} ใน JSX escape ให้เองเหมือน <%= %> · จะโชว์ HTML ของผู้ใช้ได้ต้องพิมพ์ dangerouslySetInnerHTML — โลก React ก็เจอคำถามเดียวกับบทนี้ทุกเว็บที่มี rich text

ลองแบบ escape ทั้งหมด — ผู้ใช้จะเห็นแท็กเป็นตัวหนังสือ

ทางที่ง่ายที่สุดคือ "ไม่ยอมรับ HTML เลย" — ซึ่งแอปเราทำอยู่แล้วเพราะ <%= %> escape ทุกอย่าง · ลองดูว่าผู้ใช้จะเห็นอะไร · เปิด bin/rails console แล้วสร้างบทความที่ชื่อมีตัวหนา และคำอธิบายมีทั้งของดีของร้ายปนกัน:

wongnok-blog-all-in-one(dev):001> post = Post.create!(title: "ข้าวซอยร้านนี้ <strong>อร่อย</strong>", description: 'น้ำแกง<strong>เข้มข้น</strong> ดูร้านอื่นที่<a href="/posts">หน้ารวม</a><img src="x" onerror="alert(1)">', category: Category.first)
  Category Load (0.5ms)  SELECT "categories".* FROM "categories" ORDER BY "categories"."id" ASC LIMIT 1 /*application='WongnokBlogAllInOne'*/
  TRANSACTION (0.3ms)  BEGIN /*application='WongnokBlogAllInOne'*/
  Post Create (0.9ms)  INSERT INTO "posts" ("title", "description", "category_id", "created_at", "updated_at") VALUES ('ข้าวซอยร้านนี้ <strong>อร่อย</strong>', 'น้ำแกง<strong>เข้มข้น</strong> ดูร้านอื่นที่<a href="/posts">หน้ารวม</a><img src="x" onerror="alert(1)">', 1, '2026-11-10 02:47:41.008443', '2026-11-10 02:47:41.008443') RETURNING "id" /*application='WongnokBlogAllInOne'*/
  TRANSACTION (0.7ms)  COMMIT /*application='WongnokBlogAllInOne'*/
=>
#<Post:0x000000012861fbb0
...
wongnok-blog-all-in-one(dev):002> post.id
=> 31

• title: "…<strong>อร่อย</strong>" — ชื่อบทความที่ผู้ใช้อยากให้คำว่า อร่อย เป็นตัวหนา
• description: '…' — ใช้ ' (ฟันหนูเดี่ยว) ครอบ เพราะข้างในมี " เยอะ · ข้างในมี 3 อย่าง: <strong> ตัวหนา (ของดี) · <a href="/posts"> ลิงก์ (ของดี) · <img src="x" onerror="alert(1)"> (ของร้าย)
• <img src="x" onerror="…"> — รูปที่ที่อยู่ x ไม่มีจริง → โหลดไม่ขึ้น → เบราว์เซอร์รันโค้ดใน onerror ("ถ้ารูปพังให้รันอันนี้") · ไม่มีคำว่า script สักตัว แต่รันโปรแกรมได้ · เราใช้แค่ alert(1) (เด้งกล่องข้อความ) ซึ่งไม่ทำอะไรเสียหาย
• บรรทัด Category Load · TRANSACTION · Post Create — Rails รายงานคำสั่ง SQL ที่ส่งไปฐานข้อมูล (เหมือน Day 2) · /*application=…*/ ท้ายบรรทัดคือป้ายชื่อแอปที่ Rails แปะไว้ ไม่ต้องสนใจ
• VALUES ('ข้าวซอยร้านนี้ <strong>… — ฐานข้อมูลเก็บทุกตัวอักษรตามที่พิมพ์ ไม่มีใครกรอง (เหมือนบท 125)
• => · #<Post:0x… · ... — console โชว์บทความที่เพิ่งสร้าง · เพราะเราเก็บใส่ตัวแปร (post = …) console เลยย่อผลไว้แค่หัวแล้วต่อด้วย ... (ค่าเริ่มต้นของ console ไม่ใช่ error) · 0x… = ที่อยู่ในหน่วยความจำ ไม่ต้องสนใจ
• post.id → 31 — ของคุณอาจเป็นเลขอื่น ใช้เลขของคุณแทน 31 ทุกที่ข้างล่าง

ดูว่าหน้าบทความส่ง HTML อะไรออกไป · | แปลว่า "ส่งผลของคำสั่งซ้ายไปให้คำสั่งขวา" → เอา HTML ทั้งหน้าไปให้ grep (บท 125) เลือกเฉพาะบรรทัดหัวข้อ (card-title text-3xl) กับบรรทัดคำอธิบาย (leading-relaxed) · \| ตรงกลางแปลว่า "หรือ" (เอาบรรทัดที่มีคำแรก หรือคำที่สอง):

$ curl -s localhost:3000/posts/31 | grep "card-title text-3xl\|leading-relaxed"
          <h1 class="card-title text-3xl">ข้าวซอยร้านนี้ &lt;strong&gt;อร่อย&lt;/strong&gt;</h1>
</turbo-frame>      <p class="leading-relaxed whitespace-pre-line">น้ำแกง&lt;strong&gt;เข้มข้น&lt;/strong&gt; ดูร้านอื่นที่&lt;a href=&quot;/posts&quot;&gt;หน้ารวม&lt;/a&gt;&lt;img src=&quot;x&quot; onerror=&quot;alert(1)&quot;&gt;</p>

• บรรทัดแรก — <strong> = <strong> ที่ถูกใส่ซองใส · บนจอเห็นคำว่า ข้าวซอยร้านนี้ <strong>อร่อย</strong> ทั้งแท็ก (ผมเปิดใน Chrome ดูแล้ว · แถบบอกทางด้านบน "บทความทั้งหมด › อาหารไทย › …" ก็เห็นแบบเดียวกัน)
• บรรทัดสอง — ทุกแท็กถูกใส่ซองหมด รวมถึง <img onerror> · " = รหัสของ " · ไม่มีอะไรรัน แต่ก็ไม่มีอะไรหนา
• </turbo-frame> หน้าบรรทัดสอง — เป็นแท็กปิดของกรอบแก้หัวข้อ (บท 131) ที่บังเอิญอยู่บรรทัดเดียวกัน ไม่ต้องสนใจ

ปลอดภัย 100% แต่ผู้ใช้เห็นแท็กเป็นตัวหนังสือ — นี่ไม่ใช่ rich text แล้ว · ส่วนอีกขั้วหนึ่ง ผมลองแก้บรรทัดคำอธิบายใน _post.html.erb เป็น raw post.description แล้วเปิดใน Chrome: ตัวหนาขึ้นจริง ลิงก์ขึ้นจริง และ alert ของ onerror ทำงาน (แล้วคืนไฟล์ทันที) · สไลด์หน้า 4 จึงบอกว่า คำถามไม่ใช่ "จะกันไหม" แต่เป็น "จะปล่อยอะไรผ่านบ้าง"

allowlist กับ blocklist — ผิดแบบไหนเจ็บกว่า

มีสองวิธีเขียน "กฎว่าอะไรผ่าน":

• blocklist (รายการของที่ห้าม) — บอกว่าอะไรห้ามผ่าน ที่เหลือผ่านหมด · เช่น "ห้าม <script>"
• allowlist (รายการของที่อนุญาต) — บอกว่าอะไรผ่านได้ ที่เหลือโดนถอดหมด · เช่น "ผ่านได้แค่ strong em a p"

ลอง blocklist แบบที่คนส่วนใหญ่คิดได้ก่อน: "ลบคำว่า <script> ทิ้ง" · .gsub("<script>", "") คือ method ของข้อความใน Ruby แปลว่า "หาคำนี้ทุกที่ แล้วแทนด้วยข้อความว่าง" (= ลบทิ้ง)

wongnok-blog-all-in-one(dev):001> "<script>alert(1)</script>สวัสดี".gsub("<script>", "")
wongnok-blog-all-in-one(dev):002> '<img src="x" onerror="alert(1)">'.gsub("<script>", "")
wongnok-blog-all-in-one(dev):003> "<sc<script>ript>alert(1)</script>".gsub("<script>", "")

wongnok-blog-all-in-one(dev):001> "<script>alert(1)</script>สวัสดี".gsub("<script>", "")
=> "alert(1)</script>สวัสดี"
wongnok-blog-all-in-one(dev):002> '<img src="x" onerror="alert(1)">'.gsub("<script>", "")
=> "<img src=\"x\" onerror=\"alert(1)\">"
wongnok-blog-all-in-one(dev):003> "<sc<script>ript>alert(1)</script>".gsub("<script>", "")
=> "<script>alert(1)</script>"

ทีนี้ส่งของร้ายชิ้นเดียวกันให้ sanitize (ใช้ allowlist) — ผลจริง:

wongnok-blog-all-in-one(dev):004> helper.sanitize('<img src="x" onerror="alert(1)">')
=> "<img src=\"x\">"
wongnok-blog-all-in-one(dev):005> helper.sanitize('<a href="javascript:alert(1)">กดเลย</a>')
=> "<a>กดเลย</a>"

• บรรทัด 004 — img อยู่ในรายการ จึงรอด · src อยู่ในรายการ รอด · onerror ไม่อยู่ในรายการ ถูกตัด · sanitize ไม่ต้องรู้จัก onerror เลยก็กันได้
• บรรทัด 005 — ลิงก์แบบ javascript: (กดแล้วรันโปรแกรมแทนที่จะไปหน้าอื่น) · href ถูกตัดทิ้ง เหลือ <a> ที่กดแล้วไม่ไปไหน · รายการของ sanitize ตรวจลึกถึงค่าข้างในด้วย

เทียบความผิดพลาดของสองแบบ (สไลด์หน้า 4) — นี่คือเหตุผลทั้งหมดที่โลกเลือก allowlist:

เทียบของที่รู้แล้ว — หลักการเดียวกันเจอมาแล้วหลายรอบ (สไลด์หน้า 4): params.expect (บท 117) = บอกว่าช่องไหนในฟอร์มรับได้ · <%= %> (บท 103/125) = escape ทุกอย่างแล้วค่อยยกเว้นเป็นจุด · วันนี้ sanitize = บอกว่าแท็กไหนผ่านได้ · บท 140 จะบอกว่าไฟล์ชนิดไหนรับได้ — ทั้งหมดคือ allowlist

ใส่ sanitize ลงใน view แล้วบีบรายการให้แคบ

ตอนนี้หน้าบทความโชว์คำอธิบายด้วย <%= post.description %> (escape ทั้งหมด) · เปิด app/views/posts/_post.html.erb หาบรรทัดนี้ (อยู่ในก้อน <% if full %> = ตอนโชว์บทความเต็ม):

      <p class="leading-relaxed whitespace-pre-line"><%= post.description %></p>

แก้เป็น (เติมคำว่า sanitize คำเดียว · ใน view เรียกตรง ๆ ได้เลย ส่วนใน console ต้องมี helper. นำหน้าแบบเมื่อกี้):

      <p class="leading-relaxed whitespace-pre-line"><%= sanitize post.description %></p>

$ curl -s localhost:3000/posts/31 | grep "leading-relaxed"
</turbo-frame>      <p class="leading-relaxed whitespace-pre-line">น้ำแกง<strong>เข้มข้น</strong> ดูร้านอื่นที่<a href="/posts">หน้ารวม</a><img src="x"></p>

บีบรายการให้เหลือแค่ที่ใช้จริง (แบบสไลด์หน้า 6):

      <p class="leading-relaxed whitespace-pre-line"><%= sanitize post.description, tags: %w[p a strong em], attributes: %w[href] %></p>

• tags: — แท็กที่อนุญาต แทนรายการเริ่มต้นทั้งหมด · %w[p a strong em] = วิธีเขียนรายการคำสั้น ๆ ของ Ruby เท่ากับ ["p", "a", "strong", "em"]
• attributes: — ช่องในแท็กที่อนุญาต · ให้แค่ href (ที่อยู่ของลิงก์) · อย่างอื่นเช่น class style on… ถูกตัดหมด

บันทึก แล้ว curl อีกรอบ — ผลจริง:

$ curl -s localhost:3000/posts/31 | grep "leading-relaxed"
</turbo-frame>      <p class="leading-relaxed whitespace-pre-line">น้ำแกง<strong>เข้มข้น</strong> ดูร้านอื่นที่<a href="/posts">หน้ารวม</a></p>

<img> หายไปทั้งแท็ก เพราะไม่อยู่ในรายการ 4 คำของเรา · ตัวหนากับลิงก์ยังอยู่ · นี่คือ rich text ที่ปลอดภัย: ผู้ใช้ได้รูปแบบที่ต้องการ และเราคุมได้ว่ารูปแบบไหนบ้าง

sanitize ทำงานตอนโชว์ ไม่ใช่ตอนบันทึก

หน้าเว็บสะอาดแล้ว · แต่ในฐานข้อมูลล่ะ? ถามใน console — ผลจริง:

wongnok-blog-all-in-one(dev):001> Post.find(31).description
  Post Load (0.4ms)  SELECT "posts".* FROM "posts" WHERE "posts"."id" = 31 LIMIT 1 /*application='WongnokBlogAllInOne'*/
=> "น้ำแกง<strong>เข้มข้น</strong> ดูร้านอื่นที่<a href=\"/posts\">หน้ารวม</a><img src=\"x\" onerror=\"alert(1)\">"

onerror ยังอยู่ครบ · sanitize ไม่ได้แตะฐานข้อมูลเลย มันกรองระหว่างทางออกไปหน้าเว็บทุกครั้งที่มีคนเปิดหน้า (สไลด์หน้า 6):

ทางอื่นที่ไม่ผ่าน view มีอยู่แล้วในแอปเรา — scaffold สร้างหน้า JSON ไว้ให้ตั้งแต่สร้างโปรเจกต์ (app/views/posts/show.json.jbuilder = แม่พิมพ์ของหน้า JSON บท 118 · เปิดด้วยการต่อ .json ท้าย URL) สำหรับแอปมือถือหรือโปรแกรมอื่นมาดึงข้อมูล · ผลจริง:

$ curl -s localhost:3000/posts/31.json
{"id":31,"title":"ข้าวซอยร้านนี้ \u003cstrong\u003eอร่อย\u003c/strong\u003e","description":"น้ำแกง\u003cstrong\u003eเข้มข้น\u003c/strong\u003e ดูร้านอื่นที่\u003ca href=\"/posts\"\u003eหน้ารวม\u003c/a\u003e\u003cimg src=\"x\" onerror=\"alert(1)\"\u003e","category_id":1,"created_at":"2026-11-10T09:47:41.008+07:00","updated_at":"2026-11-10T09:47:41.008+07:00","url":"http://localhost:3000/posts/31.json"}

• \u003c · \u003e — รหัสของ < > ในรูปแบบ JSON · ไม่ใช่การกรอง โปรแกรมไหนอ่าน JSON ก็ได้ < กลับมาเหมือนเดิม
• onerror=\"alert(1)\" — ส่งออกไปครบ · ถ้าแอปมือถือเอา description ไปวางเป็น HTML ผู้ใช้แอปโดน XSS

ลองให้ Ruby ทำตัวเป็นแอปมือถือ: อ่าน JSON แล้วพิมพ์ description ออกมา (ruby -rjson -e '…' = รันโค้ด Ruby บรรทัดเดียวที่โหลดตัวอ่าน JSON ไว้) — ผลจริง:

$ curl -s localhost:3000/posts/31.json | ruby -rjson -e 'puts JSON.parse(STDIN.read)["description"]'
น้ำแกง<strong>เข้มข้น</strong> ดูร้านอื่นที่<a href="/posts">หน้ารวม</a><img src="x" onerror="alert(1)">

• STDIN.read — อ่านทุกอย่างที่ | ส่งมา (JSON ทั้งก้อน) · JSON.parse(…) — แปลงข้อความ JSON เป็น Hash ของ Ruby
• ["description"] — หยิบช่อง description ออกมา · puts — พิมพ์ออกจอ · ผล: \u003c กลับมาเป็น < และ onerror อยู่ครบ

ของสกปรกอยู่ใน DB จริง ๆ · จุดที่ปลอดภัยคือ "ตอน render ผ่าน Rails view" เท่านั้น (สไลด์หน้า 6) · ส่งออกทางอื่นเมื่อไหร่ ต้อง sanitize ที่ทางนั้นด้วย

แล้วทำไมไม่กรองตอนบันทึกให้จบ ๆ ไป? เพราะกฎว่าอะไรปลอดภัยเปลี่ยนได้ — มีวิธีหลบใหม่ ๆ ถูกค้นพบทุกปี · กรองตอนบันทึก = ของเก่าที่บันทึกไปแล้วตามกฎเก่าแก้ย้อนหลังไม่ได้ · กรองตอนโชว์ = แก้กฎ (หรือ Rails ออก patch = รุ่นแก้ช่องโหว่) แล้วของเก่าทุกชิ้นปลอดภัยขึ้นทันทีโดยไม่ต้องรัน migration · คุณเพิ่งเห็นกับตาเมื่อกี้: เปลี่ยน view จากรายการเริ่มต้นเป็น 4 แท็ก → <img> ของบทความ 31 หายจากหน้าเว็บทันที ทั้งที่ในฐานข้อมูลไม่ถูกแก้สักตัวอักษร

เก็บเป็น HTML หรือ Markdown — และปัญหาตอนค้นหา

ต้องตัดสินใจตั้งแต่วันแรก เพราะย้ายทีหลังเจ็บ (สไลด์หน้า 7) · Markdown คือวิธีเขียนรูปแบบด้วยสัญลักษณ์ธรรมดา เช่น **อร่อย** = ตัวหนา · [หน้ารวม](/posts) = ลิงก์ — ไฟล์ prompts/*.md ของเราก็เป็น Markdown

สไลด์บอกว่า Markdown "ไม่มีแท็กให้กลัว" — ระวัง · ผมลองตัวแปลง Markdown ที่ติดมากับ Ruby (RDoc) กับข้อความ ร้านนี้ **อร่อย** ตามด้วยบรรทัด <script>alert(1)</script> · ผลคือ <p>ร้านนี้ <strong>อร่อย</strong></p> ตามด้วย <script>alert(1)</script> ตัวจริงผ่านออกมา · อย่างน้อยตัวแปลงที่ลองนี้ยอมให้แทรก HTML ดิบ — เลือกตัวแปลงตัวไหนก็ต้องเช็คก่อนเสมอ

คำแนะนำของสไลด์: เนื้อหาถูกอ่านแค่บนเว็บเรา → เก็บ HTML (Action Text) ไปเลย เร็ว ไม่ต้องคิดมาก · มีแอปมือถือหรือส่งออกไปที่อื่นด้วย → Markdown คุ้มกว่า · (โลก Next.js มีทางที่สาม: MDX = Markdown ที่แปลงเป็นหน้าเว็บตอน build ทีเดียว เหมาะกับเนื้อหาที่ทีมเขียนเองและไม่ค่อยเปลี่ยน)

ปัญหาที่คนลืมคิด: การค้นหา · ถ้าเก็บ HTML แล้วค้นด้วยคำ คำว่า strong · div ที่เป็นชื่อแท็กจะปนมาด้วย · ลองค้นคำว่า strong (ผลจริง):

wongnok-blog-all-in-one(dev):002> Post.where("description ILIKE ?", "%strong%").pluck(:id)
  Post Pluck (2.0ms)  SELECT "posts"."id" FROM "posts" WHERE (description ILIKE '%strong%') /*application='WongnokBlogAllInOne'*/
=> [31]
wongnok-blog-all-in-one(dev):003> helper.strip_tags(Post.find(31).description)
  Post Load (1.2ms)  SELECT "posts".* FROM "posts" WHERE "posts"."id" = 31 LIMIT 1 /*application='WongnokBlogAllInOne'*/
=> "น้ำแกงเข้มข้น ดูร้านอื่นที่หน้ารวม"

• ILIKE ? + "%strong%" — คำสั่ง SQL "ค้นข้อความที่มีคำนี้อยู่ตรงไหนก็ได้ ไม่สนตัวพิมพ์เล็กใหญ่" (% = อะไรก็ได้กี่ตัวก็ได้) · pluck(:id) = เอาแค่ id (บท 113)
• [31] — เจอบทความ 31 ทั้งที่บนจอไม่มีคำว่า strong สักตัว · มันไปเจอในชื่อแท็ก
• strip_tags — helper ที่ถอดแท็กทิ้งทั้งหมด เหลือแค่ตัวหนังสือ (plain text) · ของแบบนี้แหละที่ควรค้น

ทางแก้ของสไลด์: เก็บอีกช่องเป็นตัวหนังสือล้วน (plain_text) แล้วค้นจากช่องนั้น · บท 137 ทำจริง

ต่อไป: ของสำเร็จรูปที่มากับ Rails

ที่ทำในบทนี้เป็นการประกอบเองด้วยมือเพื่อให้เห็นกลไก · ของจริงยังขาด: ช่องพิมพ์แบบมีปุ่ม B (ตอนนี้ต้องพิมพ์แท็กเอง) · ช่อง plain text ไว้ค้นหา · รายการแท็กกลางที่ใช้ทั้งแอป · Rails มีของสำเร็จรูปชื่อ Action Text ที่ทำทั้งหมดนี้ และตรวจตอนโชว์ให้เองแบบที่เพิ่งเรียน — บท 137 ติดตั้งจริง

$ curl -s localhost:3000/posts/31 | grep "leading-relaxed"
</turbo-frame>      <p class="leading-relaxed whitespace-pre-line">เมนูแนะนำข้าวซอย<em>ไก่</em> <a href="/posts">ดูร้านอื่น</a></p>

$ curl -s localhost:3000/posts | grep "เมนูแนะนำ"
      <p class="text-base-content/80">&lt;h2&gt;เมนูแนะนำ&lt;/h2&gt;ข้าวซอย&lt;em&gt;ไก่&lt;/em&gt; &lt;a href=&quot;/posts&quot;...</p>

ทดสอบความเข้าใจ

wongnok-blog-all-in-one(dev):001> Post.last.destroy
  Post Load (0.5ms)  SELECT "posts".* FROM "posts" ORDER BY "posts"."id" DESC LIMIT 1 /*application='WongnokBlogAllInOne'*/
  TRANSACTION (0.3ms)  BEGIN /*application='WongnokBlogAllInOne'*/
  Comment Load (0.4ms)  SELECT "comments".* FROM "comments" WHERE "comments"."post_id" = 31 /*application='WongnokBlogAllInOne'*/
  Post Destroy (0.4ms)  DELETE FROM "posts" WHERE "posts"."id" = 31 /*application='WongnokBlogAllInOne'*/
  TRANSACTION (0.7ms)  COMMIT /*application='WongnokBlogAllInOne'*/
=>
#<Post:0x0000000120a5c0f0
 id: 31,
 title: "ข้าวซอยร้านนี้ <strong>อร่อย</strong>",
 description: "<h2>เมนูแนะนำ</h2>ข้าวซอย<em>ไก่</em> <a href=\"/po...",
 category_id: 1,
 created_at: "2026-11-10 09:47:41.008443000 +0700",
 updated_at: "2026-11-10 09:49:42.768802000 +0700">
wongnok-blog-all-in-one(dev):002> Post.count
  Post Count (0.9ms)  SELECT COUNT(*) FROM "posts" /*application='WongnokBlogAllInOne'*/
=> 30

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

อ้างอิง

• Rails Guides — Securing Rails Applications § Permitted Lists Versus Restricted Lists — อ่านหัวข้อนี้หัวข้อเดียว (สั้น) · ที่มาของตัวอย่าง "<sc<script>ript>".gsub("<script>", "")
• Rails Guides — Securing Rails Applications § HTML/JavaScript Injection Countermeasures — อ่านสองย่อหน้าแรก: ทำไม Rails เลิกใช้ blocklist และตัวอย่าง sanitize(…, tags:, attributes:)
• Rails API — SanitizeHelper#sanitize — ตัวอย่าง option tags: attributes: · อ่านกล่องคำเตือนเรื่องการเพิ่มแท็กลงรายการ · ถัดลงไปมี strip_tags
• MDN — Cross-site scripting (XSS) § Sanitization — ใช้ตัวอย่าง <img src="x" onerror> ชิ้นเดียวกับบทนี้ · อ่านแค่หัวข้อ Sanitization · ส่วน Overview ด้านบนอธิบายว่าโค้ดของคนร้ายทำอะไรได้บ้าง
• OWASP — Input Validation Cheat Sheet § Allowlist vs Denylist — ย่อหน้าเดียว · คำแนะนำมาตรฐานของวงการว่าให้นิยามสิ่งที่รับ แทนการไล่จับของร้าย
• Rails Guides — Action Text Overview § What is Action Text? — อ่านล่วงหน้าสำหรับบท 137 · อ่านแค่ย่อหน้าแรก

ติดตรงไหน หรือผลของคุณต่างจากในบท — ก็อปผลจริงทั้งก้อนไปถาม AI หรือเพื่อนได้เลย โดยบอกว่ามาจากบท 136 ขั้นไหน