briefroom CDN Policy

✅ Allowed CDNs (7 origins)

These CDNs are allowed from briefroom delivery domains (judge #45-D + sub-judgement 4):

• jsDelivr — https://cdn.jsdelivr.net/npm/... ✅
• cdnjs — https://cdnjs.cloudflare.com/ajax/libs/... ✅
• unpkg — https://unpkg.com/... ✅
• esm.sh — https://esm.sh/... ✅
• Google Fonts (CSS) — https://fonts.googleapis.com/css?... ✅
• Google Fonts (file) — https://fonts.gstatic.com/s/... ✅
• Tailwind Play CDN — https://cdn.tailwindcss.com ⚠️ (does not work, see below)

Recommended approach 1: Relative bundled paths (most reliable)

Resistant to CDN outages and spec changes, ideal for long-term storage.

<!-- ✅ Tailwind bundle (npx tailwindcss で生成した static CSS) -->
<link href="./styles.css" rel="stylesheet">

<!-- ✅ フォントを同梱 -->
<link href="./fonts/inter.woff2" rel="preload" as="font" type="font/woff2" crossorigin>
<style>
  @font-face {
    font-family: 'Inter';
    src: url('./fonts/inter.woff2') format('woff2');
  }
</style>

<!-- ✅ バンドラで build した相対パス JS -->
<script src="./app.js" type="module"></script>

Quick Start: use Tailwind as a relative path

1. Locally run npx tailwindcss -i src/input.css -o styles.css --minify
2. Place the generated styles.css in the same folder as your HTML
3. <link href="./styles.css" rel="stylesheet"> to include it
4. Zip the folder and upload it to briefroom

Recommended approach 2: Via allowed CDNs (simple, CDN-dependent)

For quick demos / mockups:

<!-- ✅ Tailwind v3 (jsdelivr 経由、CSS のみ) -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.4.17/dist/tailwind.min.css" rel="stylesheet">

<!-- ✅ Tailwind v4 (jsdelivr 経由、JIT) -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<!-- ✅ Vue 3 (jsdelivr 経由) -->
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>

<!-- ✅ Alpine.js (jsdelivr 経由) -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>

<!-- ✅ React + ReactDOM (esm.sh 経由) -->
<script type="module">
  import React from 'https://esm.sh/react@18';
  import ReactDOM from 'https://esm.sh/react-dom@18/client';
</script>

<!-- ✅ Google Fonts (Inter family) -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

<!-- ✅ Font Awesome (cdnjs 経由) -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">

Prompt templates for AI

Build HTML for briefroom. For Tailwind CSS, use `https://cdn.jsdelivr.net/npm/tailwindcss@3.4.17/dist/tailwind.min.css` via `<link rel="stylesheet">` — do not use `cdn.tailwindcss.com` (returns 503 from briefroom domains). For fonts, Google Fonts `https://fonts.googleapis.com/...` is allowed, or use system-ui. Other JS libs via jsdelivr / cdnjs / unpkg / esm.sh are allowed.

Output as a single self-contained HTML folder for briefroom. For Tailwind CSS, use https://cdn.jsdelivr.net/npm/tailwindcss@3.4.17/dist/tailwind.min.css via <link rel="stylesheet"> — do not use cdn.tailwindcss.com (it returns 503 from briefroom domains). For other JS libs, jsdelivr / cdnjs / unpkg / esm.sh are allowed. Google Fonts are allowed.

This code uses Tailwind CSS via `cdn.tailwindcss.com`, which does not work on briefroom (Tailwind returns 503). Please rewrite it as:

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.4.17/dist/tailwind.min.css" rel="stylesheet">

Detection scope + warning behavior

briefroom detects external CDN references in 4 places in your entry HTML and shows them in the warning panel:

• <link rel="stylesheet" href="https://...">
• <script src="https://..."></script>
• <style>@import url("https://...")</style>
• style="background:url(https://...)"

Of the URLs shown in the warning panel:

• 7 allowed CDNs → actually work (warning is informational)
• Others → blocked (do not work, must rewrite)
• Tailwind Play CDN → CSP-allowed but rejected by Tailwind with 503 (warning is also actionable, must rewrite)