Stop shipping apps that render unstyled in dev - #1
Open
willtoth wants to merge 1 commit into
Open
Conversation
Astro computes the sha256 hashes that let a Content-Security-Policy permit inline <style>/<script> blocks only at build time. The dev server injects Tailwind's stylesheet inline for hot-reload, so those blocks carry no hash and `security.csp: true` blocked every one of them: `npm run dev` served a page with no styles applied at all, falling back to Times New Roman and blue links. Nothing caught it. `npm run check` builds for production, the Playwright webServer runs `npm run build && npm start`, and /health returns JSON -- so every gate tested a mode that was fine, while the only mode a person actually opens was broken. A live run of the create-hawk-app skill ended with the app declared "built and working" over a blank page. - astro.config.mjs: a `hawk-csp-off-in-dev` integration turns CSP off for `command === "dev"` only. Production still emits the full policy with hashes. - scripts/render-check.mjs + `npm run check:render`: probe the *running* server for this class of fault -- inline blocks a policy will block, stylesheets that do not arrive -- with no browser and no dependencies. - scripts/doctor.mjs: stop reporting the app's own dev server as a port conflict. It sent people hunting for a clash that was not there. Verified both ways: with `csp: true` restored, check:render exits 1 naming the blocked styles; with the fix, dev has no policy and production keeps 9 hashes. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KwyEjaCaTwhkRkTUMq9hep
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
security.csp: trueblanks every Hawk app innpm run dev.Astro computes the sha256 hashes that let a policy permit inline
<style>/<script>blocks only at build time. The dev server injects Tailwind's stylesheet inline for hot-reload, so those blocks carry no hash andstyle-src 'self'blocks all of them.document.styleSheetscomes back empty and the page falls back to Times New Roman and blue underlined links.Nothing caught it, because every gate tests production:
npm run checkastro buildwebServernpm run build && npm start/healthnpm run devis the one mode nothing tests and the only broken one — and it is what thecreate-hawk-appskill starts and hands to the user. A live run ended with the app declared "built and working" over a blank page, then spent ~40 minutes and asudo apt-getgetting a browser to find out why.Changes
astro.config.mjs— ahawk-csp-off-in-devintegration turns CSP off forcommand === "dev"only. Production is untouched.scripts/render-check.mjs+npm run check:render— probes the running server for this class of fault: inline blocks a policy will block, stylesheets that never arrive. No browser, no dependencies, uses built-infetch.scripts/doctor.mjs— stop reporting the app's own dev server as a port conflict. It sent people hunting for a clash that wasn't there.docs/ARCHITECTURE.md;AGENTS.mdnow points atcheck:renderfor anything that changes how a page looks.Verification
csp: truerestored,check:renderexits 1 and names the blocked styles.npm run checkgreen: 0 type errors, 4 tests, clean build.npm ci→npm run dev→check:renderpasses end to end.🤖 Generated with Claude Code
https://claude.ai/code/session_01KwyEjaCaTwhkRkTUMq9hep