security: add SRI, remove Tailwind CDN, restrict CORS

- Add SRI hash to Alpine.js (integrity + crossorigin)
- Remove Tailwind CDN, use prebuilt style.css only
- Add CSS variables for terminal theme colors
- Restrict CORS to https://hosting.anvil.it.com

Performance: ~500ms LCP improvement (no JIT compilation)
Security: CDN tampering protection, API access restriction

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
kappa
2026-01-30 09:12:47 +09:00
parent 4e4a3d57ea
commit b14d93be9d
2 changed files with 47 additions and 29 deletions

View File

@@ -29,34 +29,50 @@
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#3fb950",
"background-dark": "#0d1117",
"terminal-bg": "#010409",
"terminal-border": "#30363d",
"terminal-text": "#c9d1d9",
"terminal-muted": "#8b949e",
"terminal-cyan": "#58a6ff",
"terminal-amber": "#d29922",
"terminal-red": "#ff7b72",
"terminal-blue": "#79c0ff",
"terminal-purple": "#d2a8ff",
},
fontFamily: {
"display": ["Space Grotesk", "sans-serif"],
"mono": ["Fira Code", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "monospace"],
},
},
},
<!-- Tailwind CSS (prebuilt) -->
<link href="style.css" rel="stylesheet"/>
<style>
/* Custom colors for terminal theme */
:root {
--color-primary: #3fb950;
--color-background-dark: #0d1117;
--color-terminal-bg: #010409;
--color-terminal-border: #30363d;
--color-terminal-text: #c9d1d9;
--color-terminal-muted: #8b949e;
--color-terminal-cyan: #58a6ff;
--color-terminal-amber: #d29922;
--color-terminal-red: #ff7b72;
--color-terminal-blue: #79c0ff;
--color-terminal-purple: #d2a8ff;
}
</script>
.bg-background-dark { background-color: var(--color-background-dark); }
.bg-terminal-bg { background-color: var(--color-terminal-bg); }
.bg-terminal-bg\/50 { background-color: rgba(1, 4, 9, 0.5); }
.border-terminal-border { border-color: var(--color-terminal-border); }
.border-terminal-border\/50 { border-color: rgba(48, 54, 61, 0.5); }
.border-terminal-border\/20 { border-color: rgba(48, 54, 61, 0.2); }
.text-terminal-text { color: var(--color-terminal-text); }
.text-terminal-muted { color: var(--color-terminal-muted); }
.text-terminal-cyan { color: var(--color-terminal-cyan); }
.text-terminal-amber { color: var(--color-terminal-amber); }
.text-terminal-red { color: var(--color-terminal-red); }
.text-terminal-blue { color: var(--color-terminal-blue); }
.text-terminal-purple { color: var(--color-terminal-purple); }
.text-primary { color: var(--color-primary); }
.bg-primary { background-color: var(--color-primary); }
.border-primary { border-color: var(--color-primary); }
.border-primary\/50 { border-color: rgba(63, 185, 80, 0.5); }
.hover\:text-primary:hover { color: var(--color-primary); }
.hover\:border-primary\/50:hover { border-color: rgba(63, 185, 80, 0.5); }
.selection\:bg-terminal-cyan::selection { background-color: var(--color-terminal-cyan); }
.selection\:text-background-dark::selection { color: var(--color-background-dark); }
/* Font families */
.font-display { font-family: "Space Grotesk", sans-serif; }
.font-mono { font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
</style>
<style>
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0d1117; }
@@ -372,7 +388,9 @@
</div>
<!-- Alpine.js -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.3/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.3/dist/cdn.min.js"
integrity="sha384-iZD2X8o1Zdq0HR5H/7oa8W30WS4No+zWCKUPD7fHRay9I1Gf+C4F8sVmw7zec1wW"
crossorigin="anonymous"></script>
<script>
function headlineRotator() {
return {