From 05d26e5e8b39456793beabd69b4aa87d4222f563 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sakku=20=F0=9F=A6=89?= <64152685+Yusaku01@users.noreply.github.com> Date: Thu, 3 Sep 2026 18:45:35 +0900 Subject: [PATCH 1/2] i18n(ja): add `reference/configuration-reference.mdx` --- .../ja/reference/configuration-reference.mdx | 3082 +++++++++++++++++ 1 file changed, 3082 insertions(+) create mode 100644 src/content/docs/ja/reference/configuration-reference.mdx diff --git a/src/content/docs/ja/reference/configuration-reference.mdx b/src/content/docs/ja/reference/configuration-reference.mdx new file mode 100644 index 0000000000000..416f8c3bc2b86 --- /dev/null +++ b/src/content/docs/ja/reference/configuration-reference.mdx @@ -0,0 +1,3082 @@ +--- +title: 設定リファレンス +i18nReady: true +githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/types/public/config.ts +--- + +import Since from '~/components/Since.astro' + +次のリファレンスでは、Astroでサポートされるすべての設定オプションを説明します。Astroの設定について詳しくは、[Astroの設定](/ja/guides/configuring-astro/)ガイドを参照してください。 + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config' + +export default defineConfig({ + // ここに設定オプションを記述します... +}) +``` +## トップレベルのオプション + + +### site + +

+ +**型:** `string` +

+ +デプロイ後の最終的なURLです。Astroはこの完全なURLを使用して、最終ビルドでサイトマップと正規URLを生成します。Astroを最大限に活用するため、このオプションを設定することを強く推奨します。 + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + site: 'https://www.my-site.dev' +}); +``` + +### base + +

+ +**型:** `string` +

+ +デプロイ先のベースパスです。Astroは、開発時と本番ビルドの両方で、このパスをページとアセットのルートとして使用します。 + +次の例では、`astro dev`によって`/docs`でサーバーが起動します。 + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + base: '/docs' +}); +``` + +このオプションを使用する場合、すべての静的アセットのインポートとURLの先頭にベースパスを追加する必要があります。この値には`import.meta.env.BASE_URL`からアクセスできます。 + +`import.meta.env.BASE_URL`の値は、`base`に設定した値にかかわらず、`trailingSlash`の設定によって決まります。 + +`trailingSlash: "always"`を設定すると、末尾のスラッシュが常に含まれます。`trailingSlash: "never"`を設定すると、`base`にスラッシュが含まれていても、`BASE_URL`には末尾のスラッシュが含まれません。 + +また、Astroは設定された`config.base`の値を内部で処理してからインテグレーションで利用できるようにします。インテグレーションが読み取る`config.base`の値も、同様に`trailingSlash`の設定によって決まります。 + +次の例では、処理後の`import.meta.env.BASE_URL`と`config.base`の値はどちらも`/docs`になります。 +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + base: '/docs/', + trailingSlash: "never" +}); +``` + +次の例では、処理後の`import.meta.env.BASE_URL`と`config.base`の値はどちらも`/docs/`になります。 + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + base: '/docs', + trailingSlash: "always" +}); +``` + +### trailingSlash + +

+ +**型:** `'always' | 'never' | 'ignore'`
+**デフォルト:** `'ignore'` +

+ +開発サーバーとオンデマンドでレンダリングされるページで、末尾のスラッシュに対するルートの照合動作を設定します。次のオプションから選択します。 + - `'ignore'` - 末尾に「/」があるかどうかにかかわらずURLを照合します。「/about」と「/about/」のリクエストは、どちらも同じルートに一致します。 + - `'always'` - 末尾にスラッシュを含むURL(「/about/」など)だけを照合します。本番環境では、末尾にスラッシュがないオンデマンドレンダリングURLへのリクエストは、正しいURLへリダイレクトされます。開発環境では、`always`が設定されていることを知らせる警告ページが表示されます。 + - `'never'` - 末尾にスラッシュを含まないURL(「/about」など)だけを照合します。本番環境では、末尾にスラッシュがあるオンデマンドレンダリングURLへのリクエストは、正しいURLへリダイレクトされます。開発環境では、`never`が設定されていることを知らせる警告ページが表示されます。 + +本番環境でGETリクエストがリダイレクトされる場合は、301(恒久的)リダイレクトになります。それ以外のリクエストメソッドでは、308(恒久的で、リクエストメソッドを維持)リダイレクトになります。 + +事前レンダリングされたページの末尾のスラッシュはホスティングプラットフォームによって処理されるため、選択した設定が反映されない場合があります。 +詳しくは、ホスティングプラットフォームのドキュメントを参照してください。現時点では、この用途にAstroの[リダイレクト](#redirects)は使用できません。 + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + // 例:開発時に末尾のスラッシュを必須にする + trailingSlash: 'always' +}); +``` +**関連項目:** +- build.format + +### redirects + +

+ +**型:** `Record`
+**デフォルト:** `{}`
+ +

+ +一致させるルートをキー、リダイレクト先のパスを値として、リダイレクトの対応関係を指定します。 + +静的ルートと動的ルートの両方をリダイレクトできますが、同じ種類のルート間に限られます。 +たとえば、`'/article': '/blog/[...slug]'`というリダイレクトは設定できません。 + + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + redirects: { + '/old': '/new', + '/blog/[...slug]': '/articles/[...slug]', + '/about': 'https://example.com/about', + '/news': { + status: 302, + destination: 'https://example.com/news' + }, + // '/product1/', '/product1' // この指定はサポートされていません + } +}); +``` + + +アダプターがインストールされていない静的生成サイトでは、[``タグ](https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/meta#http-equiv)を使用したクライアントリダイレクトが生成され、ステータスコードはサポートされません。 + +SSRを使用する場合や、`output: static`モードで静的アダプターを使用する場合は、ステータスコードがサポートされます。 +Astroは、リダイレクトされたGETリクエストをステータス`301`で返し、それ以外のリクエストメソッドにはステータス`308`を使用します。 + +リダイレクト設定にオブジェクトを指定すると、[リダイレクトのステータスコード](https://developer.mozilla.org/ja/docs/Web/HTTP/Reference/Status#リダイレクトメッセージ)をカスタマイズできます。 + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + redirects: { + '/other': { + status: 302, + destination: '/place', + }, + } +}); +``` + +### output + +

+ +**型:** `'static' | 'server'`
+**デフォルト:** `'static'` +

+ +ビルドの出力先を指定します。 + +- `'static'` - デフォルトですべてのページを事前レンダリングします。事前レンダリングを無効にするページがなければ、完全に静的なサイトを出力します。 +- `'server'` - デフォルトですべてのページにサーバーサイドレンダリング(SSR)を使用し、常にサーバーレンダリングされたサイトを出力します。 + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + output: 'static' +}); +``` +**関連項目:** +- adapter + +### adapter + +

+ +**型:** `AstroIntegration` +

+ +ビルドアダプターを使用して、任意のサーバー、サーバーレス、エッジホストへデプロイします。Astro公式アダプター([Cloudflare](/ja/guides/integrations-guide/cloudflare/)、[Netlify](/ja/guides/integrations-guide/netlify/)、[Node.js](/ja/guides/integrations-guide/node/)、[Vercel](/ja/guides/integrations-guide/vercel/))のいずれかをインポートするか、[コミュニティアダプター](https://astro.build/integrations/2/?search=&categories%5B%5D=adapters)を探して、Astroプロジェクトでオンデマンドレンダリングを有効にします。 + +Astroのサーバーレンダリングオプションについて詳しくは、[オンデマンドレンダリングガイド](/ja/guides/on-demand-rendering/)を参照してください。 + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; +import netlify from '@astrojs/netlify'; + +export default defineConfig({ + // 例:Netlifyへのサーバーレスデプロイ用にビルド + adapter: netlify(), +}); +``` +**関連項目:** +- output + +### integrations + +

+ +**型:** `AstroIntegration[]` +

+ +独自のインテグレーションでAstroを拡張します。インテグレーションを使用すると、フレームワークのサポート(Solid.jsなど)、新機能(サイトマップなど)、新しいライブラリ(Partytownなど)をまとめて追加できます。 + +Astroインテグレーションを使い始める方法については、[インテグレーションガイド](/ja/guides/integrations/)を参照してください。 + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; +import react from '@astrojs/react'; +import mdx from '@astrojs/mdx'; + +export default defineConfig({ + // 例:AstroにReactとMDXのサポートを追加 + integrations: [react(), mdx()] +}); +``` + +### root + +

+ +**型:** `string`
+**CLI:** `--root`
+**デフォルト:** `"."`(現在の作業ディレクトリ) +

+ +このオプションは、プロジェクトのルートディレクトリ以外で`astro` CLIコマンドを実行する場合にのみ指定してください。Astroは設定ファイルを見つける前にプロジェクトルートを知る必要があるため、通常、このオプションはAstro設定ファイルではなくCLIから指定します。 + +相対パス(`--root: './my-project'`など)を指定すると、Astroは現在の作業ディレクトリを基準に解決します。 + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + root: './my-project-directory' +}); +``` + +次の例では、CLIを使用してルートディレクトリを設定します。 + +```bash +astro build --root ./my-project-directory +``` + +### srcDir + +

+ +**型:** `string`
+**デフォルト:** `"./src"` +

+ +Astroがサイトを読み込むディレクトリを設定します。 + +値には、ファイルシステムの絶対パスまたはプロジェクトルートからの相対パスを指定できます。 + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + srcDir: './www' +}); +``` + +### publicDir + +

+ +**型:** `string`
+**デフォルト:** `"./public"` +

+ +静的アセットのディレクトリを設定します。このディレクトリ内のファイルは、開発時には`/`で配信され、ビルド時にはビルドディレクトリへコピーされます。これらのファイルは変換やバンドルを行わず、常にそのまま配信またはコピーされます。 + +値には、ファイルシステムの絶対パスまたはプロジェクトルートからの相対パスを指定できます。 + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + publicDir: './my-custom-publicDir-directory' +}); +``` + +### outDir + +

+ +**型:** `string`
+**デフォルト:** `"./dist"` +

+ +`astro build`が最終ビルドを書き込むディレクトリを設定します。 + +値には、ファイルシステムの絶対パスまたはプロジェクトルートからの相対パスを指定できます。 + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + outDir: './my-custom-build-directory' +}); +``` +**関連項目:** +- build.server + +### cacheDir + +

+ +**型:** `string`
+**デフォルト:** `"./node_modules/.astro"` +

+ +ビルド成果物をキャッシュするディレクトリを設定します。このディレクトリ内のファイルは、後続のビルド時間を短縮するために使用されます。 + +値には、ファイルシステムの絶対パスまたはプロジェクトルートからの相対パスを指定できます。 + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + cacheDir: './my-custom-cache-directory' +}); +``` + +### compressHTML + +

+ +**型:** `boolean | "jsx"`
+**デフォルト:** `'jsx'` +

+ +AstroがHTML内の空白を処理する方法を制御します。これは開発モードと最終ビルドの出力の両方に影響します。 + +v7.0以降、AstroはデフォルトでReactなどのフレームワークが使用するJSXの空白ルールを適用します。要素の前後にある空白と改行を削除し、複数行のテキストを1行にまとめ、1行内の空白(2つのインライン要素間のスペースなど)を保持します。本来削除される空白を残すには、`{" "}`のような構文でソースに明示的に含めてください。 + +このオプションを`true`に設定すると、`.astro`コンポーネントから改行を含む空白を、情報を失わない範囲で削除します。HTMLの見た目を維持するため、必要な空白は保持される場合があります。 + +このオプションを`false`に設定すると、HTML圧縮が無効になり、すべての空白が保持されます。 + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + compressHTML: true + // or: + // compressHTML: false +}); +``` + +### scopedStyleStrategy + +

+ +**型:** `'where' | 'class' | 'attribute'`
+**デフォルト:** `'attribute'`
+ +

+ +Astroコンポーネント内のスタイルをスコープ化する方法を指定します。次のオプションから選択します。 + - `'where'` - `:where`セレクターを使用し、詳細度を増加させません。 + - `'class'` - クラスベースのセレクターを使用し、詳細度を1増加させます。 + - `'attribute'` - `data-`属性を使用し、詳細度を1増加させます。 + +`'class'`は、Astroコンポーネント内の要素セレクターでグローバルスタイルのデフォルト(グローバルスタイルシートなど)を確実に上書きしたい場合に便利です。 +`'where'`では詳細度をより細かく制御できますが、適用するセレクターを制御するには、より詳細度の高いセレクターやレイヤーなどのツールを使用する必要があります。 +`'attribute'`は、要素の`class`属性を操作していて、独自のスタイルロジックとAstroのスタイル適用との競合を避ける必要がある場合に便利です。 + +### prerenderConflictBehavior + +

+ +**型:** `'error' | 'warn' | 'ignore'`
+**デフォルト:** `'warn'`
+ +

+ +2つのルートが同じ事前レンダリングURLを生成した場合のデフォルト動作を決めます。 +- `error`:ビルドを失敗させてエラーを表示し、競合の解決を求めます。 +- `warn`(デフォルト):競合が発生したときに警告を記録しますが、もっとも優先度の高いルートを使用してビルドします。 +- `ignore`:競合が発生しても警告せず、もっとも優先度の高いルートを使用してビルドします。 + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + prerenderConflictBehavior: 'error' +}); +``` + +### vite + +

+ +**型:** `ViteUserConfig` +

+ +追加の設定オプションをViteへ渡します。必要な高度な設定をAstroがサポートしていない場合に便利です。 + +`vite`設定オブジェクトの完全なドキュメントは、[vite.dev](https://ja.vite.dev/config/)で確認できます。 + +#### 例 + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + vite: { + ssr: { + // 例:必要に応じて、問題のあるパッケージのSSR処理を強制的にスキップ + external: ['broken-npm-package'], + } + } +}); +``` + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + vite: { + // 例:独自のViteプラグインをAstroプロジェクトへ直接追加 + plugins: [myPlugin()], + } +}); +``` + +### security + +

+ +**型:** `Record<"checkOrigin", boolean> | undefined`
+**デフォルト:** `{checkOrigin: true}`
+ +

+ +AstroのWebサイトでセキュリティ対策を有効にします。 + +これらの機能は、`server`モードでオンデマンドレンダリング(SSR)されるページ、または`static`モードで事前レンダリングを無効にしたページでのみ利用できます。 + +デフォルトでは、Astroはオンデマンドレンダリングされるページへの各リクエストについて、「origin」ヘッダーが送信先URLと一致することを自動的に確認します。`checkOrigin`を`false`に設定すると、この動作を無効にできます。 + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + output: "server", + security: { + checkOrigin: false + } +}); +``` + +#### security.checkOrigin + +

+ +**型:** `boolean`
+**デフォルト:** `true`
+ +

+ +すべてのモダンブラウザーによって自動的に渡される「origin」ヘッダーが、各`Request`の送信先URLと一致することを確認します。これは、クロスサイトリクエストフォージェリ(CSRF)に対する保護に使用されます。 + +「origin」の確認はオンデマンドレンダリングされるページでのみ実行されます。また、次の`content-type`ヘッダーのいずれかを持つ`POST`、`PATCH`、`DELETE`、`PUT`リクエストだけが対象です:`'application/x-www-form-urlencoded'`、`'multipart/form-data'`、`'text/plain'`。 + +「origin」ヘッダーがリクエストの`pathname`と一致しない場合、Astroは403ステータスコードを返し、ページをレンダリングしません。 + +#### security.allowedDomains + +

+ +**型:** `Array`
+**デフォルト:** `[]`
+ +

+ +SSRを使用する際に、受信リクエストで許可するホストパターンの一覧を定義します。設定すると、Astroはセキュリティのため`X-Forwarded-Host`ヘッダーをこれらのパターンと照合します。許可されたパターンに一致しない場合、このヘッダーは無視され、代わりにリクエストの元のホストが使用されます。 + +これにより、攻撃者が細工した`X-Forwarded-Host`ヘッダーを送信して`Astro.url`の値を操作する、ホストヘッダーインジェクション攻撃を防ぎます。 + +各パターンには`protocol`、`hostname`、`port`を指定できます。指定された項目はすべて検証されます。 +パターンではワイルドカードを使用して、ホスト名を柔軟に照合できます。 + +- `*.example.com` - 1階層のサブドメインだけに一致します(たとえば`sub.example.com`には一致しますが、`deep.sub.example.com`には一致しません)。 +- `**.example.com` - 任意の深さのサブドメインに一致します(たとえば`sub.example.com`と`deep.sub.example.com`の両方)。 + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + security: { + // 例:https上のexample.comの任意のサブドメインを許可 + allowedDomains: [ + { + hostname: '**.example.com', + protocol: 'https' + }, + { + hostname: 'staging.myapp.com', + protocol: 'https', + port: '443' + } + ] + } +}); +``` + +信頼できるリバースプロキシの背後にあり、動的ドメインを使用するアプリケーションなど、特定の状況ではすべてのドメインを許可する必要がある場合があります。その場合は、空のオブジェクトを使用します。 + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + security: { + // 任意のドメインを許可(必要な場合にのみ使用) + allowedDomains: [{}] + } +}); +``` + +設定しない場合、`X-Forwarded-Host`ヘッダーは信頼されず、無視されます。 + +#### security.actionBodySizeLimit + +

+ +**型:** `number`
+**デフォルト:** `1048576`(1 MB)
+ +

+ +アクションのリクエスト本文に許可する最大サイズをバイト単位で設定します。 + +不正利用を防ぐため、アクションのリクエスト本文はデフォルトで1 MB(1048576バイト)に制限されます。ファイルアップロードを処理する場合など、アクションがより大きなペイロードを受け取る必要がある場合は、この上限を増やせます。 + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + security: { + actionBodySizeLimit: 10 * 1024 * 1024 // 10 MB + } +}); +``` + +#### security.serverIslandBodySizeLimit + +

+ +**型:** `number`
+**デフォルト:** `1048576`(1 MB)
+ +

+ +サーバーアイランドのリクエスト本文に許可する最大サイズをバイト単位で設定します。リクエスト本文には、アイランドコンポーネントへ渡される暗号化されたプロパティとスロットHTMLが含まれます。 + +不正利用を防ぐため、サーバーアイランドのリクエスト本文はデフォルトで1 MB(1048576バイト)に制限されます。サーバーアイランドがより大きなペイロードを受け取る必要がある場合は、この上限を増やせます。 + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + security: { + serverIslandBodySizeLimit: 10 * 1024 * 1024 // 10 MB + } +}); +``` + +#### security.csp + +

+ +**型:** `boolean | object`
+**デフォルト:** `false`
+ +

+ +[コンテンツセキュリティポリシー(CSP)](https://developer.mozilla.org/ja/docs/Web/HTTP/Guides/CSP)のサポートを有効にします。ドキュメントが読み込めるリソースを制御して、特定の種類のセキュリティ脅威を最小限に抑えます。これにより、[クロスサイトスクリプティング(XSS)](https://developer.mozilla.org/ja/docs/Glossary/Cross-site_scripting)攻撃に対する保護が強化されます。 + +この機能を有効にすると、Astroが処理・バンドルするスクリプトとスタイルの取り扱いに、デフォルトで追加のセキュリティが適用されます。また、これらやその他のコンテンツタイプをさらに設定できます。 + +この機能には、次の制限があります。 +- 外部スクリプトと外部スタイルはそのままではサポートされませんが、[独自のハッシュを指定](#securitycspscriptdirectivehashes)できます。 +- ``を使用する[Astroのビュートランジション](/ja/guides/view-transitions/)はサポートされません。AstroによるネイティブのView Transitions APIとNavigation APIの拡張機能を使用していない場合は、代わりに[ブラウザー標準のView Transition APIへの移行](https://events-3bg.pages.dev/jotter/astro-view-transitions/)を検討できます。 +- 現在、Shikiはサポートされていません。Shikiの関数はインラインスタイルを使用する設計であり、AstroのCSP実装では動作しません。プロジェクトでCSPとシンタックスハイライトの両方が必要な場合は、[``の使用](/ja/guides/syntax-highlighting/#prism-)を検討してください。 +- ディレクティブのリソースに`'unsafe-inline'`が含まれる場合、Astroはそのディレクティブにハッシュを出力しません。CSP仕様では、同じディレクティブにハッシュまたはnonceがあるとブラウザーは`'unsafe-inline'`を無視するため、Astroは`'unsafe-inline'`の動作を維持するためにハッシュを抑制します。これにより、そのディレクティブのセキュリティは`'unsafe-inline'`と同じ水準まで低下することに注意してください。 + +:::note +Vite開発サーバーの性質上、この機能は`dev`モードではサポートされません。代わりに、Astroプロジェクトで`build`と`preview`を使用してテストできます。 +::: + +有効にすると、Astroは各ページの``要素内に``要素を追加します。 +この要素には`http-equiv="content-security-policy"`属性が設定され、`content`属性にはページで使用されるスクリプトとスタイルに基づいて、`script-src`と`style-src`の[ディレクティブ](#securitycspdirectives)が設定されます。 + +```html + + + + +``` + +追加のオプションを含む設定オブジェクトでこの機能を有効にすると、``要素をさらにカスタマイズできます。 + +##### security.csp.algorithm + +

+ +**型:** `"SHA-256" | "SHA-384" | "SHA-512"`
+**デフォルト:** `'SHA-256'`
+ +

+ +Astroが出力するスタイルとスクリプトのハッシュを生成する際に使用する[ハッシュ関数](https://developer.mozilla.org/ja/docs/Glossary/Hash_function)です。 + +```js title="astro.config.mjs" +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + security: { + csp: { + algorithm: 'SHA-512' + } + } +}); +``` + +##### security.csp.directives + +

+ +**型:** `Array`
+**デフォルト:** `[]`
+ +

+ +特定のコンテンツタイプに有効なソースを定義する[CSPディレクティブ](https://content-security-policy.com/#directive)の一覧です。デフォルトで含まれる`script-src`と`style-src`以外のディレクティブを指定し、すべてのページへ追加します。 + +```js title="astro.config.mjs" +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + security: { + csp: { + directives: [ + "default-src 'self'", + "img-src 'self' https://images.cdn.example.com" + ] + } + } +}); +``` +ビルド後、``要素の`content`値には、Astroのデフォルトディレクティブとともに指定したディレクティブが追加されます。 + +```html + +``` + +##### security.csp.styleDirective + +

+ +**型:** `CspStyleDirective`
+**デフォルト:** `undefined`
+ +

+ +[`resources`](#securitycspstyledirectiveresources)プロパティで`style-src`ディレクティブのデフォルトソースを上書きしたり、レンダリングする追加の[ハッシュ](#securitycspstyledirectivehashes)を指定したりできる設定オブジェクトです。 + +###### security.csp.styleDirective.hashes + +

+ +**型:** `Array`
+**デフォルト:** `[]`
+ +

+ +レンダリングする追加のハッシュの一覧です。 + +`sha384-`、`sha512-`、`sha256-`のいずれかで始まるハッシュを指定する必要があります。それ以外の値は検証エラーになります。これらのハッシュはすべてのページへ追加されます。 + +Astro v7.1以降、各エントリーには文字列またはオブジェクトを指定できます。オブジェクトでは、`kind`フィールドを使用してハッシュのスコープを変更できます。`kind`フィールドには次の値を指定できます。 +- `"element"`:ハッシュを`style-src-elem`ディレクティブに保存します。 +- `"attribute"`:ハッシュを`style-src-attr`ディレクティブに保存します。 +- `"default"`:ハッシュを`style-src`ディレクティブに保存します。 + +`"default"`ハッシュは`style-src`に追加されます。`kind: "element"`を使用した場合は、代わりに`style-src-elem`へ追加されます。`style-src-attr`へ追加されることはありません。Astroが生成するハッシュにも同じルールが適用されます。 + +```js title="astro.config.mjs" +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + security: { + csp: { + styleDirective: { + hashes: [ + "sha384-styleHash", + "sha512-styleHash", + "sha256-styleHash" + ] + } + } + } +}); +``` + +ビルド後、``要素の`style-src`ディレクティブには、追加したハッシュが含まれます。 + +```html + +``` + +ハッシュのスコープを`"element"`にすると、代わりに`style-src-elem`へ保存されます。Astroが生成するハッシュも同じ場所へ移動します。 + +```js title="astro.config.mjs" +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + security: { + csp: { + styleDirective: { + hashes: [{ hash: "sha256-styleHash", kind: "element" }] + } + } + } +}); +``` + +ビルド後、``要素ではハッシュが`style-src`ではなく`style-src-elem`ディレクティブに含まれます。 + +```html + +``` + +###### security.csp.styleDirective.resources + +

+ +**型:** `Array`
+**デフォルト:** `[]`
+ +

+ +Astroのデフォルトソースを上書きする、`style-src`ディレクティブの有効なソース一覧です。デフォルトでは`'self'`が含まれないため、保持する場合はこの一覧に追加する必要があります。これらのリソースはすべてのページへ追加されます。 + +Astro v7.1以降、各エントリーには文字列またはオブジェクトを指定できます。オブジェクトでは、`kind`フィールドを使用してソースのスコープを変更できます。`kind`フィールドには次の値を指定できます。 +- `"element"`:ソースを`style-src-elem`ディレクティブに保存します。 +- `"attribute"`:ソースを`style-src-attr`ディレクティブに保存します。 +- `"default"`:ソースを`style-src`ディレクティブに保存します。 + +`"attribute"`ソースには`'none'`、`'unsafe-hashes'`、`'unsafe-inline'`、`'report-sample'`のいずれかを指定する必要があります。`'unsafe-hashes'`は`"element"`と組み合わせて使用できません。一般的な用途として、`{ resource: "'unsafe-inline'", kind: "attribute" }`を指定して、`define:vars`やShikiなどによるインライン`style`属性を許可できます。 + +ハッシュとは異なり、`"default"`ソースは移動せず、常に`style-src`だけに残ります。「default」と特定のリソース(`"element"`や`"attribute"`など)が混在する場合、Astroは警告を出力します。 + +```js title="astro.config.mjs" +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + security: { + csp: { + styleDirective: { + resources: [ + "'self'", + "https://styles.cdn.example.com" + ] + } + } + } +}); +``` + +ビルド後、``要素の`style-src`ディレクティブには、デフォルトの代わりに指定したソースが適用されます。 + +```html + + + +``` + +`"default"`ソースは、より具体的なディレクティブへコピーされません。次の例では、`"default"`ソースと`"element"`ソースが別々のディレクティブへレンダリングされます。 + +```js title="astro.config.mjs" +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + security: { + csp: { + styleDirective: { + resources: [ + "https://styles.cdn.example.com", + { resource: "https://elements.cdn.example.com", kind: "element" } + ] + } + } + } +}); +``` + +ビルド後、``要素では`https://styles.cdn.example.com`が`style-src`だけに保持されます。この値は`style-src-elem`には追加されず、`