‹ Back to My Devblog
Debugging Backend

The imported Roblox documentation looked fine in the text, but the pictures and videos weren't loading. The browser console was full of lines like "Loading the image ... violates the following Content Security Policy directive". Accessories from an existing model alone logged 13 blocked pictures and 2 blocked videos.

Why it happened

The docs link their media straight to Roblox's asset host, prod.docsiteassets.roblox.com. Nothing is mirrored. But the site's Content Security Policy only allowed itself, Roblox's avatar CDN, YouTube thumbnails and the content CDN, so the browser refused everything else.

The narrow fix

I allowed that one host in img-src and media-src only. Scripts, requests, frames and forms are not opened to it, so the change adds no way to run code from that host. The policy moved out of index.js into src/utils/content-security-policy.js, which also holds the one constant that names the host, shared by the importer and the policy.

Making sure it stays fixed

A policy like this tends to break silently the next time someone imports a page that points somewhere new. So there is now a test that reads every page in src/content and fails if one loads a picture, video or frame from a host the policy would block.

A few things are blocked on purpose, and the test lists each with its reason: four placeholder pictures from via.placeholder.com on the education templates page, one picture from luau.org, and one malformed link.

I checked before and after in a real headless Edge against the running app. Before, 13 pictures and 2 videos were blocked with 15 console errors. After, none were blocked, all 13 pictures showed and both videos loaded.