vite-plugin-csp-dev 1.0.0

package/LICENCE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2025-present gatisr
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,41 @@
+# vite-plugin-csp-dev
+
+A Vite plugin to add Content Security Policy (CSP) headers to your application in serve mode.
+
+In order to set CSP headers in production builds, you must configure your web server accordingly, as this plugin only affects the development server.
+
+## Usage
+
+In your `vite.config.mjs`:
+
+```js
+import { secureHeaders } from 'vite-plugin-csp-dev';
+
+export default {
+  plugins: [
+    secureHeaders({
+      reportOnly: false, // default: false - Report CSP violations instead of blocking them.
+      processI18n: true, // default: true - Process i18n.
+      defaultSrc: "'self'", // default: "'self'" - Value for default-src directive in CSP.
+      noncePlaceholder: 'NONCE_PLACEHOLDER', // default: 'NONCE_PLACEHOLDER' - Placeholder for nonce in HTML.
+      xssProtection: '1; mode=block', // default: '1; mode=block' - Value for X-XSS-Protection header.
+      frameOptions: 'DENY', // default: 'DENY' - Value for X-Frame-Options header.
+      contentTypeOptions: 'nosniff', // default: 'nosniff' - Value for X-Content-Type-Options header.
+      referrerPolicy: 'strict-origin-when-cross-origin', // default: 'strict-origin-when-cross-origin' - Value for Referrer-Policy header.
+      permissionsPolicy: 'camera=(), microphone=(), geolocation=()', // default: 'camera=(), microphone=(), geolocation()' - Value for Permissions-Policy header.
+      cacheControl: 'no-store, max-age=0', // default: 'no-store, max-age=0' - Value for Cache-Control header.
+      scriptSrc: (nonce) => `'self' 'nonce-${nonce}'`, // default: `'self' 'nonce-${nonce}'` - Function to generate script-src directive in CSP
+      styleSrc: (nonce) => `'self' 'nonce-${nonce}'`, // default: `'self' 'nonce-${nonce}'` - Function to generate style-src directive in CSP
+      workerSrc: "'self'", // default: "'self'" - Value for worker-src directive in CSP.
+      connectSrc: "'self'", // default: "'self'" - Value for connect-src directive in CSP.
+      imgSrc: "'self' data:", // default: "'self' data:" - Value for img-src directive in CSP.
+      fontSrc: "'self'", // default: "'self'" - Value for font-src directive in CSP.
+      objectSrc: "'none'", // default: "'none'" - Value for object-src directive in CSP.
+      frameSrc: "'self'", // default: "'self'" - Value for frame-src directive in CSP.
+      baseUri: "'self'", // default: "'self'" - Value for base-uri directive in CSP.
+      formAction: "'self'", // default: "'self'" - Value for form-action directive in CSP.
+      frameAncestors: "'none'", // default: "'none'" - Value for frame-ancestors directive in CSP.
+    }),
+  ],
+};
+```

package/dist/index.d.ts

@@ -0,0 +1,97 @@
+import { Plugin as Plugin_2 } from 'vite';
+
+declare type Options = {
+    /**
+     * - Whether to use Content-Security-Policy-Report-Only header instead of Content-Security-Policy header. For development purposes.
+     */
+    reportOnly?: boolean;
+    /**
+     * - Whether to process i18n
+     */
+    processI18n?: boolean;
+    /**
+     * - Value for default-src directive in CSP
+     */
+    defaultSrc?: string;
+    /**
+     * - The placeholder for nonce in the HTML
+     */
+    noncePlaceholder?: string;
+    /**
+     * - Value for X-XSS-Protection header
+     */
+    xssProtection?: string;
+    /**
+     * - Value for X-Frame-Options header
+     */
+    frameOptions?: string;
+    /**
+     * - Value for X-Content-Type-Options header
+     */
+    contentTypeOptions?: string;
+    /**
+     * - Value for Referrer-Policy header
+     */
+    referrerPolicy?: string;
+    /**
+     * - Value for Permissions-Policy header
+     */
+    permissionsPolicy?: string;
+    /**
+     * - Value for Cache-Control header
+     */
+    cacheControl?: string;
+    /**
+     * - Function to generate script-src directive in CSP, nonce is the generated nonce value
+     */
+    scriptSrc?: (nonce: string) => string;
+    /**
+     * - Function to generate style-src directive in CSP, nonce is the generated nonce value
+     */
+    styleSrc?: (nonce: string) => string;
+    /**
+     * - Value for img-src directive in CSP
+     */
+    imgSrc?: string;
+    /**
+     * - Value for font-src directive in CSP
+     */
+    fontSrc?: string;
+    /**
+     * - Value for object-src directive in CSP
+     */
+    objectSrc?: string;
+    /**
+     * - Value for frame-src directive in CSP
+     */
+    frameSrc?: string;
+    /**
+     * - Value for base-uri directive in CSP
+     */
+    baseUri?: string;
+    /**
+     * - Value for form-action directive in CSP
+     */
+    formAction?: string;
+    /**
+     * - Value for frame-ancestors directive in CSP
+     */
+    frameAncestors?: string;
+    /**
+     * - Value for worker-src directive in CSP
+     */
+    workerSrc?: string;
+    /**
+     * - Value for connect-src directive in CSP
+     */
+    connectSrc?: string;
+};
+
+/**
+ * Creates a Vite plugin for handling Content Security Policy with nonce and i18n processing
+ * @param {Options} [options] - Configuration options for the plugin
+ * @returns {import('vite').Plugin} The Vite plugin instance
+ */
+export declare function secureHeaders(options?: Options): Plugin_2;
+
+export { }

package/dist/index.js

@@ -0,0 +1,138 @@
+import { createHash as B } from "node:crypto";
+const L = () => B("sha256").update(Date.now().toString()).digest("base64");
+function I(w = {}) {
+  const {
+    reportOnly: N = !1,
+    processI18n: v = !0,
+    defaultSrc: S = "'self'",
+    noncePlaceholder: C = "NONCE_PLACEHOLDER",
+    xssProtection: p = "1; mode=block",
+    frameOptions: m = "DENY",
+    contentTypeOptions: u = "nosniff",
+    referrerPolicy: f = "strict-origin-when-cross-origin",
+    permissionsPolicy: y = "camera=(), microphone=(), geolocation=()",
+    cacheControl: $ = "no-store, max-age=0",
+    scriptSrc: g,
+    styleSrc: h,
+    imgSrc: A = "'self' data:",
+    fontSrc: H = "'self'",
+    objectSrc: P = "'none'",
+    frameSrc: E = "'self'",
+    baseUri: O = "'self'",
+    formAction: b = "'self'",
+    frameAncestors: k = "'none'",
+    workerSrc: j = "'self'",
+    connectSrc: x = "'self'"
+  } = w;
+  let i;
+  return {
+    name: "vite-plugin-csp-dev",
+    enforce: "post",
+    apply: "serve",
+    config(n, s) {
+      if (n.resolve = n.resolve || {}, n.resolve.alias = n.resolve.alias || {}, v) {
+        n.plugins = n.plugins || [];
+        const e = s.command === "serve";
+        let o = "vue-i18n/dist/vue-i18n.esm-browser.prod.js";
+        e && (o = "vue-i18n/dist/vue-i18n.esm-browser.js"), n.resolve.alias["vue-i18n"] = o;
+      }
+      return n;
+    },
+    configResolved(n) {
+      i = n.command === "serve" ? L() : C, n.html = n.html || {}, n.html.cspNonce = i;
+    },
+    /**
+     * @param {import('vite').ViteDevServer} server - The Vite development server
+     */
+    configureServer(n) {
+      n.middlewares.use((s, e, o) => {
+        const t = i, c = g ? g(t) : `'self' 'nonce-${t}'`, r = h ? h(t) : `'self' 'nonce-${t}'`, l = [
+          `default-src ${S}`,
+          `script-src ${c}`,
+          `style-src ${r}`,
+          `img-src ${A}`,
+          `font-src ${H}`,
+          `object-src ${P}`,
+          `base-uri ${O}`,
+          `frame-src ${E}`,
+          `form-action ${b}`,
+          `frame-ancestors ${k}`,
+          `worker-src ${j}`,
+          `connect-src ${x}`,
+          "upgrade-insecure-requests"
+        ].join("; "), a = N ? "Content-Security-Policy-Report-Only" : "Content-Security-Policy";
+        e.setHeader(a, l), p && e.setHeader("X-XSS-Protection", p), m && e.setHeader("X-Frame-Options", m), u && e.setHeader("X-Content-Type-Options", u), f && e.setHeader("Referrer-Policy", f), y && e.setHeader("Permissions-Policy", y), $ && e.setHeader("Cache-Control", $), o();
+      });
+    },
+    /**
+     * @param {string} html - The original HTML
+     * @param {import('vite').IndexHtmlTransformContext} _ctx - The transform context
+     * @returns {string} The transformed HTML with nonces added
+     */
+    // eslint-disable-next-line no-unused-vars
+    transformIndexHtml(n, s) {
+      const e = i, o = `
+        <script nonce="${e}">
+          (function() {
+            const originalCreateElement = document.createElement;
+            document.createElement = function() {
+              const element = originalCreateElement.apply(document, arguments);
+              if (arguments[0].toLowerCase() === 'style' || arguments[0].toLowerCase() === 'script') {
+                element.nonce = "${e}";
+              }
+              return element;
+            };
+            // Override insertBefore to add nonce to dynamically inserted style tags
+            const originalInsertBefore = Element.prototype.insertBefore;
+            Element.prototype.insertBefore = function(newNode, referenceNode) {
+              if (newNode.tagName && newNode.tagName.toLowerCase() === 'style' && !newNode.nonce) {
+                newNode.nonce = "${e}";
+              }
+              return originalInsertBefore.call(this, newNode, referenceNode);
+            };
+            // Override appendChild to add nonce to dynamically inserted style tags
+            const originalAppendChild = Element.prototype.appendChild;
+            Element.prototype.appendChild = function(newNode) {
+              if (newNode.tagName && newNode.tagName.toLowerCase() === 'style' && !newNode.nonce) {
+                newNode.nonce = "${e}";
+              }
+              return originalAppendChild.call(this, newNode);
+            };
+          })();
+        <\/script>
+      `, t = /<link\s+([^>]*)>/g;
+      return n.replaceAll("<script", `<script nonce="${e}"`).replaceAll("<style", `<style nonce="${e}"`).replace(t, (c, r) => {
+        let l = r.replace(/\s*\/\s*$/, "");
+        return l.includes("nonce=") || (l += ` nonce="${e}"`), `<link ${l.trim()}>`;
+      }).replaceAll('style="', `style="nonce="${e}" `).replace("</head>", `${o}</head>`);
+    },
+    /**
+    //@param {import('rollup').OutputOptions} buildOptions - The build options
+    //@param {import('rollup').OutputBundle} bundle - The output bundle
+    //@returns {import('rollup').OutputBundle} The modified bundle with nonces added to HTML assets
+     */
+    // @ts-ignore
+    generateBundle(n, s) {
+      const e = i, o = /<link\s+([^>]*?)(\/?\s*>)/g;
+      return Object.keys(s).reduce((t, c) => {
+        const r = s[c];
+        return r.type === "asset" && r.fileName.endsWith(".html") ? {
+          ...t,
+          [c]: {
+            ...r,
+            source: r.source.replaceAll("<script", `<script nonce="${e}"`).replaceAll("<style", `<style nonce="${e}"`).replace(o, (l, a) => {
+              let d = a.replace(/\s*\/\s*$/, "");
+              return d.includes("nonce=") || (d += ` nonce="${e}"`), `<link ${d.trim()}>`;
+            }).replaceAll('style="', `style="nonce="${e}" `)
+          }
+        } : {
+          ...t,
+          [c]: r
+        };
+      }, {});
+    }
+  };
+}
+export {
+  I as secureHeaders
+};

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "vite-plugin-csp-dev",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "A Vite plugin to add Content Security Policy (CSP) headers to your application in serve mode.",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "lint": "oxlint .",
+    "format": "prettier --write .",
+    "prepublishOnly": "pnpm run build"
+  },
+  "keywords": [
+    "vite",
+    "plugin"
+  ],
+  "author": "gatisr",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^25.0.3",
+    "@zzdats/prettier-config": "^1.0.0",
+    "oxlint": "^1.36.0",
+    "prettier": "^3.7.4",
+    "vite": "^7.3.0",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "peerDependencies": {
+    "vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
+  }
+}