Dropli で公開したページには、閲覧者を守るためのセキュリティポリシー （Content Security Policy）が自動で付与されます。外部リソースは 信頼できる主要 CDN と Google Fonts に限って利用できます。 一覧にないホストのスクリプト・CSS は読み込めません。
以下のホストは、スクリプト（<script>）・スタイルシート
（<link rel="stylesheet">）・フォント・
fetch() による取得のすべてで利用できます。
| ホスト | 内容 | 代表的な用途 |
|---|---|---|
cdn.jsdelivr.net | jsDelivr（npm / GitHub 配信） | Chart.js、Bootstrap、各種 npm パッケージ |
unpkg.com | UNPKG（npm 配信） | React、Vue などの npm パッケージ |
cdnjs.cloudflare.com | cdnjs（Cloudflare） | Font Awesome、Lodash などの OSS ライブラリ |
esm.sh | esm.sh（ES Modules 配信） | import でのモジュール読み込み |
code.jquery.com | jQuery 公式 CDN | jQuery 本体・プラグイン |
cdn.tailwindcss.com | Tailwind CSS（Play CDN） | ビルドなしで Tailwind を使う |
Google Fonts はホストが 2 つに分かれており、どちらも許可しています。
| ホスト | 内容 |
|---|---|
fonts.googleapis.com | フォント定義の CSS（<link rel="stylesheet"> で読み込む側） |
fonts.gstatic.com | フォントファイル本体（CSS から自動的に参照される側） |
アップロードする HTML にそのまま書くだけで動きます。
<!-- Google Fonts --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet"> <!-- ライブラリを CDN から読み込む --> <script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"> <!-- ES Modules として import する --> <script type="module"> import confetti from "https://esm.sh/canvas-confetti@1"; </script>
| 内容 | |
|---|---|
| できる | 上記の信頼 CDN・Google Fonts からのスクリプト / CSS / フォント読み込み |
| できる | 画像の読み込み（任意の https: ホストと data: URI からの参照） |
| できる | ページ内のインラインの <script> / <style> |
| できる | 同一ページ内（__data/… を含む）と信頼 CDN への fetch() |
| できない | 一覧にないホストからのスクリプト / CSS / フォントの読み込み |
| できない | 外部ホストへのフォーム送信（form-action は自ページのみ） |
| できない | 一覧にない外部 API への fetch() / XHR、他サイトからの iframe 埋め込み |
| できない | 画像やその他バイナリファイルを Dropli 上に保存するアップロード（アップロードできるのは HTML / CSS / JS などのテキスト系ファイルのみ。外部ホストからの参照は上記のとおり可） |
data: URI から参照すればページ内にそのまま表示できます）。