diff --git a/.changeset/lovely-nights-stay.md b/.changeset/lovely-nights-stay.md
new file mode 100644
index 000000000000..358cfc16cc7d
--- /dev/null
+++ b/.changeset/lovely-nights-stay.md
@@ -0,0 +1,38 @@
+---
+'astro': minor
+---
+
+Adds support for the more specific CSP directives `script-src-elem`, `script-src-attr`, `style-src-elem`, and `style-src-attr` through a new `kind` option.
+
+Previously, [`CSP`](https://docs.astro.build/en/reference/configuration-reference/#securitycsp) was only scoped to generic `script-src`/`style-src` directives. Now each source or hash can be scoped to a narrower directive — for example, to allow inline `style` attributes (such as those from `define:vars` or Shiki) without loosening the policy for your `<style>` and `<link>` elements.
+
+#### Scoping sources and hashes in your config
+
+Each entry in `resources` and `hashes` can be an object with a `kind` property. Depending on whether you use `scriptDirective` or `styleDirective`, `"element"` targets `script-src-elem` or `style-src-elem`, `"attribute"` targets `script-src-attr` or `style-src-attr`, and `"default"` (the same as a bare string or hash) targets `script-src` or `style-src`.
+
+```js
+// astro.config.mjs
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  security: {
+    csp: {
+      scriptDirective: {
+        resources: [{ resource: 'https://cdn.example.com', kind: 'element' }],
+      },
+      styleDirective: {
+        resources: [{ resource: "'unsafe-inline'", kind: 'attribute' }],
+      },
+    },
+  },
+});
+```
+
+#### Scoping at runtime
+
+The same `kind` option is available on the runtime CSP API, where the existing methods now also accept an object:
+
+```js
+ctx.csp.insertScriptResource({ resource: 'https://cdn.example.com', kind: 'element' });
+ctx.csp.insertStyleResource({ resource: "'unsafe-inline'", kind: 'attribute' });
+```
diff --git a/packages/astro/src/core/app/types.ts b/packages/astro/src/core/app/types.ts
index cf1176df2cb1..57595349b0da 100644
--- a/packages/astro/src/core/app/types.ts
+++ b/packages/astro/src/core/app/types.ts
@@ -14,7 +14,7 @@ import type {
 	SSRResult,
 } from '../../types/public/internal.js';
 import type { SinglePageBuiltModule } from '../build/types.js';
-import type { CspDirective } from '../csp/config.js';
+import type { CspDirective, CspHashEntry, CspResourceEntry } from '../csp/config.js';
 import type {
 	AstroLoggerDestination,
 	AstroLoggerLevel,
@@ -170,15 +170,49 @@ export type SSRManifestI18n = {
 	domains: Record<string, string> | undefined;
 };
 
+/**
+ * The CSP section of the manifest. It mirrors the `security.csp` config: `directives` plus a
+ * `scriptDirective`/`styleDirective`, each holding `resources`/`hashes` entries that carry their
+ * `kind` (`default`/`element`/`attribute`). The `kind` is only interpreted at render time. Astro's
+ * generated hashes are appended to the relevant `hashes` array as `default`-kind entries.
+ */
 export type SSRManifestCSP = {
 	cspDestination: 'adapter' | 'meta' | 'header' | undefined;
 	algorithm: CspAlgorithm;
+	directives: CspDirective[];
+	/**
+	 * @deprecated Use {@linkcode scriptDirective} instead. Holds the `default`-kind `script-src`
+	 * hashes (the same values `scriptDirective.hashes` carries with `kind: "default"`).
+	 */
 	scriptHashes: string[];
+	/**
+	 * @deprecated Use {@linkcode scriptDirective} instead. Holds the `default`-kind `script-src`
+	 * resources.
+	 */
 	scriptResources: string[];
+	/**
+	 * @deprecated Use {@linkcode scriptDirective}'s `strictDynamic` instead.
+	 */
 	isStrictDynamic: boolean;
+	/**
+	 * @deprecated Use {@linkcode styleDirective} instead. Holds the `default`-kind `style-src`
+	 * hashes.
+	 */
 	styleHashes: string[];
+	/**
+	 * @deprecated Use {@linkcode styleDirective} instead. Holds the `default`-kind `style-src`
+	 * resources.
+	 */
 	styleResources: string[];
-	directives: CspDirective[];
+	scriptDirective: {
+		resources: CspResourceEntry[];
+		hashes: CspHashEntry[];
+		strictDynamic: boolean;
+	};
+	styleDirective: {
+		resources: CspResourceEntry[];
+		hashes: CspHashEntry[];
+	};
 };
 
 export interface SSRManifestSession extends BaseSessionConfig {
diff --git a/packages/astro/src/core/build/index.ts b/packages/astro/src/core/build/index.ts
index d7297bc188d3..a3e0177b4862 100644
--- a/packages/astro/src/core/build/index.ts
+++ b/packages/astro/src/core/build/index.ts
@@ -29,7 +29,7 @@ import { collectPagesData } from './page-data.js';
 import { viteBuild } from './static-build.js';
 import type { StaticBuildOptions } from './types.js';
 import { getTimeStat } from './util.js';
-import { warnIfCspWithShiki } from '../messages/runtime.js';
+import { warnIfCspResourceFallbackShadowing, warnIfCspWithShiki } from '../messages/runtime.js';
 
 interface BuildOptions {
 	/**
@@ -57,6 +57,7 @@ export default async function build(
 	telemetry.record(eventCliSession('build', userConfig));
 
 	warnIfCspWithShiki(astroConfig, logger);
+	warnIfCspResourceFallbackShadowing(astroConfig, logger);
 
 	const settings = await createSettings(
 		astroConfig,
diff --git a/packages/astro/src/core/build/plugins/plugin-manifest.ts b/packages/astro/src/core/build/plugins/plugin-manifest.ts
index 1e8b1da01b66..fa5db0093bf3 100644
--- a/packages/astro/src/core/build/plugins/plugin-manifest.ts
+++ b/packages/astro/src/core/build/plugins/plugin-manifest.ts
@@ -27,6 +27,7 @@ import {
 	trackScriptHashes,
 	trackStyleHashes,
 } from '../../csp/common.js';
+import { partitionByKind } from '../../csp/runtime.js';
 import { encodeKey } from '../../encryption.js';
 import { fileExtension, joinPaths, prependForwardSlash } from '../../path.js';
 import { DEFAULT_COMPONENTS } from '../../routing/default.js';
@@ -308,26 +309,45 @@ async function buildManifest(
 	let csp: SSRManifestCSP | undefined = undefined;
 
 	if (shouldTrackCspHashes(settings.config.security.csp)) {
-		const algorithm = getAlgorithm(settings.config.security.csp);
+		const cspConfig = settings.config.security.csp;
+		const algorithm = getAlgorithm(cspConfig);
+		// Astro's generated hashes are element hashes. They are appended to the directive's `hashes`
+		// as `default`-kind entries (bare strings), so they land on `script-src`/`style-src` and are
+		// folded into the `-elem` directives at render time.
 		const scriptHashes = [
-			...getScriptHashes(settings.config.security.csp),
+			...getScriptHashes(cspConfig),
 			...(await trackScriptHashes(internals, settings, algorithm)),
 		];
 		const styleHashes = [
-			...getStyleHashes(settings.config.security.csp),
+			...getStyleHashes(cspConfig),
 			...settings.injectedCsp.styleHashes,
 			...(await trackStyleHashes(internals, settings, algorithm)),
 		];
 
+		const scriptDirective = {
+			resources: getScriptResources(cspConfig),
+			hashes: scriptHashes,
+			strictDynamic: getStrictDynamic(cspConfig),
+		};
+		const styleDirective = {
+			resources: getStyleResources(cspConfig),
+			hashes: styleHashes,
+		};
+		// Derive the deprecated flat fields from the `default`-kind entries for back-compat.
+		const scriptDefault = partitionByKind(scriptDirective).default;
+		const styleDefault = partitionByKind(styleDirective).default;
+
 		csp = {
 			cspDestination: settings.adapter?.adapterFeatures?.staticHeaders ? 'adapter' : undefined,
-			scriptHashes,
-			scriptResources: getScriptResources(settings.config.security.csp),
-			styleHashes,
-			styleResources: getStyleResources(settings.config.security.csp),
 			algorithm,
 			directives: getDirectives(settings),
-			isStrictDynamic: getStrictDynamic(settings.config.security.csp),
+			scriptHashes: scriptDefault.hashes,
+			scriptResources: scriptDefault.resources,
+			isStrictDynamic: scriptDirective.strictDynamic,
+			styleHashes: styleDefault.hashes,
+			styleResources: styleDefault.resources,
+			scriptDirective,
+			styleDirective,
 		};
 	}
 
diff --git a/packages/astro/src/core/config/schemas/base.ts b/packages/astro/src/core/config/schemas/base.ts
index 54868c40431f..0402baaf2d20 100644
--- a/packages/astro/src/core/config/schemas/base.ts
+++ b/packages/astro/src/core/config/schemas/base.ts
@@ -19,7 +19,12 @@ import { SvgOptimizerSchema } from '../../../assets/svg/config.js';
 import { EnvSchema } from '../../../env/schema.js';
 import type { AstroUserConfig, ViteUserConfig } from '../../../types/public/config.js';
 import { CacheSchema, RouteRulesSchema } from '../../cache/config.js';
-import { allowedDirectivesSchema, cspAlgorithmSchema, cspHashSchema } from '../../csp/config.js';
+import {
+	allowedDirectivesSchema,
+	cspAlgorithmSchema,
+	cspHashEntrySchema,
+	cspResourceEntrySchema,
+} from '../../csp/config.js';
 import { SessionSchema } from '../../session/config.js';
 
 // The below types are required boilerplate to work around a Zod issue since v3.21.2. Since that version,
@@ -521,14 +526,14 @@ export const AstroConfigSchema = z.object({
 						directives: z.array(allowedDirectivesSchema).optional(),
 						styleDirective: z
 							.object({
-								resources: z.array(z.string()).optional(),
-								hashes: z.array(cspHashSchema).optional(),
+								resources: z.array(cspResourceEntrySchema).optional(),
+								hashes: z.array(cspHashEntrySchema).optional(),
 							})
 							.optional(),
 						scriptDirective: z
 							.object({
-								resources: z.array(z.string()).optional(),
-								hashes: z.array(cspHashSchema).optional(),
+								resources: z.array(cspResourceEntrySchema).optional(),
+								hashes: z.array(cspHashEntrySchema).optional(),
 								strictDynamic: z.boolean().optional(),
 							})
 							.optional(),
diff --git a/packages/astro/src/core/csp/common.ts b/packages/astro/src/core/csp/common.ts
index c628d93a1dc3..f856712bc5c3 100644
--- a/packages/astro/src/core/csp/common.ts
+++ b/packages/astro/src/core/csp/common.ts
@@ -7,7 +7,7 @@ import type { AstroSettings } from '../../types/astro.js';
 import type { AstroConfig, CspAlgorithm } from '../../types/public/index.js';
 import type { BuildInternals } from '../build/internal.js';
 import { generateCspDigest } from '../encryption.js';
-import type { CspDirective } from './config.js';
+import type { CspDirective, CspHash, CspHashEntry, CspResourceEntry } from './config.js';
 
 type EnabledCsp = Exclude<AstroConfig['security']['csp'], false>;
 
@@ -22,33 +22,32 @@ export function getAlgorithm(csp: EnabledCsp): CspAlgorithm {
 	return csp.algorithm;
 }
 
-export function getScriptHashes(csp: EnabledCsp): string[] {
+export function getScriptResources(csp: EnabledCsp): CspResourceEntry[] {
 	if (csp === true) {
 		return [];
-	} else {
-		return csp.scriptDirective?.hashes ?? [];
 	}
+	return csp.scriptDirective?.resources ?? [];
 }
 
-export function getScriptResources(csp: EnabledCsp): string[] {
+export function getScriptHashes(csp: EnabledCsp): CspHashEntry[] {
 	if (csp === true) {
 		return [];
 	}
-	return csp.scriptDirective?.resources ?? [];
+	return csp.scriptDirective?.hashes ?? [];
 }
 
-export function getStyleHashes(csp: EnabledCsp): string[] {
+export function getStyleResources(csp: EnabledCsp): CspResourceEntry[] {
 	if (csp === true) {
 		return [];
 	}
-	return csp.styleDirective?.hashes ?? [];
+	return csp.styleDirective?.resources ?? [];
 }
 
-export function getStyleResources(csp: EnabledCsp): string[] {
+export function getStyleHashes(csp: EnabledCsp): CspHashEntry[] {
 	if (csp === true) {
 		return [];
 	}
-	return csp.styleDirective?.resources ?? [];
+	return csp.styleDirective?.hashes ?? [];
 }
 
 // Unlike other helpers like getStyleResources, getDirectives has more logic
@@ -97,8 +96,8 @@ export async function trackStyleHashes(
 	internals: BuildInternals,
 	settings: AstroSettings,
 	algorithm: CspAlgorithm,
-): Promise<string[]> {
-	const clientStyleHashes: string[] = [];
+): Promise<CspHash[]> {
+	const clientStyleHashes: CspHash[] = [];
 	for (const [_, page] of internals.pagesByViteID.entries()) {
 		for (const style of page.styles) {
 			if (style.sheet.type === 'inline') {
@@ -128,8 +127,8 @@ export async function trackScriptHashes(
 	internals: BuildInternals,
 	settings: AstroSettings,
 	algorithm: CspAlgorithm,
-): Promise<string[]> {
-	const clientScriptHashes: string[] = [];
+): Promise<CspHash[]> {
+	const clientScriptHashes: CspHash[] = [];
 
 	for (const script of internals.inlinedScripts.values()) {
 		clientScriptHashes.push(await generateCspDigest(script, algorithm));
diff --git a/packages/astro/src/core/csp/config.ts b/packages/astro/src/core/csp/config.ts
index 4514fa0ad531..f2d9d3844c02 100644
--- a/packages/astro/src/core/csp/config.ts
+++ b/packages/astro/src/core/csp/config.ts
@@ -40,6 +40,76 @@ export const cspHashSchema = z.custom<`${CspAlgorithmValue}${string}`>((value) =
 
 export type CspHash = z.infer<typeof cspHashSchema>;
 
+/**
+ * The scope a resource or hash applies to:
+ * - `default`: the generic `script-src`/`style-src` directive (default behavior).
+ * - `element`: the `script-src-elem`/`style-src-elem` directive (`<script>`, `<style>`, `<link rel="stylesheet">`).
+ * - `attribute`: the `script-src-attr`/`style-src-attr` directive (inline event handlers and inline `style` attributes).
+ */
+export const CSP_KINDS = ['element', 'attribute', 'default'] as const;
+export type CspKind = (typeof CSP_KINDS)[number];
+
+export const cspKindSchema = z.enum(CSP_KINDS);
+
+/**
+ * A `script-src`/`style-src` resource. A bare string targets `script-src`/`style-src` (the same as
+ * `kind: 'default'`). Use the object form with an explicit `kind` to target a more specific directive.
+ */
+export type CspResourceEntry = string | { resource: string; kind: CspKind };
+
+/**
+ * A `script-src`/`style-src` hash. A bare hash (a string) targets `script-src`/`style-src` (the same as
+ * `kind: 'default'`). Use the object form with an explicit `kind` to target a more specific directive.
+ */
+export type CspHashEntry = CspHash | { hash: CspHash; kind: CspKind };
+
+// Per MDN, `script-src-attr`/`style-src-attr` only accept these keyword sources.
+const ATTRIBUTE_ALLOWED_RESOURCES = [
+	"'none'",
+	"'unsafe-hashes'",
+	"'unsafe-inline'",
+	"'report-sample'",
+] as const;
+
+export const cspResourceEntrySchema = z
+	.union([
+		z.string(),
+		z.object({
+			resource: z.string(),
+			kind: cspKindSchema,
+		}),
+	])
+	.superRefine((value, ctx) => {
+		// `value` is already a valid union member here, so a bare string is the `default` kind.
+		const resource = typeof value === 'string' ? value : value.resource;
+		const kind = typeof value === 'string' ? 'default' : value.kind;
+		// `'unsafe-hashes'` is invalid on the `-elem` directives.
+		if (kind === 'element' && resource === "'unsafe-hashes'") {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				message: `The source \`'unsafe-hashes'\` is not valid for \`element\` resources (it is rejected by \`script-src-elem\`/\`style-src-elem\`).`,
+				fatal: true,
+			});
+		} else if (
+			kind === 'attribute' &&
+			!(ATTRIBUTE_ALLOWED_RESOURCES as readonly string[]).includes(resource)
+		) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				message: `The source \`${resource}\` is not valid for \`attribute\` resources. \`script-src-attr\`/\`style-src-attr\` only accept: ${ATTRIBUTE_ALLOWED_RESOURCES.join(', ')}.`,
+				fatal: true,
+			});
+		}
+	});
+
+export const cspHashEntrySchema = z.union([
+	cspHashSchema,
+	z.object({
+		hash: cspHashSchema,
+		kind: cspKindSchema,
+	}),
+]);
+
 const ALLOWED_DIRECTIVES = [
 	'base-uri',
 	'child-src',
@@ -76,7 +146,7 @@ export const allowedDirectivesSchema = z
 			if (value.startsWith('script-src') || value.startsWith('style-src')) {
 				ctx.addIssue({
 					code: z.ZodIssueCode.custom,
-					message: `Directives \`script-src\` and \`style-src\` are not allowed in \`security.csp.directives\`. Please use \`security.csp.scriptDirective\` and \`security.csp.styleDirective\` instead.`,
+					message: `Directives \`script-src\` and \`style-src\` (including their \`-elem\`/\`-attr\` variants) are not allowed in \`security.csp.directives\`. Please use \`security.csp.scriptDirective\` and \`security.csp.styleDirective\` instead, scoping resources/hashes to the more specific directives with the \`kind\` option (\`"element"\` or \`"attribute"\`).`,
 					fatal: true,
 				});
 			} else {
diff --git a/packages/astro/src/core/csp/runtime.ts b/packages/astro/src/core/csp/runtime.ts
index 34255b607cfe..bb8e90c3f380 100644
--- a/packages/astro/src/core/csp/runtime.ts
+++ b/packages/astro/src/core/csp/runtime.ts
@@ -1,5 +1,48 @@
 import type { SSRManifestCSP } from '../app/types.js';
-import type { CspDirective } from './config.js';
+import type { CspDirective, CspHash, CspHashEntry, CspKind, CspResourceEntry } from './config.js';
+
+export function normalizeCspResourceEntry(entry: CspResourceEntry): {
+	resource: string;
+	kind: CspKind;
+} {
+	if (typeof entry === 'string') {
+		return { resource: entry, kind: 'default' };
+	}
+	return { resource: entry.resource, kind: entry.kind ?? 'default' };
+}
+
+export function normalizeCspHashEntry(entry: CspHashEntry): { hash: CspHash; kind: CspKind } {
+	if (typeof entry === 'string') {
+		return { hash: entry, kind: 'default' };
+	}
+	return { hash: entry.hash, kind: entry.kind ?? 'default' };
+}
+
+/** The resolved sources of a single CSP directive. */
+export type CspDirectiveSources = { resources: string[]; hashes: string[] };
+
+/**
+ * Groups a directive's `resources`/`hashes` entries by their `kind`.
+ */
+export function partitionByKind(directive: {
+	resources: CspResourceEntry[];
+	hashes: CspHashEntry[];
+}): Record<CspKind, CspDirectiveSources> {
+	const groups: Record<CspKind, CspDirectiveSources> = {
+		default: { resources: [], hashes: [] },
+		element: { resources: [], hashes: [] },
+		attribute: { resources: [], hashes: [] },
+	};
+	for (const entry of directive.resources) {
+		const { resource, kind } = normalizeCspResourceEntry(entry);
+		groups[kind].resources.push(resource);
+	}
+	for (const entry of directive.hashes) {
+		const { hash, kind } = normalizeCspHashEntry(entry);
+		groups[kind].hashes.push(hash);
+	}
+	return groups;
+}
 
 /**
  * `existingDirective` is something like `img-src 'self'`. Same as `newDirective`.
diff --git a/packages/astro/src/core/dev/restart.ts b/packages/astro/src/core/dev/restart.ts
index 7960c1323bea..9833d7568c6f 100644
--- a/packages/astro/src/core/dev/restart.ts
+++ b/packages/astro/src/core/dev/restart.ts
@@ -15,7 +15,11 @@ import { collectErrorMetadata } from '../errors/dev/utils.js';
 import { isAstroConfigZodError } from '../errors/errors.js';
 import { createSafeError } from '../errors/index.js';
 import { loadOrCreateNodeLogger } from '../logger/load.js';
-import { formatErrorMessage, warnIfCspWithShiki } from '../messages/runtime.js';
+import {
+	formatErrorMessage,
+	warnIfCspResourceFallbackShadowing,
+	warnIfCspWithShiki,
+} from '../messages/runtime.js';
 import { createRoutesList } from '../routing/create-manifest.js';
 import type { Container } from './container.js';
 import { createContainer } from './container.js';
@@ -74,6 +78,7 @@ async function restartContainerInPlace(container: Container): Promise<AstroSetti
 	try {
 		const { astroConfig } = await resolveConfig(inlineConfig, 'dev', fs);
 		warnIfCspWithShiki(astroConfig, logger);
+		warnIfCspResourceFallbackShadowing(astroConfig, logger);
 		let settings = await createSettings(
 			astroConfig,
 			inlineConfig.logLevel,
@@ -151,6 +156,7 @@ export async function createContainerWithAutomaticRestart({
 	const logger = await loadOrCreateNodeLogger(astroConfig, inlineConfig ?? {});
 
 	warnIfCspWithShiki(astroConfig, logger);
+	warnIfCspResourceFallbackShadowing(astroConfig, logger);
 	telemetry.record(eventCliSession('dev', userConfig));
 
 	const settings = await createSettings(
diff --git a/packages/astro/src/core/errors/zod-error-map.ts b/packages/astro/src/core/errors/zod-error-map.ts
index acc7bec0fe62..166c0e0143db 100644
--- a/packages/astro/src/core/errors/zod-error-map.ts
+++ b/packages/astro/src/core/errors/zod-error-map.ts
@@ -164,7 +164,14 @@ const unionExpectedVals = (expectedVals: Set<unknown>) =>
 const flattenErrorPath = (errorPath: (string | number | symbol)[]) => errorPath.join('.');
 
 /** `JSON.stringify()` a value with spaces around object/array entries. */
-const stringify = (val: unknown) =>
-	JSON.stringify(val, null, 1).split(newlinePlusWhitespace).join(' ');
+const stringify = (val: unknown) => {
+	// `JSON.stringify` returns `undefined` for `undefined`/functions/symbols. This can happen for
+	// nested union issues where `issue.input` is not populated, so fall back to `String()`.
+	const json = JSON.stringify(val, null, 1);
+	if (json === undefined) {
+		return String(val);
+	}
+	return json.split(newlinePlusWhitespace).join(' ');
+};
 const newlinePlusWhitespace = /\n\s*/;
 const leadingPeriod = /^\./;
diff --git a/packages/astro/src/core/fetch/fetch-state.ts b/packages/astro/src/core/fetch/fetch-state.ts
index b0dc5b79163d..ca95f7bb3a83 100644
--- a/packages/astro/src/core/fetch/fetch-state.ts
+++ b/packages/astro/src/core/fetch/fetch-state.ts
@@ -21,7 +21,8 @@ import {
 	pipelineSymbol,
 	responseSentSymbol,
 } from '../constants.js';
-import { pushDirective } from '../csp/runtime.js';
+import type { CspKind } from '../csp/config.js';
+import { normalizeCspResourceEntry, pushDirective } from '../csp/runtime.js';
 import { generateCspDigest } from '../encryption.js';
 import { AstroError, AstroErrorData } from '../errors/index.js';
 import {
@@ -424,12 +425,26 @@ export class FetchState implements AstroFetchState {
 			cspDestination: manifest.csp?.cspDestination ?? (routeData.prerender ? 'meta' : 'header'),
 			shouldInjectCspMetaTags,
 			cspAlgorithm,
+			directives: manifest.csp?.directives ? [...manifest.csp.directives] : [],
+			// Deprecated flat fields, kept for back-compat. Seeded from the manifest; the runtime CSP
+			// API updates the structured `scriptDirective`/`styleDirective` below (which the renderer
+			// reads), not these.
 			scriptHashes: manifest.csp?.scriptHashes ? [...manifest.csp.scriptHashes] : [],
 			scriptResources: manifest.csp?.scriptResources ? [...manifest.csp.scriptResources] : [],
 			styleHashes: manifest.csp?.styleHashes ? [...manifest.csp.styleHashes] : [],
 			styleResources: manifest.csp?.styleResources ? [...manifest.csp.styleResources] : [],
-			directives: manifest.csp?.directives ? [...manifest.csp.directives] : [],
 			isStrictDynamic: manifest.csp?.isStrictDynamic ?? false,
+			// Structured fields (source of truth). Arrays are cloned so per-request runtime inserts
+			// don't mutate the shared manifest.
+			scriptDirective: {
+				resources: manifest.csp?.scriptDirective ? [...manifest.csp.scriptDirective.resources] : [],
+				hashes: manifest.csp?.scriptDirective ? [...manifest.csp.scriptDirective.hashes] : [],
+				strictDynamic: manifest.csp?.scriptDirective?.strictDynamic ?? false,
+			},
+			styleDirective: {
+				resources: manifest.csp?.styleDirective ? [...manifest.csp.styleDirective.resources] : [],
+				hashes: manifest.csp?.styleDirective ? [...manifest.csp.styleDirective.hashes] : [],
+			},
 			internalFetchHeaders: manifest.internalFetchHeaders,
 		};
 
@@ -601,23 +616,59 @@ export class FetchState implements AstroFetchState {
 			}
 			return undefined;
 		}
+		// Dedupe fallback warnings to once per family+kind for the lifetime of this request.
+		const warnedFallback = new Set<string>();
+		const warnFallback = (family: 'script' | 'style', kind: CspKind) => {
+			if (kind === 'default' || !state.result) {
+				return;
+			}
+			const directive =
+				family === 'script' ? state.result.scriptDirective : state.result.styleDirective;
+			// Astro's element hashes are folded into the `-elem` directive automatically, so the
+			// footgun is specifically user-provided `default`-kind resources on the general directive,
+			// which do NOT carry over to the more specific directive.
+			const defaultResources = directive.resources
+				.map(normalizeCspResourceEntry)
+				.filter((entry) => entry.kind === 'default')
+				.map((entry) => entry.resource);
+			if (defaultResources.length === 0) {
+				return;
+			}
+			const key = `${family}:${kind}`;
+			if (warnedFallback.has(key)) {
+				return;
+			}
+			warnedFallback.add(key);
+			const general = `${family}-src`;
+			const specific = `${general}-${kind === 'element' ? 'elem' : 'attr'}`;
+			pipeline.logger.warn(
+				'csp',
+				`A resource was added to \`${specific}\`, but \`${general}\` also defines custom resources (${defaultResources.join(
+					' ',
+				)}). Because \`${specific}\` overrides \`${general}\` for its scope (browsers do not fall back), those resources will not apply there. Add them to \`${specific}\` as well if needed.`,
+			);
+		};
 		return {
 			insertDirective(payload) {
 				if (state.result) {
 					state.result.directives = pushDirective(state.result.directives, payload);
 				}
 			},
-			insertScriptResource(resource) {
-				state.result?.scriptResources.push(resource);
+			insertScriptResource(payload) {
+				if (!state.result) return;
+				warnFallback('script', normalizeCspResourceEntry(payload).kind);
+				state.result.scriptDirective.resources.push(payload);
 			},
-			insertStyleResource(resource) {
-				state.result?.styleResources.push(resource);
+			insertStyleResource(payload) {
+				if (!state.result) return;
+				warnFallback('style', normalizeCspResourceEntry(payload).kind);
+				state.result.styleDirective.resources.push(payload);
 			},
-			insertStyleHash(hash) {
-				state.result?.styleHashes.push(hash);
+			insertStyleHash(payload) {
+				state.result?.styleDirective.hashes.push(payload);
 			},
-			insertScriptHash(hash) {
-				state.result?.scriptHashes.push(hash);
+			insertScriptHash(payload) {
+				state.result?.scriptDirective.hashes.push(payload);
 			},
 		};
 	}
diff --git a/packages/astro/src/core/messages/runtime.ts b/packages/astro/src/core/messages/runtime.ts
index 650571240df2..937b18d4673c 100644
--- a/packages/astro/src/core/messages/runtime.ts
+++ b/packages/astro/src/core/messages/runtime.ts
@@ -1,6 +1,7 @@
 import colors from 'piccolore';
 import type { ResolvedServerUrls } from 'vite';
 import type { $ZodError } from 'zod/v4/core';
+import { partitionByKind } from '../csp/runtime.js';
 import { getDocsForError, renderErrorMarkdown } from '../errors/dev/runtime.js';
 import {
 	AstroError,
@@ -414,3 +415,48 @@ export function warnIfCspWithShiki(config: AstroConfig, logger: AstroLogger): vo
 		);
 	}
 }
+
+/**
+ * Warns when a `scriptDirective`/`styleDirective` defines `default`-kind resources alongside
+ * `element`/`attribute`-kind entries. Because the more specific directive (`*-src-elem`/`*-src-attr`)
+ * overrides the generic one for its scope and browsers do not fall back, the generic resources will
+ * not apply there. Astro's generated hashes are folded automatically, so this only concerns
+ * user-provided resources.
+ */
+export function warnIfCspResourceFallbackShadowing(config: AstroConfig, logger: AstroLogger): void {
+	const csp = config.security.csp;
+	// Only the object form has `scriptDirective`/`styleDirective` to inspect. (Reading the config
+	// directly here keeps this module free of the Node-only `csp/common.js`, which must not leak
+	// into the SSR runtime.)
+	if (typeof csp !== 'object') return;
+
+	const families = [
+		{ name: 'script', directive: csp.scriptDirective },
+		{ name: 'style', directive: csp.styleDirective },
+	] as const;
+
+	for (const { name, directive } of families) {
+		const sources = partitionByKind({
+			resources: directive?.resources ?? [],
+			hashes: directive?.hashes ?? [],
+		});
+		if (sources.default.resources.length === 0) continue;
+		const shadowed: string[] = [];
+		if (sources.element.resources.length > 0 || sources.element.hashes.length > 0) {
+			shadowed.push(`\`${name}-src-elem\``);
+		}
+		if (sources.attribute.resources.length > 0 || sources.attribute.hashes.length > 0) {
+			shadowed.push(`\`${name}-src-attr\``);
+		}
+		if (shadowed.length === 0) continue;
+
+		logger.warn(
+			'csp',
+			`\`security.csp.${name}Directive\` defines \`${name}-src\` resources (${sources.default.resources.join(
+				' ',
+			)}) as well as ${shadowed.join(' and ')} resources or hashes. Because ${shadowed.join(
+				' and ',
+			)} override \`${name}-src\` for their scope (browsers do not fall back), those \`${name}-src\` resources will not apply there. Add them to the corresponding \`kind\` if needed.`,
+		);
+	}
+}
diff --git a/packages/astro/src/manifest/serialized.ts b/packages/astro/src/manifest/serialized.ts
index a76740a4f5d0..439da18c0c92 100644
--- a/packages/astro/src/manifest/serialized.ts
+++ b/packages/astro/src/manifest/serialized.ts
@@ -15,6 +15,7 @@ import {
 	getStyleResources,
 	shouldTrackCspHashes,
 } from '../core/csp/common.js';
+import { partitionByKind } from '../core/csp/runtime.js';
 import { createKey, encodeKey, getEnvironmentKey, hasEnvironmentKey } from '../core/encryption.js';
 import { MIDDLEWARE_MODULE_ID } from '../core/middleware/vite-plugin.js';
 import { SERVER_ISLAND_MANIFEST } from '../core/server-islands/vite-plugin-server-islands.js';
@@ -160,15 +161,30 @@ async function createSerializedManifest(
 	}
 
 	if (shouldTrackCspHashes(settings.config.security.csp)) {
+		const cspConfig = settings.config.security.csp;
+		const scriptDirective = {
+			resources: getScriptResources(cspConfig),
+			hashes: getScriptHashes(cspConfig),
+			strictDynamic: getStrictDynamic(cspConfig),
+		};
+		const styleDirective = {
+			resources: getStyleResources(cspConfig),
+			hashes: getStyleHashes(cspConfig),
+		};
+		// Derive the deprecated flat fields from the `default`-kind entries for back-compat.
+		const scriptDefault = partitionByKind(scriptDirective).default;
+		const styleDefault = partitionByKind(styleDirective).default;
 		csp = {
 			cspDestination: settings.adapter?.adapterFeatures?.staticHeaders ? 'adapter' : undefined,
-			scriptHashes: getScriptHashes(settings.config.security.csp),
-			scriptResources: getScriptResources(settings.config.security.csp),
-			styleHashes: getStyleHashes(settings.config.security.csp),
-			styleResources: getStyleResources(settings.config.security.csp),
-			algorithm: getAlgorithm(settings.config.security.csp),
+			algorithm: getAlgorithm(cspConfig),
 			directives: getDirectives(settings),
-			isStrictDynamic: getStrictDynamic(settings.config.security.csp),
+			scriptHashes: scriptDefault.hashes,
+			scriptResources: scriptDefault.resources,
+			isStrictDynamic: scriptDirective.strictDynamic,
+			styleHashes: styleDefault.hashes,
+			styleResources: styleDefault.resources,
+			scriptDirective,
+			styleDirective,
 		};
 	}
 
diff --git a/packages/astro/src/runtime/server/render/csp.ts b/packages/astro/src/runtime/server/render/csp.ts
index 0b34bc91e5a3..921b69a66598 100644
--- a/packages/astro/src/runtime/server/render/csp.ts
+++ b/packages/astro/src/runtime/server/render/csp.ts
@@ -1,42 +1,164 @@
+import { type CspDirectiveSources, partitionByKind } from '../../../core/csp/runtime.js';
 import type { SSRResult } from '../../../types/public/index.js';
 
+/** The narrower CSP directives that `script-src`/`style-src` can be split into. */
+type SpecificCspDirective =
+	| 'script-src-elem'
+	| 'script-src-attr'
+	| 'style-src-elem'
+	| 'style-src-attr';
+
 export function renderCspContent(result: SSRResult): string {
-	const finalScriptHashes = new Set();
-	const finalStyleHashes = new Set();
+	const { scriptDirective, styleDirective, directives } = result;
+
+	// `kind` is interpreted here (the single partition point): each directive's entries are grouped
+	// into the generic `script-src`/`style-src` and the more specific `-elem`/`-attr` variants.
+	const script = partitionByKind(scriptDirective);
+	const style = partitionByKind(styleDirective);
 
-	for (const scriptHash of result.scriptHashes) {
+	// `default`-kind hashes (Astro's generated element hashes + user `default` hashes + render-time
+	// generated hashes), quoted once. These are emitted on whichever directive governs elements.
+	const finalScriptHashes = new Set<string>();
+	for (const scriptHash of script.default.hashes) {
+		finalScriptHashes.add(`'${scriptHash}'`);
+	}
+	for (const scriptHash of result._metadata.extraScriptHashes) {
 		finalScriptHashes.add(`'${scriptHash}'`);
 	}
 
-	for (const styleHash of result.styleHashes) {
+	const finalStyleHashes = new Set<string>();
+	for (const styleHash of style.default.hashes) {
 		finalStyleHashes.add(`'${styleHash}'`);
 	}
-
 	for (const styleHash of result._metadata.extraStyleHashes) {
 		finalStyleHashes.add(`'${styleHash}'`);
 	}
 
-	for (const scriptHash of result._metadata.extraScriptHashes) {
-		finalScriptHashes.add(`'${scriptHash}'`);
+	let directivesContent;
+	if (directives.length > 0) {
+		directivesContent = directives.join(';') + ';';
 	}
 
-	let directives;
-	if (result.directives.length > 0) {
-		directives = result.directives.join(';') + ';';
-	}
+	const scriptResources =
+		script.default.resources.length > 0 ? script.default.resources.join(' ') : "'self'";
+	const styleResources =
+		style.default.resources.length > 0 ? style.default.resources.join(' ') : "'self'";
 
-	let scriptResources = "'self'";
-	if (result.scriptResources.length > 0) {
-		scriptResources = result.scriptResources.map((r) => `${r}`).join(' ');
-	}
+	// `script-src`/`style-src` cover everything; the `-elem`/`-attr` variants are narrower:
+	//   - `*-src-elem` → tags (`<script>`, `<style>`, `<link rel="stylesheet">`)
+	//   - `*-src-attr` → inline attributes (`onclick`, `style`)
+	// When a narrower directive is present, the browser uses only it for that scope and does not fall
+	// back to `script-src`/`style-src`.
+	//
+	// Default hashes are element-content hashes, so they're emitted on whichever directive governs
+	// elements: `script-src-elem`/`style-src-elem` when it's in use, otherwise the baseline
+	// `script-src`/`style-src`. They aren't duplicated on the baseline, because the browser never
+	// falls back from a narrower directive to it.
+	//
+	// Default sources, by contrast, stay exactly where they are scoped: a source is a broad,
+	// per-scope allowance, so moving or copying it would change the policy intended for another
+	// scope. The `-attr` directives receive only what is explicitly scoped to them. `strict-dynamic`
+	// from `script-src` also applies to `script-src-elem`. A narrower directive is emitted only when
+	// it has its own entries.
+	const scriptElemActive = isEnabled(script.element);
+	const styleElemActive = isEnabled(style.element);
+	const strictDynamicSuffix = scriptDirective.strictDynamic ? ` 'strict-dynamic'` : '';
 
-	let styleResources = "'self'";
-	if (result.styleResources.length > 0) {
-		styleResources = result.styleResources.map((r) => `${r}`).join(' ');
-	}
+	// On the baseline, omit the element hashes when the `-elem` directive will carry them instead.
+	const scriptBaselineTokens = [
+		...(scriptElemActive ? [] : [...finalScriptHashes]),
+		...(scriptDirective.strictDynamic ? [`'strict-dynamic'`] : []),
+	];
+	const scriptSrc = `script-src ${scriptResources} ${scriptBaselineTokens.join(' ')};`;
+	const styleSrc = `style-src ${styleResources} ${(styleElemActive ? [] : [...finalStyleHashes]).join(' ')};`;
+
+	const scriptSrcElem = scriptElemActive
+		? renderSpecificDirective(
+				'script-src-elem',
+				script.element.resources,
+				"'self'",
+				finalScriptHashes,
+				script.element.hashes,
+				strictDynamicSuffix,
+			)
+		: undefined;
+	const scriptSrcAttr = isEnabled(script.attribute)
+		? renderSpecificDirective(
+				'script-src-attr',
+				script.attribute.resources,
+				"'none'",
+				undefined,
+				script.attribute.hashes,
+			)
+		: undefined;
+	const styleSrcElem = styleElemActive
+		? renderSpecificDirective(
+				'style-src-elem',
+				style.element.resources,
+				"'self'",
+				finalStyleHashes,
+				style.element.hashes,
+			)
+		: undefined;
+	const styleSrcAttr = isEnabled(style.attribute)
+		? renderSpecificDirective(
+				'style-src-attr',
+				style.attribute.resources,
+				"'none'",
+				undefined,
+				style.attribute.hashes,
+			)
+		: undefined;
+
+	return [
+		directivesContent,
+		scriptSrc,
+		scriptSrcElem,
+		scriptSrcAttr,
+		styleSrc,
+		styleSrcElem,
+		styleSrcAttr,
+	]
+		.filter(Boolean)
+		.join(' ');
+}
 
-	const strictDynamic = result.isStrictDynamic ? ` 'strict-dynamic'` : '';
-	const scriptSrc = `script-src ${scriptResources} ${Array.from(finalScriptHashes).join(' ')}${strictDynamic};`;
-	const styleSrc = `style-src ${styleResources} ${Array.from(finalStyleHashes).join(' ')};`;
-	return [directives, scriptSrc, styleSrc].filter(Boolean).join(' ');
+/** A more specific directive is emitted only when the user scoped at least one source/hash to it. */
+function isEnabled(sources: CspDirectiveSources): boolean {
+	return sources.resources.length > 0 || sources.hashes.length > 0;
+}
+
+/**
+ * Builds one of the narrower directive strings: `script-src-elem`, `script-src-attr`,
+ * `style-src-elem`, or `style-src-attr`.
+ *
+ * @param name The directive name, e.g. `"script-src-elem"`.
+ * @param resources The sources the user scoped to this directive (e.g. `'self'` or a URL).
+ * @param defaultResource The source to use when `resources` is empty (`'self'` for `-elem`, `'none'` for `-attr`).
+ * @param sharedHashes Already-quoted hashes to also include here — Astro's tag hashes for `-elem`, or `undefined` for `-attr` (which never receives them).
+ * @param ownHashes Unquoted hashes the user scoped to this directive.
+ * @param suffix Optional text added at the end, e.g. ` 'strict-dynamic'`.
+ */
+function renderSpecificDirective(
+	name: SpecificCspDirective,
+	resources: string[],
+	defaultResource: string,
+	sharedHashes: Set<string> | undefined,
+	ownHashes: string[],
+	suffix = '',
+): string {
+	const hashes = new Set<string>(sharedHashes);
+	for (const hash of ownHashes) {
+		hashes.add(`'${hash}'`);
+	}
+	let finalResources: string;
+	if (resources.length > 0) {
+		finalResources = resources.map((r) => `${r}`).join(' ');
+	} else if (defaultResource === "'none'" && hashes.size > 0) {
+		// `'none'` cannot coexist with other sources; if hashes were provided, emit only the hashes.
+		finalResources = '';
+	} else {
+		finalResources = defaultResource;
+	}
+	return `${name} ${[finalResources, ...hashes].filter(Boolean).join(' ')}${suffix};`;
 }
diff --git a/packages/astro/src/types/astro.ts b/packages/astro/src/types/astro.ts
index f49f57911d88..471b5e1431d4 100644
--- a/packages/astro/src/types/astro.ts
+++ b/packages/astro/src/types/astro.ts
@@ -1,4 +1,5 @@
 import type { Server } from 'node:http';
+import type { CspHash } from '../core/csp/config.js';
 import type { AstroTimer } from '../core/config/timer.js';
 import type { TSConfig } from '../core/config/tsconfig.js';
 import type { AstroLogger, AstroLoggerLevel } from '../core/logger/core.js';
@@ -29,8 +30,6 @@ export type SerializedRouteData = Omit<
 	};
 };
 
-type CspObject = Required<Exclude<AstroConfig['security']['csp'], boolean>>;
-
 export interface AstroSettings {
 	config: AstroConfig;
 	adapter: AstroAdapter | undefined;
@@ -77,7 +76,7 @@ export interface AstroSettings {
 	buildOutput: undefined | 'static' | 'server';
 	injectedCsp: {
 		fontResources: Set<string>;
-		styleHashes: Required<CspObject['styleDirective']>['hashes'];
+		styleHashes: CspHash[];
 	};
 	logLevel: AstroLoggerLevel;
 	fontsHttpServer: Server | null;
diff --git a/packages/astro/src/types/public/config.ts b/packages/astro/src/types/public/config.ts
index 70353a45a35d..1c6f79a77ad6 100644
--- a/packages/astro/src/types/public/config.ts
+++ b/packages/astro/src/types/public/config.ts
@@ -16,7 +16,14 @@ import type { AssetsPrefix } from '../../core/app/types.js';
 import type { CacheProviderConfig, RouteRules } from '../../core/cache/types.js';
 import type { AstroConfigType } from '../../core/config/schemas/index.js';
 import type { REDIRECT_STATUS_CODES } from '../../core/constants.js';
-import type { CspAlgorithm, CspDirective, CspHash } from '../../core/csp/config.js';
+import type {
+	CspAlgorithm,
+	CspDirective,
+	CspHash,
+	CspHashEntry,
+	CspKind,
+	CspResourceEntry,
+} from '../../core/csp/config.js';
 import type { AstroLogger, AstroLoggerLevel } from '../../core/logger/core.js';
 import type {
 	SessionConfig,
@@ -32,16 +39,16 @@ export type Locales = (string | { codes: [string, ...string[]]; path: string })[
 
 export type { FontProvider };
 
-export type { CspAlgorithm, CspHash };
+export type { CspAlgorithm, CspHash, CspKind, CspResourceEntry, CspHashEntry };
 
 export type { RemotePattern };
 
 export type { SvgOptimizer };
 
-export type CspStyleDirective = { hashes?: CspHash[]; resources?: string[] };
+export type CspStyleDirective = { hashes?: CspHashEntry[]; resources?: CspResourceEntry[] };
 export type CspScriptDirective = {
-	hashes?: CspHash[];
-	resources?: string[];
+	hashes?: CspHashEntry[];
+	resources?: CspResourceEntry[];
 	strictDynamic?: boolean;
 };
 
@@ -843,7 +850,7 @@ export interface AstroUserConfig<
 						 * @docs
 						 * @name security.csp.styleDirective.hashes
 						 * @kind h6
-						 * @type {CspHash[]}
+						 * @type {CspHashEntry[]}
 						 * @default `[]`
 						 * @version 6.0.0
 						 * @description
@@ -852,6 +859,13 @@ export interface AstroUserConfig<
 						 *
 						 * You must provide hashes that start with `sha384-`, `sha512-` or `sha256-`. Other values will cause a validation error. These hashes are added to all pages.
 						 *
+						 * Each entry can be a string or an object. The object allows changing the scope of the hash via the `kind` field. The `kind` field accepts:
+						 * - `"element"`: it will store the hash in the `style-src-elem` directive
+						 * - `"attribute"`: it will store the hash in the `style-src-attr` directive
+						 * - `"default"`: it will store the hash in the `style-src` directive
+						 *
+						 * A `"default"` hash goes on `style-src`, or on `style-src-elem` instead once you use `kind: "element"`. It is never added to `style-src-attr`. Astro's generated hashes follow the same rule.
+						 *
 						 * ```js title="astro.config.mjs"
 						 * import { defineConfig } from 'astro/config';
 						 *
@@ -880,20 +894,57 @@ export interface AstroUserConfig<
 						 *   "
 						 * >
 						 * ```
+						 *
+						 * Scoping a hash to `"element"` stores it in `style-src-elem` instead. Astro's generated hashes move there too:
+						 *
+						 * ```js title="astro.config.mjs"
+						 * import { defineConfig } from 'astro/config';
+						 *
+						 * export default defineConfig({
+						 *   security: {
+						 *     csp: {
+						 *       styleDirective: {
+						 *         hashes: [{ hash: "sha256-styleHash", kind: "element" }]
+						 *       }
+						 *     }
+						 *   }
+						 * });
+						 * ```
+						 *
+						 * After the build, the `<meta>` element will include the hash in the `style-src-elem` directive instead of `style-src`:
+						 *
+						 * ```html
+						 * <meta
+						 *   http-equiv="content-security-policy"
+						 *   content="
+						 *     style-src 'self';
+						 *     style-src-elem 'self' 'sha256-styleHash' 'sha256-generatedByAstro';
+						 *   "
+						 * >
+						 * ```
 						 */
-						hashes?: CspHash[];
+						hashes?: CspHashEntry[];
 
 						/**
 						 * @docs
 						 * @name security.csp.styleDirective.resources
 						 * @kind h6
-						 * @type {string[]}
+						 * @type {CspResourceEntry[]}
 						 * @default `[]`
 						 * @version 6.0.0
 						 * @description
 						 *
 						 * A list of valid sources for `style-src` directives to override Astro's default sources. This will not include `'self'` by default, and must be included in this list if you wish to keep it. These resources are added to all pages.
 						 *
+						 * Each entry can be a string or an object. The object allows changing the scope of the source via the `kind` field. The `kind` field accepts:
+						 * - `"element"`: it will store the source in the `style-src-elem` directive
+						 * - `"attribute"`: it will store the source in the `style-src-attr` directive
+						 * - `"default"`: it will store the source in the `style-src` directive
+						 *
+						 * `"attribute"` sources must be one of `'none'`, `'unsafe-hashes'`, `'unsafe-inline'`, or `'report-sample'`, and `'unsafe-hashes'` cannot be used with `"element"`. A common use is allowing inline `style` attributes (for example, from `define:vars` or Shiki) with `{ resource: "'unsafe-inline'", kind: "attribute" }`.
+						 *
+						 * Unlike a hash, a `"default"` source is never moved: it stays on `style-src` only. Where there is a mix of "default" and specific resources (e.g. `"element"` or `"attribute"`), Astro emits a warning.
+						 *
 						 * ```js title="astro.config.mjs"
 						 * import { defineConfig } from 'astro/config';
 						 *
@@ -924,9 +975,40 @@ export interface AstroUserConfig<
 						 * </head>
 						 * ```
 						 *
+						 * A `"default"` source is not copied into the more specific directives. Here, a `"default"` source and an `"element"` source render in different directives:
+						 *
+						 * ```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" }
+						 *         ]
+						 *       }
+						 *     }
+						 *   }
+						 * });
+						 * ```
+						 *
+						 * After the build, the `<meta>` element keeps `https://styles.cdn.example.com` on `style-src` only. This means that this value is not added to `style-src-elem` and does not apply to `<style>` and `<link>` elements (the generated hash, by contrast, does move there):
+						 *
+						 * ```html
+						 * <meta
+						 *   http-equiv="content-security-policy"
+						 *   content="
+						 *     style-src https://styles.cdn.example.com;
+						 *     style-src-elem https://elements.cdn.example.com 'sha256-generatedByAstro';
+						 *   "
+						 * >
+						 * ```
+						 *
 						 * When resources are inserted multiple times or from multiple sources (e.g. defined in your `csp` config and added using [the CSP runtime API](/en/reference/api-reference/#csp)), Astro will merge and deduplicate all resources to create your `<meta>` element.
 						 */
-						resources?: string[];
+						resources?: CspResourceEntry[];
 					};
 
 					/**
@@ -945,7 +1027,7 @@ export interface AstroUserConfig<
 						 * @docs
 						 * @name security.csp.scriptDirective.hashes
 						 * @kind h6
-						 * @type {CspHash[]}
+						 * @type {CspHashEntry[]}
 						 * @default `[]`
 						 * @version 6.0.0
 						 * @description
@@ -954,6 +1036,13 @@ export interface AstroUserConfig<
 						 *
 						 * You must provide hashes that start with `sha384-`, `sha512-` or `sha256-`. Other values will cause a validation error. These hashes are added to all pages.
 						 *
+						 * Since Astro v7.1, each entry can be a string or an object. The object allows changing the scope of the hash via the `kind` field. The `kind` field accepts:
+						 * - `"element"`: it will store the hash in the `script-src-elem` directive
+						 * - `"attribute"`: it will store the hash in the `script-src-attr` directive
+						 * - `"default"`: it will store the hash in the `script-src` directive
+						 *
+						 * A `"default"` hash goes on `script-src`, or on `script-src-elem` instead once you use `kind: "element"`. It is never added to `script-src-attr`. Astro's generated hashes follow the same rule.
+						 *
 						 * ```js title="astro.config.mjs"
 						 * import { defineConfig } from 'astro/config';
 						 *
@@ -982,20 +1071,57 @@ export interface AstroUserConfig<
 						 *   "
 						 * >
 						 * ```
+						 *
+						 * Scoping a hash to `"element"` stores it in `script-src-elem` instead. Astro's generated hashes move there too:
+						 *
+						 * ```js title="astro.config.mjs"
+						 * import { defineConfig } from 'astro/config';
+						 *
+						 * export default defineConfig({
+						 *   security: {
+						 *     csp: {
+						 *       scriptDirective: {
+						 *         hashes: [{ hash: "sha256-scriptHash", kind: "element" }]
+						 *       }
+						 *     }
+						 *   }
+						 * });
+						 * ```
+						 *
+						 * After the build, the `<meta>` element will include the hash in the `script-src-elem` directive instead of `script-src`:
+						 *
+						 * ```html
+						 * <meta
+						 *   http-equiv="content-security-policy"
+						 *   content="
+						 *     script-src 'self';
+						 *     script-src-elem 'self' 'sha256-scriptHash' 'sha256-generatedByAstro';
+						 *   "
+						 * >
+						 * ```
 						 */
-						hashes?: CspHash[];
+						hashes?: CspHashEntry[];
 
 						/**
 						 * @docs
 						 * @name security.csp.scriptDirective.resources
 						 * @kind h6
-						 * @type {string[]}
+						 * @type {CspResourceEntry[]}
 						 * @default `[]`
 						 * @version 6.0.0
 						 * @description
 						 *
 						 * A list of valid sources for the `script-src` directives to override Astro's default sources. This will not include `'self'` by default, and must be included in this list if you wish to keep it. These resources are added to all pages.
 						 *
+						 * Since Astro v7.1, each entry can be a string or an object. The object allows changing the scope of the source via the `kind` field. The `kind` field accepts:
+						 * - `"element"`: it will store the source in the `script-src-elem` directive
+						 * - `"attribute"`: it will store the source in the `script-src-attr` directive
+						 * - `"default"`: it will store the source in the `script-src` directive
+						 *
+						 * `"attribute"` sources must be one of `'none'`, `'unsafe-hashes'`, `'unsafe-inline'`, or `'report-sample'`, and `'unsafe-hashes'` cannot be used with `"element"`.
+						 *
+						 * Unlike a hash, a `"default"` source is never moved and stays on `script-src` only. This does not apply where you also scope `"element"` or `"attribute"` sources, since browsers do not fall back. Astro warns when this happens. Add it to the more specific directive as well, if necessary.
+						 *
 						 * ```js title="astro.config.mjs"
 						 * import { defineConfig } from 'astro/config';
 						 *
@@ -1025,9 +1151,40 @@ export interface AstroUserConfig<
 						 * </head>
 						 * ```
 						 *
+						 * A `"default"` source is not copied into the more specific directives. Here, a `"default"` source and an `"element"` source render in different directives:
+						 *
+						 * ```js title="astro.config.mjs"
+						 * import { defineConfig } from 'astro/config';
+						 *
+						 * export default defineConfig({
+						 *   security: {
+						 *     csp: {
+						 *       scriptDirective: {
+						 *         resources: [
+						 *           "https://cdn.example.com",
+						 *           { resource: "https://elements.cdn.example.com", kind: "element" }
+						 *         ]
+						 *       }
+						 *     }
+						 *   }
+						 * });
+						 * ```
+						 *
+						 * After the build, the `<meta>` element keeps `https://cdn.example.com` on `script-src` only. This means that this value is not added to `script-src-elem` and does not apply to `<script>` elements (the generated hash, by contrast, does move there):
+						 *
+						 * ```html
+						 * <meta
+						 *   http-equiv="content-security-policy"
+						 *   content="
+						 *     script-src https://cdn.example.com;
+						 *     script-src-elem https://elements.cdn.example.com 'sha256-generatedByAstro';
+						 *   "
+						 * >
+						 * ```
+						 *
 						 * When resources are inserted multiple times or from multiple sources (e.g. defined in your `csp` config and added using [the CSP runtime API](/en/reference/api-reference/#csp)), Astro will merge and deduplicate all resources to create your `<meta>` element.
 						 */
-						resources?: string[];
+						resources?: CspResourceEntry[];
 
 						/**
 						 * @docs
@@ -1053,6 +1210,8 @@ export interface AstroUserConfig<
 						 *   }
 						 * });
 						 * ```
+						 *
+						 * This applies to `script-src`. When you also scope `script` resources or hashes to `script-src-elem` (using `kind: "element"`), `strict-dynamic` is inherited by `script-src-elem` so that dynamically injected `<script>` elements continue to work.
 						 */
 						strictDynamic?: boolean;
 					};
diff --git a/packages/astro/src/types/public/context.ts b/packages/astro/src/types/public/context.ts
index 8172a31e66cd..4783796030be 100644
--- a/packages/astro/src/types/public/context.ts
+++ b/packages/astro/src/types/public/context.ts
@@ -1,6 +1,6 @@
 import type { ActionClient, ActionReturnType } from '../../actions/runtime/types.js';
 import type { AstroCookies } from '../../core/cookies/cookies.js';
-import type { CspDirective, CspHash } from '../../core/csp/config.js';
+import type { CspDirective, CspHashEntry, CspResourceEntry } from '../../core/csp/config.js';
 import type { CacheLike } from '../../core/cache/runtime/cache.js';
 import type { AstroSession } from '../../core/session/runtime.js';
 import type { AstroComponentFactory } from '../../runtime/server/index.js';
@@ -515,64 +515,80 @@ export interface APIContext<
 				insertDirective: (directive: CspDirective) => void;
 
 				/**
-				 * It set the resource for the directive `style-src` in the route being rendered. It overrides Astro's default.
+				 * It sets the resource for the `style-src` family of directives in the route being rendered. It overrides Astro's default.
 				 *
-				 * @param {string} payload - The source to insert in the `style-src` directive.
+				 * Pass a bare string to add the source to `style-src`, or an object with a `kind` to scope it:
+				 * `"element"` → `style-src-elem`, `"attribute"` → `style-src-attr`, `"default"` → `style-src`.
+				 *
+				 * @param {string | { resource: string; kind?: "element" | "attribute" | "default" }} payload - The source to insert.
 				 *
 				 * ## Example
 				 *
 				 * ```js
 				 * ctx.insertStyleResource("https://styles.cdn.example.com/")
+				 * ctx.insertStyleResource({ resource: "'unsafe-inline'", kind: "attribute" })
 				 * ```
 				 *
 				 * [Astro reference](https://docs.astro.build/en/reference/experimental-flags/csp/#cspinsertstyleresource)
 				 */
-				insertStyleResource: (payload: string) => void;
+				insertStyleResource: (payload: CspResourceEntry) => void;
 
 				/**
 				 * Insert a single style hash to the route being rendered.
 				 *
-				 * @param {CspHash} hash - The hash to insert in the `style-src` directive.
+				 * Pass a bare hash to add it to `style-src`, or an object with a `kind` to scope it:
+				 * `"element"` → `style-src-elem`, `"attribute"` → `style-src-attr`, `"default"` → `style-src`.
+				 *
+				 * @param {CspHash | { hash: CspHash; kind?: "element" | "attribute" | "default" }} payload - The hash to insert.
 				 *
 				 * ## Example
 				 *
 				 * ```js
 				 * ctx.insertStyleHash("sha256-1234567890abcdef1234567890")
+				 * ctx.insertStyleHash({ hash: "sha256-1234567890abcdef1234567890", kind: "element" })
 				 * ```
 				 *
 				 * [Astro reference](https://docs.astro.build/en/reference/experimental-flags/csp/#cspinsertstylehash)
 				 */
-				insertStyleHash: (hash: CspHash) => void;
+				insertStyleHash: (payload: CspHashEntry) => void;
 
 				/**
-				 * It set the resource for the directive `script-src` in the route being rendered.
+				 * It sets the resource for the `script-src` family of directives in the route being rendered.
 				 *
-				 * @param {string} resource - The source to insert in the `script-src` directive.
+				 * Pass a bare string to add the source to `script-src`, or an object with a `kind` to scope it:
+				 * `"element"` → `script-src-elem`, `"attribute"` → `script-src-attr`, `"default"` → `script-src`.
+				 *
+				 * @param {string | { resource: string; kind?: "element" | "attribute" | "default" }} payload - The source to insert.
 				 *
 				 * ## Example
 				 *
 				 * ```js
 				 * ctx.insertScriptResource("https://scripts.cdn.example.com/")
+				 * ctx.insertScriptResource({ resource: "https://scripts.cdn.example.com/", kind: "element" })
 				 * ```
 				 *
 				 * [Astro reference](https://docs.astro.build/en/reference/experimental-flags/csp/#cspinsertscriptresource)
 				 */
-				insertScriptResource: (resource: string) => void;
+				insertScriptResource: (payload: CspResourceEntry) => void;
 
 				/**
 				 * Insert a single script hash to the route being rendered.
 				 *
-				 * @param {CspHash} hash - The hash to insert in the `script-src` directive.
+				 * Pass a bare hash to add it to `script-src`, or an object with a `kind` to scope it:
+				 * `"element"` → `script-src-elem`, `"attribute"` → `script-src-attr`, `"default"` → `script-src`.
+				 *
+				 * @param {CspHash | { hash: CspHash; kind?: "element" | "attribute" | "default" }} payload - The hash to insert.
 				 *
 				 * ## Example
 				 *
 				 * ```js
 				 * ctx.insertScriptHash("sha256-1234567890abcdef1234567890")
+				 * ctx.insertScriptHash({ hash: "sha256-1234567890abcdef1234567890", kind: "element" })
 				 * ```
 				 *
 				 * [Astro reference](https://docs.astro.build/en/reference/experimental-flags/csp/#cspinsertscripthash)
 				 */
-				insertScriptHash: (hash: CspHash) => void;
+				insertScriptHash: (payload: CspHashEntry) => void;
 		  }
 		| undefined;
 
diff --git a/packages/astro/src/types/public/internal.ts b/packages/astro/src/types/public/internal.ts
index c9a0c500f471..f66c7a81305a 100644
--- a/packages/astro/src/types/public/internal.ts
+++ b/packages/astro/src/types/public/internal.ts
@@ -229,28 +229,29 @@ export interface SSRResult {
 	key: Promise<CryptoKey>;
 	_metadata: SSRMetadata;
 	/**
-	 * `header`:
-	 * - <meta> for static pages
-	 * - Response header for dynamic pages
-	 *
-	 * `meta`:
-	 * - <meta> for all pages
-	 *
-	 * `adapter`:
-	 * - nothing for static pages (the adapter does this)
-	 * - Response header for dynamic pages
+	 * `cspDestination`:
+	 * - `header`: `<meta>` for static pages, response header for dynamic pages
+	 * - `meta`: `<meta>` for all pages
+	 * - `adapter`: nothing for static pages (the adapter does this), response header for dynamic pages
 	 */
 	// NOTE: we use a different type here because at runtime we must provide a value, which is
 	// eventually computed from RouteData.prerender
 	cspDestination: NonNullable<SSRManifestCSP['cspDestination']>;
 	shouldInjectCspMetaTags: boolean;
 	cspAlgorithm: SSRManifestCSP['algorithm'];
+	directives: SSRManifestCSP['directives'];
+	/** @deprecated Use {@linkcode scriptDirective} instead. Holds the `default`-kind `script-src` hashes. */
 	scriptHashes: SSRManifestCSP['scriptHashes'];
+	/** @deprecated Use {@linkcode scriptDirective} instead. Holds the `default`-kind `script-src` resources. */
 	scriptResources: SSRManifestCSP['scriptResources'];
+	/** @deprecated Use {@linkcode styleDirective} instead. Holds the `default`-kind `style-src` hashes. */
 	styleHashes: SSRManifestCSP['styleHashes'];
+	/** @deprecated Use {@linkcode styleDirective} instead. Holds the `default`-kind `style-src` resources. */
 	styleResources: SSRManifestCSP['styleResources'];
-	directives: SSRManifestCSP['directives'];
+	/** @deprecated Use {@linkcode scriptDirective}'s `strictDynamic` instead. */
 	isStrictDynamic: SSRManifestCSP['isStrictDynamic'];
+	scriptDirective: SSRManifestCSP['scriptDirective'];
+	styleDirective: SSRManifestCSP['styleDirective'];
 	internalFetchHeaders?: Record<string, string>;
 }
 
diff --git a/packages/astro/test/csp.test.ts b/packages/astro/test/csp.test.ts
index 716a85b3a1a1..074677303ca2 100644
--- a/packages/astro/test/csp.test.ts
+++ b/packages/astro/test/csp.test.ts
@@ -183,6 +183,54 @@ describe('CSP', () => {
 		);
 	});
 
+	it('should support granular directives via the `kind` option', async () => {
+		fixture = await loadFixture({
+			root: './fixtures/csp/',
+			outDir: './dist/csp-kind',
+			security: {
+				csp: {
+					scriptDirective: {
+						resources: [{ resource: 'https://cdn.example.com', kind: 'element' }],
+					},
+					styleDirective: {
+						resources: [{ resource: "'unsafe-inline'", kind: 'attribute' }],
+					},
+				},
+			},
+		});
+		await fixture.build();
+		const html = await fixture.readFile('/inline/index.html');
+		const $ = cheerio.load(html);
+
+		const content = $('meta[http-equiv="Content-Security-Policy"]').attr('content')!.toString();
+		const parsed = new Map(
+			content
+				.split(';')
+				.map((part) => part.trim())
+				.filter(Boolean)
+				.map((part) => {
+					const [directive, ...resources] = part.split(/\s+/);
+					return [directive, resources] as const;
+				}),
+		);
+
+		// Baseline directives are always present.
+		assert.ok(parsed.has('script-src'), 'script-src baseline present');
+		assert.ok(parsed.has('style-src'), 'style-src baseline present');
+
+		// `script-src-elem` carries the user element resource AND Astro's generated hashes (folded).
+		const scriptElem = parsed.get('script-src-elem');
+		assert.ok(scriptElem, 'script-src-elem present');
+		assert.ok(scriptElem.includes('https://cdn.example.com'), 'element resource applied');
+		assert.ok(
+			scriptElem.some((r) => r.includes('sha256-')),
+			'Astro element hashes folded into script-src-elem',
+		);
+
+		// `style-src-attr` carries the user attribute source and no folded hashes.
+		assert.deepEqual(parsed.get('style-src-attr'), ["'unsafe-inline'"]);
+	});
+
 	it('should return CSP header inside a hook', async () => {
 		let routeToHeaders: Map<string, { headers: Headers }> | undefined;
 		fixture = await loadFixture({
diff --git a/packages/astro/test/types/define-config.ts b/packages/astro/test/types/define-config.ts
index 9bb36db0fc0d..91b169b370f0 100644
--- a/packages/astro/test/types/define-config.ts
+++ b/packages/astro/test/types/define-config.ts
@@ -78,6 +78,25 @@ describe('defineConfig()', () => {
 		});
 	});
 
+	it('Validates CSP resources and hashes with the `kind` option', () => {
+		defineConfig({
+			security: {
+				csp: {
+					scriptDirective: {
+						// bare strings (back-compat) and kind-scoped objects can be mixed
+						resources: ["'self'", { resource: 'https://cdn.example.com', kind: 'element' }],
+						hashes: ['sha256-xx', { hash: 'sha384-xx', kind: 'element' }],
+						strictDynamic: true,
+					},
+					styleDirective: {
+						resources: [{ resource: "'unsafe-inline'", kind: 'attribute' }],
+						hashes: [{ hash: 'sha512-xx', kind: 'default' }],
+					},
+				},
+			},
+		});
+	});
+
 	it('Allows session config without a driver', () => {
 		// Adapters like Cloudflare, Netlify, and Node provide default session drivers,
 		// so users should be able to configure session options without specifying a driver
diff --git a/packages/astro/test/units/config/config-validate.test.ts b/packages/astro/test/units/config/config-validate.test.ts
index 9223b796fc0b..a31de472ee44 100644
--- a/packages/astro/test/units/config/config-validate.test.ts
+++ b/packages/astro/test/units/config/config-validate.test.ts
@@ -619,7 +619,7 @@ describe('Config Validation', () => {
 			const formattedError = stripVTControlCharacters(formatConfigErrorMessage(configError));
 			assert.equal(
 				formattedError,
-				`[config] Astro found issue(s) with your configuration:\n\n! security.csp: Did not match union.\n  > Expected type boolean | Directives script-src and style-src are not allowed in security.csp.directives. Please use security.csp.scriptDirective and security.csp.styleDirective instead.\n  > Received { "directives": [ "script-src 'self'" ] }`,
+				`[config] Astro found issue(s) with your configuration:\n\n! security.csp: Did not match union.\n  > Expected type boolean | Directives script-src and style-src (including their -elem/-attr variants) are not allowed in security.csp.directives. Please use security.csp.scriptDirective and security.csp.styleDirective instead, scoping resources/hashes to the more specific directives with the kind option ("element" or "attribute").\n  > Received { "directives": [ "script-src 'self'" ] }`,
 			);
 		});
 	});
diff --git a/packages/astro/test/units/csp/common.test.ts b/packages/astro/test/units/csp/common.test.ts
index 816e4e3dad5a..d5646a28fb7d 100644
--- a/packages/astro/test/units/csp/common.test.ts
+++ b/packages/astro/test/units/csp/common.test.ts
@@ -1,6 +1,12 @@
 import assert from 'node:assert/strict';
 import { describe, it } from 'node:test';
-import { getDirectives } from '../../../dist/core/csp/common.js';
+import {
+	getDirectives,
+	getScriptHashes,
+	getScriptResources,
+	getStyleHashes,
+	getStyleResources,
+} from '../../../dist/core/csp/common.js';
 
 function buildSettings({ csp, injected }: { csp: any; injected: string[] }): any {
 	const settings = {
@@ -71,4 +77,37 @@ describe('CSP common', () => {
 			["font-src 'self' foo", 'img-src test'],
 		);
 	});
+
+	it('directive getters return the config entries as-authored (kind kept inline)', () => {
+		const csp = {
+			algorithm: 'SHA-256',
+			scriptDirective: {
+				resources: ["'self'", { resource: 'https://cdn', kind: 'element' }],
+				hashes: ['sha256-AAA', { hash: 'sha256-BBB', kind: 'attribute' }],
+			},
+			styleDirective: {
+				resources: [{ resource: "'unsafe-inline'", kind: 'attribute' }],
+			},
+		} as any;
+
+		assert.deepStrictEqual(getScriptResources(csp), [
+			"'self'",
+			{ resource: 'https://cdn', kind: 'element' },
+		]);
+		assert.deepStrictEqual(getScriptHashes(csp), [
+			'sha256-AAA',
+			{ hash: 'sha256-BBB', kind: 'attribute' },
+		]);
+		assert.deepStrictEqual(getStyleResources(csp), [
+			{ resource: "'unsafe-inline'", kind: 'attribute' },
+		]);
+		assert.deepStrictEqual(getStyleHashes(csp), []);
+	});
+
+	it('directive getters return empty arrays for csp: true', () => {
+		assert.deepStrictEqual(getScriptResources(true as any), []);
+		assert.deepStrictEqual(getScriptHashes(true as any), []);
+		assert.deepStrictEqual(getStyleResources(true as any), []);
+		assert.deepStrictEqual(getStyleHashes(true as any), []);
+	});
 });
diff --git a/packages/astro/test/units/csp/config.test.ts b/packages/astro/test/units/csp/config.test.ts
new file mode 100644
index 000000000000..6de7228fa9bc
--- /dev/null
+++ b/packages/astro/test/units/csp/config.test.ts
@@ -0,0 +1,100 @@
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+import { cspHashEntrySchema, cspResourceEntrySchema } from '../../../dist/core/csp/config.js';
+import {
+	normalizeCspHashEntry,
+	normalizeCspResourceEntry,
+} from '../../../dist/core/csp/runtime.js';
+
+describe('cspResourceEntrySchema', () => {
+	it('accepts a bare string (default kind)', () => {
+		assert.equal(cspResourceEntrySchema.safeParse("'self'").success, true);
+	});
+
+	it('accepts a host source scoped to element', () => {
+		assert.equal(
+			cspResourceEntrySchema.safeParse({ resource: 'https://cdn.example.com', kind: 'element' })
+				.success,
+			true,
+		);
+	});
+
+	it("rejects 'unsafe-hashes' on element", () => {
+		assert.equal(
+			cspResourceEntrySchema.safeParse({ resource: "'unsafe-hashes'", kind: 'element' }).success,
+			false,
+		);
+	});
+
+	it('accepts allowed keyword sources on attribute', () => {
+		for (const resource of ["'none'", "'unsafe-hashes'", "'unsafe-inline'", "'report-sample'"]) {
+			assert.equal(
+				cspResourceEntrySchema.safeParse({ resource, kind: 'attribute' }).success,
+				true,
+				`${resource} should be allowed on attribute`,
+			);
+		}
+	});
+
+	it('rejects host sources on attribute', () => {
+		assert.equal(
+			cspResourceEntrySchema.safeParse({ resource: 'https://cdn.example.com', kind: 'attribute' })
+				.success,
+			false,
+		);
+	});
+
+	it('requires `kind` in the object form', () => {
+		assert.equal(
+			cspResourceEntrySchema.safeParse({ resource: 'https://cdn.example.com' }).success,
+			false,
+		);
+	});
+});
+
+describe('cspHashEntrySchema', () => {
+	it('accepts a bare hash and a kind-scoped hash', () => {
+		assert.equal(cspHashEntrySchema.safeParse('sha256-abc').success, true);
+		assert.equal(
+			cspHashEntrySchema.safeParse({ hash: 'sha256-abc', kind: 'element' }).success,
+			true,
+		);
+	});
+
+	it('rejects a malformed hash', () => {
+		assert.equal(cspHashEntrySchema.safeParse('not-a-hash').success, false);
+	});
+});
+
+describe('normalize helpers', () => {
+	it('normalizes resource entries', () => {
+		assert.deepStrictEqual(normalizeCspResourceEntry("'self'"), {
+			resource: "'self'",
+			kind: 'default',
+		});
+		assert.deepStrictEqual(
+			normalizeCspResourceEntry({ resource: 'https://cdn', kind: 'element' }),
+			{
+				resource: 'https://cdn',
+				kind: 'element',
+			},
+		);
+		// `kind` is required in the typed object form, but normalize stays defensive for untyped
+		// (JS) callers that omit it, falling back to "default".
+		assert.deepStrictEqual(normalizeCspResourceEntry({ resource: 'https://cdn' } as any), {
+			resource: 'https://cdn',
+			kind: 'default',
+		});
+	});
+
+	it('normalizes hash entries', () => {
+		assert.deepStrictEqual(normalizeCspHashEntry('sha256-abc'), {
+			hash: 'sha256-abc',
+			kind: 'default',
+		});
+		assert.deepStrictEqual(normalizeCspHashEntry({ hash: 'sha256-abc', kind: 'attribute' }), {
+			hash: 'sha256-abc',
+			kind: 'attribute',
+		});
+	});
+});
diff --git a/packages/astro/test/units/csp/render-csp.test.ts b/packages/astro/test/units/csp/render-csp.test.ts
new file mode 100644
index 000000000000..f5258e86614b
--- /dev/null
+++ b/packages/astro/test/units/csp/render-csp.test.ts
@@ -0,0 +1,195 @@
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+import { renderCspContent } from '../../../dist/runtime/server/render/csp.js';
+import type { SSRResult } from '../../../dist/types/public/internal.js';
+
+/**
+ * Builds a synthetic `SSRResult` containing only the fields `renderCspContent` reads. This lets us
+ * unit test the rendering logic directly, without a pipeline or a full result object.
+ */
+function createCspResult(
+	overrides: {
+		directives?: SSRResult['directives'];
+		scriptDirective?: Partial<SSRResult['scriptDirective']>;
+		styleDirective?: Partial<SSRResult['styleDirective']>;
+		extraScriptHashes?: string[];
+		extraStyleHashes?: string[];
+	} = {},
+): SSRResult {
+	return {
+		directives: overrides.directives ?? [],
+		scriptDirective: {
+			resources: [],
+			hashes: [],
+			strictDynamic: false,
+			...overrides.scriptDirective,
+		},
+		styleDirective: {
+			resources: [],
+			hashes: [],
+			...overrides.styleDirective,
+		},
+		_metadata: {
+			extraScriptHashes: overrides.extraScriptHashes ?? [],
+			extraStyleHashes: overrides.extraStyleHashes ?? [],
+		},
+	} as unknown as SSRResult;
+}
+
+describe('renderCspContent', () => {
+	it('emits only script-src/style-src (defaulting to self) when nothing is configured', () => {
+		assert.equal(renderCspContent(createCspResult()), "script-src 'self' ; style-src 'self' ;");
+	});
+
+	it('includes default-kind hashes on script-src/style-src', () => {
+		assert.equal(
+			renderCspContent(
+				createCspResult({
+					scriptDirective: { hashes: ['sha256-script'] },
+					styleDirective: { hashes: ['sha256-style'] },
+				}),
+			),
+			"script-src 'self' 'sha256-script'; style-src 'self' 'sha256-style';",
+		);
+	});
+
+	it('moves default hashes into script-src-elem instead of duplicating them on the baseline', () => {
+		assert.equal(
+			renderCspContent(
+				createCspResult({
+					scriptDirective: {
+						hashes: ['sha256-default', { hash: 'sha256-elem', kind: 'element' }],
+						resources: [{ resource: 'https://cdn.example.com', kind: 'element' }],
+					},
+				}),
+			),
+			"script-src 'self' ; " +
+				"script-src-elem https://cdn.example.com 'sha256-default' 'sha256-elem'; " +
+				"style-src 'self' ;",
+		);
+	});
+
+	it('emits script-src-elem with the self default when only an element hash is scoped', () => {
+		assert.equal(
+			renderCspContent(
+				createCspResult({
+					scriptDirective: { hashes: [{ hash: 'sha256-elem', kind: 'element' }] },
+				}),
+			),
+			"script-src 'self' ; script-src-elem 'self' 'sha256-elem'; style-src 'self' ;",
+		);
+	});
+
+	it('does not share default hashes into the -attr directives', () => {
+		assert.equal(
+			renderCspContent(
+				createCspResult({
+					styleDirective: {
+						hashes: ['sha256-default'],
+						resources: [{ resource: "'unsafe-inline'", kind: 'attribute' }],
+					},
+				}),
+			),
+			"script-src 'self' ; style-src 'self' 'sha256-default'; style-src-attr 'unsafe-inline';",
+		);
+	});
+
+	it('emits an explicit none scoped to an attribute directive', () => {
+		assert.equal(
+			renderCspContent(
+				createCspResult({
+					scriptDirective: { resources: [{ resource: "'none'", kind: 'attribute' }] },
+				}),
+			),
+			"script-src 'self' ; script-src-attr 'none'; style-src 'self' ;",
+		);
+	});
+
+	it('does not emit a contradictory none when an attribute hash is scoped without resources', () => {
+		assert.equal(
+			renderCspContent(
+				createCspResult({
+					scriptDirective: { hashes: [{ hash: 'sha256-attr', kind: 'attribute' }] },
+				}),
+			),
+			"script-src 'self' ; script-src-attr 'sha256-attr'; style-src 'self' ;",
+		);
+	});
+
+	it('applies strict-dynamic to script-src and inherits it on script-src-elem', () => {
+		assert.equal(
+			renderCspContent(
+				createCspResult({
+					scriptDirective: {
+						hashes: ['sha256-default'],
+						resources: [{ resource: 'https://cdn.example.com', kind: 'element' }],
+						strictDynamic: true,
+					},
+				}),
+			),
+			"script-src 'self' 'strict-dynamic'; " +
+				"script-src-elem https://cdn.example.com 'sha256-default' 'strict-dynamic'; " +
+				"style-src 'self' ;",
+		);
+	});
+
+	it('places render-time (extra) hashes on style-src-elem when it governs elements', () => {
+		assert.equal(
+			renderCspContent(
+				createCspResult({
+					styleDirective: { resources: [{ resource: 'https://cdn.example.com', kind: 'element' }] },
+					extraStyleHashes: ['sha256-svg'],
+				}),
+			),
+			"script-src 'self' ; style-src 'self' ; style-src-elem https://cdn.example.com 'sha256-svg';",
+		);
+	});
+
+	it('deduplicates a hash present in both the directive and the render-time set', () => {
+		assert.equal(
+			renderCspContent(
+				createCspResult({
+					scriptDirective: { hashes: ['sha256-dup'] },
+					extraScriptHashes: ['sha256-dup'],
+				}),
+			),
+			"script-src 'self' 'sha256-dup'; style-src 'self' ;",
+		);
+	});
+
+	it('emits directives in a deterministic order', () => {
+		assert.equal(
+			renderCspContent(
+				createCspResult({
+					directives: ["img-src 'self'"],
+					scriptDirective: {
+						resources: [
+							{ resource: 'https://cdn.example.com', kind: 'element' },
+							{ resource: "'none'", kind: 'attribute' },
+						],
+					},
+					styleDirective: {
+						resources: [
+							{ resource: 'https://styles.example.com', kind: 'element' },
+							{ resource: "'unsafe-inline'", kind: 'attribute' },
+						],
+					},
+				}),
+			),
+			"img-src 'self'; " +
+				"script-src 'self' ; " +
+				'script-src-elem https://cdn.example.com; ' +
+				"script-src-attr 'none'; " +
+				"style-src 'self' ; " +
+				'style-src-elem https://styles.example.com; ' +
+				"style-src-attr 'unsafe-inline';",
+		);
+	});
+
+	it('omits the more specific directives when nothing is scoped to them', () => {
+		assert.equal(
+			renderCspContent(createCspResult({ scriptDirective: { hashes: ['sha256-default'] } })),
+			"script-src 'self' 'sha256-default'; style-src 'self' ;",
+		);
+	});
+});
diff --git a/packages/astro/test/units/csp/rendering.test.ts b/packages/astro/test/units/csp/rendering.test.ts
index e8f6d5cee08c..7af0861ead02 100644
--- a/packages/astro/test/units/csp/rendering.test.ts
+++ b/packages/astro/test/units/csp/rendering.test.ts
@@ -10,26 +10,72 @@ import {
 } from '../../../dist/runtime/server/index.js';
 import type { SSRManifestCSP } from '../../../dist/types/public/internal.js';
 import type { Pipeline } from '../../../dist/core/render/index.js';
-import { createBasicPipeline, renderThroughMiddleware } from '../test-utils.ts';
+import type { AstroLogger } from '../../../dist/core/logger/core.js';
+import { createBasicPipeline, renderThroughMiddleware, SpyLogger } from '../test-utils.ts';
 
 // #region Test Utilities
 
-function createCspPipeline(cspConfig: Partial<SSRManifestCSP> = {}): Pipeline {
-	const pipeline = createBasicPipeline();
+/**
+ * Flat test DSL mapped to the config-shaped manifest. `*Elem`/`*Attr` options are turned into
+ * `kind`-scoped entries; a `-elem`/`-attr` directive is emitted only when it has such entries.
+ */
+type CspTestConfig = {
+	cspDestination?: SSRManifestCSP['cspDestination'];
+	algorithm?: SSRManifestCSP['algorithm'];
+	directives?: SSRManifestCSP['directives'];
+	scriptHashes?: string[];
+	scriptResources?: string[];
+	styleHashes?: string[];
+	styleResources?: string[];
+	isStrictDynamic?: boolean;
+	scriptElemResources?: string[];
+	scriptElemHashes?: string[];
+	scriptAttrResources?: string[];
+	scriptAttrHashes?: string[];
+	styleElemResources?: string[];
+	styleElemHashes?: string[];
+	styleAttrResources?: string[];
+	styleAttrHashes?: string[];
+};
+
+function createCspPipeline(config: CspTestConfig = {}, logger?: AstroLogger): Pipeline {
+	const pipeline = createBasicPipeline(logger ? { logger } : undefined);
+	const resources = (defaults?: string[], element?: string[], attribute?: string[]) => [
+		...(defaults ?? []),
+		...(element ?? []).map((resource) => ({ resource, kind: 'element' as const })),
+		...(attribute ?? []).map((resource) => ({ resource, kind: 'attribute' as const })),
+	];
+	const hashes = (defaults?: string[], element?: string[], attribute?: string[]) => [
+		...(defaults ?? []),
+		...(element ?? []).map((hash) => ({ hash, kind: 'element' as const })),
+		...(attribute ?? []).map((hash) => ({ hash, kind: 'attribute' as const })),
+	];
 	// manifest is readonly, so we use Object.defineProperty to override it for testing
 	Object.defineProperty(pipeline, 'manifest', {
 		value: {
 			...pipeline.manifest,
 			shouldInjectCspMetaTags: true,
 			csp: {
-				cspDestination: cspConfig.cspDestination,
-				algorithm: cspConfig.algorithm || 'SHA-256',
-				scriptHashes: cspConfig.scriptHashes || [],
-				scriptResources: cspConfig.scriptResources || [],
-				styleHashes: cspConfig.styleHashes || [],
-				styleResources: cspConfig.styleResources || [],
-				directives: cspConfig.directives || [],
-				isStrictDynamic: cspConfig.isStrictDynamic || false,
+				cspDestination: config.cspDestination,
+				algorithm: config.algorithm || 'SHA-256',
+				directives: config.directives || [],
+				scriptDirective: {
+					resources: resources(
+						config.scriptResources,
+						config.scriptElemResources,
+						config.scriptAttrResources,
+					),
+					hashes: hashes(config.scriptHashes, config.scriptElemHashes, config.scriptAttrHashes),
+					strictDynamic: config.isStrictDynamic || false,
+				},
+				styleDirective: {
+					resources: resources(
+						config.styleResources,
+						config.styleElemResources,
+						config.styleAttrResources,
+					),
+					hashes: hashes(config.styleHashes, config.styleElemHashes, config.styleAttrHashes),
+				},
 			},
 		},
 		writable: false,
@@ -38,6 +84,18 @@ function createCspPipeline(cspConfig: Partial<SSRManifestCSP> = {}): Pipeline {
 	return pipeline;
 }
 
+/** Parse a CSP string into a map of directive name -> source tokens. */
+function parseCsp(content: string): Map<string, string[]> {
+	const map = new Map<string, string[]>();
+	for (const part of content.split(';')) {
+		const trimmed = part.trim();
+		if (!trimmed) continue;
+		const [directive, ...resources] = trimmed.split(/\s+/);
+		map.set(directive, resources);
+	}
+	return map;
+}
+
 async function renderPage(
 	PageComponent: ReturnType<typeof createComponent>,
 	pipeline: Pipeline,
@@ -418,6 +476,204 @@ describe('CSP Rendering', () => {
 		});
 	});
 
+	describe('Granular directives (kind)', () => {
+		it('moves Astro element hashes into script-src-elem instead of duplicating them on script-src', async () => {
+			const pipeline = createCspPipeline({
+				scriptHashes: ['sha256-island'],
+				scriptElemResources: ['https://cdn.example.com'],
+				scriptElemHashes: ['sha256-userElem'],
+			});
+
+			const { html } = await renderPage(SimplePage, pipeline);
+			const parsed = parseCsp(
+				cheerio.load(html)('meta[http-equiv="Content-Security-Policy"]').attr('content')!,
+			);
+
+			// The generated hash moves to `script-src-elem` (which governs `<script>` elements); the
+			// baseline only keeps `'self'`, since the browser won't fall back to it.
+			assert.deepEqual(parsed.get('script-src'), ["'self'"]);
+			assert.deepEqual(parsed.get('script-src-elem'), [
+				'https://cdn.example.com',
+				"'sha256-island'",
+				"'sha256-userElem'",
+			]);
+		});
+
+		it('moves Astro element hashes into style-src-elem instead of duplicating them on style-src', async () => {
+			const pipeline = createCspPipeline({
+				styleHashes: ['sha256-css'],
+				styleElemResources: ["'self'"],
+			});
+
+			const { html } = await renderPage(SimplePage, pipeline);
+			const parsed = parseCsp(
+				cheerio.load(html)('meta[http-equiv="Content-Security-Policy"]').attr('content')!,
+			);
+
+			assert.deepEqual(parsed.get('style-src'), ["'self'"]);
+			assert.deepEqual(parsed.get('style-src-elem'), ["'self'", "'sha256-css'"]);
+		});
+
+		it('does not fold Astro element hashes into script-src-attr', async () => {
+			const pipeline = createCspPipeline({
+				scriptHashes: ['sha256-island'],
+				scriptAttrResources: ["'unsafe-inline'"],
+			});
+
+			const { html } = await renderPage(SimplePage, pipeline);
+			const parsed = parseCsp(
+				cheerio.load(html)('meta[http-equiv="Content-Security-Policy"]').attr('content')!,
+			);
+
+			// Only the user-provided attribute source — Astro's element hashes are NOT folded in.
+			assert.deepEqual(parsed.get('script-src-attr'), ["'unsafe-inline'"]);
+		});
+
+		it('allows inline style attributes via style-src-attr', async () => {
+			const pipeline = createCspPipeline({
+				styleAttrResources: ["'unsafe-inline'"],
+			});
+
+			const { html } = await renderPage(SimplePage, pipeline);
+			const parsed = parseCsp(
+				cheerio.load(html)('meta[http-equiv="Content-Security-Policy"]').attr('content')!,
+			);
+
+			assert.deepEqual(parsed.get('style-src-attr'), ["'unsafe-inline'"]);
+		});
+
+		it("does not emit a contradictory 'none' when an attribute hash is provided without resources", async () => {
+			const pipeline = createCspPipeline({
+				styleAttrHashes: ['sha256-attrHash'],
+			});
+
+			const { html } = await renderPage(SimplePage, pipeline);
+			const parsed = parseCsp(
+				cheerio.load(html)('meta[http-equiv="Content-Security-Policy"]').attr('content')!,
+			);
+
+			assert.deepEqual(parsed.get('style-src-attr'), ["'sha256-attrHash'"]);
+		});
+
+		it("inherits 'strict-dynamic' onto script-src-elem", async () => {
+			const pipeline = createCspPipeline({
+				isStrictDynamic: true,
+				scriptHashes: ['sha256-island'],
+				scriptElemResources: ["'self'"],
+			});
+
+			const { html } = await renderPage(SimplePage, pipeline);
+			const parsed = parseCsp(
+				cheerio.load(html)('meta[http-equiv="Content-Security-Policy"]').attr('content')!,
+			);
+
+			assert.ok(
+				parsed.get('script-src')?.includes("'strict-dynamic'"),
+				'script-src has strict-dynamic',
+			);
+			assert.ok(
+				parsed.get('script-src-elem')?.includes("'strict-dynamic'"),
+				'script-src-elem inherits strict-dynamic',
+			);
+		});
+
+		it('omits more-specific directives when not enabled', async () => {
+			const pipeline = createCspPipeline({ scriptHashes: ['sha256-island'] });
+
+			const { html } = await renderPage(SimplePage, pipeline);
+			const content = cheerio
+				.load(html)('meta[http-equiv="Content-Security-Policy"]')
+				.attr('content')!;
+
+			assert.ok(!content.includes('script-src-elem'), 'no script-src-elem');
+			assert.ok(!content.includes('script-src-attr'), 'no script-src-attr');
+			assert.ok(!content.includes('style-src-elem'), 'no style-src-elem');
+			assert.ok(!content.includes('style-src-attr'), 'no style-src-attr');
+		});
+	});
+
+	describe('Runtime CSP API - kind', () => {
+		it('routes element and attribute inserts to the right directives', async () => {
+			const pipeline = createCspPipeline({ scriptHashes: ['sha256-island'] });
+
+			const PageWithKindApi = createComponent((result: any) => {
+				const Astro = result.createAstro({}, {});
+				Astro.csp.insertScriptResource({ resource: 'https://cdn.example.com', kind: 'element' });
+				Astro.csp.insertScriptHash({ hash: 'sha256-elemHash', kind: 'element' });
+				Astro.csp.insertStyleResource({ resource: "'unsafe-inline'", kind: 'attribute' });
+				return render`<html><head>${renderHead()}</head><body>${maybeRenderHead()}<h1>Kind</h1></body></html>`;
+			});
+
+			const { html } = await renderPage(PageWithKindApi, pipeline);
+			const parsed = parseCsp(
+				cheerio.load(html)('meta[http-equiv="Content-Security-Policy"]').attr('content')!,
+			);
+
+			assert.ok(parsed.get('script-src-elem')?.includes('https://cdn.example.com'));
+			// element insert folds the auto hash + the runtime element hash.
+			assert.ok(parsed.get('script-src-elem')?.includes("'sha256-island'"));
+			assert.ok(parsed.get('script-src-elem')?.includes("'sha256-elemHash'"));
+			assert.deepEqual(parsed.get('style-src-attr'), ["'unsafe-inline'"]);
+		});
+
+		it('a bare string still targets the default directive (back-compat)', async () => {
+			const pipeline = createCspPipeline();
+
+			const PageWithDefaultApi = createComponent((result: any) => {
+				const Astro = result.createAstro({}, {});
+				Astro.csp.insertScriptResource('https://scripts.cdn.example.com');
+				return render`<html><head>${renderHead()}</head><body>${maybeRenderHead()}<h1>Default</h1></body></html>`;
+			});
+
+			const { html } = await renderPage(PageWithDefaultApi, pipeline);
+			const parsed = parseCsp(
+				cheerio.load(html)('meta[http-equiv="Content-Security-Policy"]').attr('content')!,
+			);
+
+			assert.ok(parsed.get('script-src')?.includes('https://scripts.cdn.example.com'));
+			assert.ok(!parsed.has('script-src-elem'), 'should not create script-src-elem');
+		});
+
+		it('warns about the fallback when general resources coexist with an element insert', async () => {
+			const logger = new SpyLogger();
+			const pipeline = createCspPipeline(
+				{ scriptResources: ['https://global.cdn.example.com'] },
+				logger,
+			);
+
+			const PageWithElemInsert = createComponent((result: any) => {
+				const Astro = result.createAstro({}, {});
+				Astro.csp.insertScriptResource({ resource: 'https://cdn.example.com', kind: 'element' });
+				return render`<html><head>${renderHead()}</head><body>${maybeRenderHead()}<h1>Warn</h1></body></html>`;
+			});
+
+			await renderPage(PageWithElemInsert, pipeline);
+
+			const cspWarnings = logger.logs.filter(
+				(l) => l.label === 'csp' && l.level === 'warn' && l.message.includes('script-src-elem'),
+			);
+			assert.equal(cspWarnings.length, 1, 'should warn exactly once about the fallback');
+		});
+
+		it('does not warn when only Astro defaults exist on the general directive', async () => {
+			const logger = new SpyLogger();
+			const pipeline = createCspPipeline({ scriptHashes: ['sha256-island'] }, logger);
+
+			const PageWithElemInsert = createComponent((result: any) => {
+				const Astro = result.createAstro({}, {});
+				Astro.csp.insertScriptResource({ resource: 'https://cdn.example.com', kind: 'element' });
+				return render`<html><head>${renderHead()}</head><body>${maybeRenderHead()}<h1>NoWarn</h1></body></html>`;
+			});
+
+			await renderPage(PageWithElemInsert, pipeline);
+
+			const cspWarnings = logger.logs.filter(
+				(l) => l.label === 'csp' && l.message.includes('fall back'),
+			);
+			assert.equal(cspWarnings.length, 0, 'should not warn when no custom general resources exist');
+		});
+	});
+
 	describe('CSP Content Parsing', () => {
 		it('should generate well-formed CSP content', async () => {
 			const pipeline = createCspPipeline({
diff --git a/packages/astro/test/units/csp/runtime.test.ts b/packages/astro/test/units/csp/runtime.test.ts
index 698cda123ec1..be9adab500e2 100644
--- a/packages/astro/test/units/csp/runtime.test.ts
+++ b/packages/astro/test/units/csp/runtime.test.ts
@@ -2,7 +2,43 @@
 import assert from 'node:assert/strict';
 import { describe, it } from 'node:test';
 import type { CspDirective } from '../../../dist/core/csp/config.js';
-import { deduplicateDirectiveValues, pushDirective } from '../../../dist/core/csp/runtime.js';
+import {
+	deduplicateDirectiveValues,
+	partitionByKind,
+	pushDirective,
+} from '../../../dist/core/csp/runtime.js';
+
+describe('partitionByKind', () => {
+	it('groups resources and hashes by their kind (bare entries are "default")', () => {
+		const groups = partitionByKind({
+			resources: [
+				"'self'",
+				{ resource: 'https://cdn', kind: 'element' },
+				{ resource: "'unsafe-inline'", kind: 'attribute' },
+				{ resource: 'https://cdn2', kind: 'default' },
+			],
+			hashes: [
+				'sha256-AAA',
+				{ hash: 'sha256-BBB', kind: 'element' },
+				{ hash: 'sha256-CCC', kind: 'attribute' },
+			],
+		});
+
+		assert.deepStrictEqual(groups.default.resources, ["'self'", 'https://cdn2']);
+		assert.deepStrictEqual(groups.element.resources, ['https://cdn']);
+		assert.deepStrictEqual(groups.attribute.resources, ["'unsafe-inline'"]);
+		assert.deepStrictEqual(groups.default.hashes, ['sha256-AAA']);
+		assert.deepStrictEqual(groups.element.hashes, ['sha256-BBB']);
+		assert.deepStrictEqual(groups.attribute.hashes, ['sha256-CCC']);
+	});
+
+	it('returns empty groups for empty input', () => {
+		const groups = partitionByKind({ resources: [], hashes: [] });
+		for (const kind of ['default', 'element', 'attribute'] as const) {
+			assert.deepStrictEqual(groups[kind], { resources: [], hashes: [] });
+		}
+	});
+});
 
 describe('deduplicateDirectiveValues', () => {
 	it('merges directives', () => {
diff --git a/packages/astro/test/units/csp/warnings.test.ts b/packages/astro/test/units/csp/warnings.test.ts
new file mode 100644
index 000000000000..14361de76835
--- /dev/null
+++ b/packages/astro/test/units/csp/warnings.test.ts
@@ -0,0 +1,80 @@
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+import { warnIfCspResourceFallbackShadowing } from '../../../dist/core/messages/runtime.js';
+import { SpyLogger } from '../test-utils.ts';
+
+function configWithCsp(csp: unknown): any {
+	return { security: { csp } };
+}
+
+function cspWarnings(logger: SpyLogger): string[] {
+	return logger.logs.filter((l) => l.label === 'csp' && l.level === 'warn').map((l) => l.message);
+}
+
+describe('warnIfCspResourceFallbackShadowing', () => {
+	it('warns when default resources coexist with an element entry', () => {
+		const logger = new SpyLogger();
+		warnIfCspResourceFallbackShadowing(
+			configWithCsp({
+				scriptDirective: {
+					resources: ["'self'", { resource: 'https://cdn.example.com', kind: 'element' }],
+				},
+			}),
+			logger,
+		);
+
+		const warnings = cspWarnings(logger);
+		assert.equal(warnings.length, 1);
+		assert.match(warnings[0], /script-src-elem/);
+		assert.match(warnings[0], /'self'/);
+	});
+
+	it('warns when default resources coexist with an attribute entry (via hashes)', () => {
+		const logger = new SpyLogger();
+		warnIfCspResourceFallbackShadowing(
+			configWithCsp({
+				styleDirective: {
+					resources: ['https://styles.example.com'],
+					hashes: [{ hash: 'sha256-abc', kind: 'attribute' }],
+				},
+			}),
+			logger,
+		);
+
+		const warnings = cspWarnings(logger);
+		assert.equal(warnings.length, 1);
+		assert.match(warnings[0], /style-src-attr/);
+	});
+
+	it('does not warn when there are only default resources', () => {
+		const logger = new SpyLogger();
+		warnIfCspResourceFallbackShadowing(
+			configWithCsp({ scriptDirective: { resources: ["'self'", 'https://cdn.example.com'] } }),
+			logger,
+		);
+
+		assert.equal(cspWarnings(logger).length, 0);
+	});
+
+	it('does not warn when there are no default resources to shadow', () => {
+		const logger = new SpyLogger();
+		warnIfCspResourceFallbackShadowing(
+			configWithCsp({
+				scriptDirective: { resources: [{ resource: 'https://cdn.example.com', kind: 'element' }] },
+			}),
+			logger,
+		);
+
+		assert.equal(cspWarnings(logger).length, 0);
+	});
+
+	it('does not warn when CSP is disabled or enabled without directives', () => {
+		const loggerFalse = new SpyLogger();
+		warnIfCspResourceFallbackShadowing(configWithCsp(false), loggerFalse);
+		assert.equal(cspWarnings(loggerFalse).length, 0);
+
+		const loggerTrue = new SpyLogger();
+		warnIfCspResourceFallbackShadowing(configWithCsp(true), loggerTrue);
+		assert.equal(cspWarnings(loggerTrue).length, 0);
+	});
+});
diff --git a/packages/astro/test/units/errors/zod-error-map.test.ts b/packages/astro/test/units/errors/zod-error-map.test.ts
index e5a9dfe33186..fb9e1b375466 100644
--- a/packages/astro/test/units/errors/zod-error-map.test.ts
+++ b/packages/astro/test/units/errors/zod-error-map.test.ts
@@ -141,6 +141,42 @@ describe('errorMap — invalid_union', () => {
 		assert.match(msg, /Expected type/);
 	});
 
+	it('does not throw when the union input is undefined (e.g. nested union issues)', () => {
+		// Regression: `stringify(issue.input)` previously crashed because `JSON.stringify(undefined)`
+		// returns `undefined`. This happens for nested union issues (e.g. a `string | { ... }` entry
+		// inside an array) where `input` is not populated on the recursed union issue.
+		const msg = getMessage(
+			errorMap({
+				code: 'invalid_union',
+				input: undefined,
+				path: ['security', 'csp', 'styleDirective', 'hashes', 0],
+				message: '',
+				errors: [
+					[
+						{
+							code: 'invalid_type',
+							expected: 'string',
+							input: undefined,
+							path: ['security', 'csp', 'styleDirective', 'hashes', 0, 'a'],
+							message: '',
+						},
+					],
+					[
+						{
+							code: 'invalid_type',
+							expected: 'object',
+							input: undefined,
+							path: ['security', 'csp', 'styleDirective', 'hashes', 0, 'b'],
+							message: '',
+						},
+					],
+				],
+			} as any),
+		);
+		assert.match(msg, /Did not match union/);
+		assert.match(msg, /Received `undefined`/);
+	});
+
 	it('handles nested path for union error', () => {
 		const msg = getMessage(
 			errorMap({
diff --git a/packages/astro/test/units/server-islands/server-islands-render.test.ts b/packages/astro/test/units/server-islands/server-islands-render.test.ts
index f0e0d8093017..91a828810535 100644
--- a/packages/astro/test/units/server-islands/server-islands-render.test.ts
+++ b/packages/astro/test/units/server-islands/server-islands-render.test.ts
@@ -67,15 +67,17 @@ async function createStubResult(overrides: Partial<SSRResult> = {}): Promise<SSR
 			propagators: new Set(),
 			templateDepth: 0,
 		},
-		cspDestination: 'header',
 		shouldInjectCspMetaTags: false,
+		cspDestination: 'header',
 		cspAlgorithm: 'SHA-256',
+		directives: [],
 		scriptHashes: [],
 		scriptResources: [],
 		styleHashes: [],
 		styleResources: [],
-		directives: [],
 		isStrictDynamic: false,
+		scriptDirective: { resources: [], hashes: [], strictDynamic: false },
+		styleDirective: { resources: [], hashes: [] },
 		internalFetchHeaders: {},
 		...overrides,
 	};