fix(theme): allow a csp nonce to be specified (#15359)

resolves #15358
vuetifyjs · Jul 5, 2022 · 0a3d070 · 0a3d070
1 parent 9abf709
commit 0a3d070
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 5 deletions.
diff --git a/packages/docs/src/pages/en/features/theme.md b/packages/docs/src/pages/en/features/theme.md
@@ -248,6 +248,30 @@ interface ThemeInstance {
 }
 ```
 
+## CSP Nonce
+
+Pages with the `script-src` or `style-src` CSP rules enabled may require a **nonce** to be specified for embedded style tags.
+
+```html
+<!-- Use with script-src -->
+Content-Security-Policy: script-src 'self' 'nonce-dQw4w9WgXcQ'
+
+<!-- Use with style-src -->
+Content-Security-Policy: style-src 'self' 'nonce-dQw4w9WgXcQ'
+```
+
+```ts
+// src/plugins/vuetify.js
+
+import {createVuetify} from 'vuetify'
+
+export const vuetify = createVuetify({
+  theme: {
+    cspNonce: 'dQw4w9WgXcQ'
+  }
+})
+```
+
 ## Implementation
 
 Vuetify generates theme styles at runtime according to the given configuration. The generated styles are injected into the `<head>` section of the DOM in a `<style>` tag with an **id** of `vuetify-theme-stylesheet`.

diff --git a/packages/vuetify/src/composables/__tests__/theme.spec.ts b/packages/vuetify/src/composables/__tests__/theme.spec.ts
@@ -81,6 +81,20 @@ describe('createTheme', () => {
     expect(theme.computedThemes.value.light.colors.background).toBe('#FF0000')
   })
 
+  it('should set a CSP nonce if configured', async () => {
+    createTheme(app, { cspNonce: 'my-csp-nonce' })
+
+    const styleElement = document.getElementById('vuetify-theme-stylesheet')
+    expect(styleElement?.getAttribute('nonce')).toBe('my-csp-nonce')
+  })
+
+  it('should not set a CSP nonce if option was left blank', async () => {
+    createTheme(app, {})
+
+    const styleElement = document.getElementById('vuetify-theme-stylesheet')
+    expect(styleElement?.getAttribute('nonce')).toBeNull()
+  })
+
   // it('should use vue-meta@2.3 functionality', () => {
   //   const theme = createTheme()
   //   const set = jest.fn()

diff --git a/packages/vuetify/src/composables/theme.ts b/packages/vuetify/src/composables/theme.ts
@@ -25,18 +25,20 @@ import { APCAcontrast } from '@/util/color/APCA'
 
 // Types
 import type { App, DeepReadonly, InjectionKey, Ref } from 'vue'
-import type { HeadClient } from '@vueuse/head'
+import type { HeadAttrs, HeadClient } from '@vueuse/head'
 
 type DeepPartial<T> = T extends object ? { [P in keyof T]?: DeepPartial<T[P]> } : T
 
 export type ThemeOptions = false | {
+  cspNonce?: string
   defaultTheme?: string
   variations?: false | VariationsOptions
   themes?: Record<string, ThemeDefinition>
 }
 export type ThemeDefinition = DeepPartial<InternalThemeDefinition>
 
 interface InternalThemeOptions {
+  cspNonce?: string
   isDisabled: boolean
   defaultTheme: string
   variations: false | VariationsOptions
@@ -294,13 +296,16 @@ export function createTheme (app: App, options?: ThemeOptions): ThemeInstance {
   })
 
   if (head) {
-    head.addHeadObjs(computed(() => ({
-      style: [{
+    head.addHeadObjs(computed(() => {
+      const style: HeadAttrs = {
         children: styles.value,
         type: 'text/css',
         id: 'vuetify-theme-stylesheet',
-      }],
-    })))
+      }
+      if (parsedOptions.cspNonce) style.nonce = parsedOptions.cspNonce
+
+      return { style: [style] }
+    }))
 
     if (IN_BROWSER) {
       watchEffect(() => head.updateDOM())
@@ -318,6 +323,7 @@ export function createTheme (app: App, options?: ThemeOptions): ThemeInstance {
         const el = document.createElement('style')
         el.type = 'text/css'
         el.id = 'vuetify-theme-stylesheet'
+        if (parsedOptions.cspNonce) el.setAttribute('nonce', parsedOptions.cspNonce)
 
         styleEl = el
         document.head.appendChild(styleEl)