Merge pull request #55 from kernoeb/main

feat: handle nonce/csp

Author: EranGrin

README.md

@@ -49,6 +49,7 @@ See the [Documentation](https://erangrin.github.io/vue-web-component-wrapper) fo
 - **Async Initialization**: Option to delay the initialization until its Promise resolves.
 - **Loader Support**: Support for loader spinner elements until the application is fully initialized.
 - **Hide slot content until the component is fully mounted**: Option to hide the content of named slots until the web-component is fully mounted.
+
 ## CSS Frameworks Examples
 
 - **Tailwind CSS**: [Demo](https://stackblitz.com/edit/vue-web-component-wrapper?file=README.md&startScript=tailwind-demo)
@@ -167,6 +168,7 @@ createWebComponent({
 - **asyncInitialization**: Accepts a function that returns a Promise.
 - **loaderAttribute**: Defines the attribute used to mark loader spinner (default is `data-web-component-loader`).
 - **hideSlotContentUntilMounted**: Hide the content of named slots until the component is fully mounted.
+- **nonce**: Content Security Policy (CSP) nonce for your web component.
 
 ### asyncInitialization
 
@@ -175,7 +177,7 @@ The `asyncInitialization` option accepts a function that returns a Promise. The
 #### Example Usage
 
 ```javascript
-const asyncPromise = () => { 
+const asyncPromise = () => {
   return new Promise((resolve) => {
     setTimeout(() => {
       resolve()
@@ -192,7 +194,7 @@ createWebComponent({
   h,
   createApp,
   getCurrentInstance,
-  asyncInitialization: asyncPromise, // default is Promise.resolve() 
+  asyncInitialization: asyncPromise, // default is Promise.resolve()
   loaderAttribute: 'data-web-component-loader',
   hideSlotContentUntilMounted: true, // default is false
 });
@@ -270,6 +272,10 @@ createWebComponent({
 
 The `cssFrameworkStyles` option imports the CSS of your CSS framework or any other global CSS styles your application needs. By setting `replaceRootWithHostInCssFramework` to `true`, any `:root` selectors in your styles will be replaced with `:host`, ensuring correct scoping within the web component.
 
+### nonce
+
+The `nonce` option is used to set a Content Security Policy (CSP) nonce for your web component. This is useful when your application uses inline scripts or styles, as it allows you to specify a unique nonce value that can be used to whitelist the inline content.
+
 ### 4. Build Your Application
 
 Tested bundlers to build the web-component application.

package/index.js

@@ -17,6 +17,7 @@ export const createWebComponent = ({
   asyncInitialization = () => Promise.resolve(),
   loaderAttribute = 'data-web-component-loader',
   hideSlotContentUntilMounted = false,
+  nonce
 }) => {
   if (!rootComponent) {
     console.warn('No root component provided. Please provide a root component to create a web component.')
@@ -59,7 +60,8 @@ export const createWebComponent = ({
     replaceRootWithHostInCssFramework,
     asyncInitialization,
     loaderAttribute,
-    hideSlotContentUntilMounted
+    hideSlotContentUntilMounted,
+    nonce
   }, ).then((customElementConfig) => {
     customElements.define(
       elementName,

package/src/api-custom-element.ts

@@ -46,6 +46,10 @@ export interface DefineCustomElementConfig {
    * @default true
    */
   shadowRoot?: boolean
+  /**
+   * Nonce to use for CSP
+   */
+  nonce?: string
 }
 
 // defineCustomElement provides the same type inference as defineComponent
@@ -186,6 +190,7 @@ export const defineSSRCustomElement = ((
   config?: DefineCustomElementConfig
 ) => {
 
+
   // @ts-expect-error
   return defineCustomElement(options, hydrate)
 }) as typeof defineCustomElement
@@ -525,6 +530,7 @@ export class VueElement extends BaseClass {
       styles.forEach(css => {
         const s = document.createElement('style')
         s.textContent = css
+        if (this._config.nonce) s.setAttribute('nonce', this._config.nonce);
         this._root!.prepend(s)
         if (__DEV__) {
           ;(this._styles || (this._styles = [])).push(s)

package/src/web-component-util.js

@@ -40,7 +40,8 @@ export const defineCustomElement = ({
   replaceRootWithHostInCssFramework,
   asyncInitialization,
   loaderAttribute,
-  hideSlotContentUntilMounted
+  hideSlotContentUntilMounted,
+  nonce
 }) =>
   {
     const customElementDefiner = disableShadowDOM ? VueDefineCustomElementPatch : VueDefineCustomElement
@@ -50,6 +51,7 @@ export const defineCustomElement = ({
     : cssFrameworkStyles;
     const customElementConfig = customElementDefiner({
     styles: [modifiedCssFrameworkStyles],
+    nonce,
     props: {
       ...rootComponent.props,
       modelValue: { type: [String, Number, Boolean, Array, Object] } // v-model support
@@ -82,6 +84,7 @@ export const defineCustomElement = ({
             if (styles?.length) {
               this.__style = document.createElement('style')
               this.__style.innerText = styles.join().replace(/\n/g, '')
+              if (nonce) this.__style.setAttribute('nonce', nonce);
               nearestElement(this.$el).append(this.__style)
             }
           }
@@ -168,7 +171,7 @@ export const defineCustomElement = ({
         }
       );
     },
-  }, disableShadowDOM && { shadowRoot: false })
+  }, { shadowRoot: !disableShadowDOM, nonce })
 
   return asyncInitialization().then(() => {
     return customElementConfig;

package/types.d.ts

@@ -19,6 +19,7 @@ export interface CreateWebComponentOptions {
   asyncInitialization?: () => Promise<any>
   loaderAttribute?: string
   hideSlotContentUntilMounted?: boolean
+  nonce?: string
 }
 
 export function createWebComponent(options: CreateWebComponentOptions): void