fix: vite v6 escape chars issue (#172)

Author: tsotimus

packages/vite-plugin-csp-guard/src/index.ts

@@ -153,6 +153,7 @@ export default function vitePluginCSP(
           isTransformationStatusEmpty: isTransformationStatusEmpty(),
           sri,
           shouldSkip,
+          isVite6: true,  //This is set to true constantly because we cannot determine the vite version at runtime accurately.
         });
       },
     },

packages/vite-plugin-csp-guard/src/transform/handleIndexHtml.ts

@@ -80,6 +80,7 @@ export function handleIndexHtml({
     }
   });
 
+
   // TODO: Maybe we don't need this if we are just using 'self' anyway in the policy?
   // $("link").each(function (i, el) {
   //   if (
@@ -139,3 +140,11 @@ export function handleIndexHtml({
   //   }
   return { HASH_COLLECTION, html: $.html() };
 }
+
+// Used for Vite 6 workaround
+export const handleCSPInsert = (html: string, policy: string) => {
+  const $ = cheerio.load(html);
+  const metaTag = `<meta http-equiv="Content-Security-Policy" content="${policy}">`;
+  $("head").prepend(metaTag);
+  return $.html();
+};

packages/vite-plugin-csp-guard/src/transform/index.ts

@@ -7,7 +7,7 @@ import {
   ShouldSkip,
   TransformationStatus,
 } from "../types";
-import { handleIndexHtml } from "./handleIndexHtml";
+import { handleCSPInsert, handleIndexHtml } from "./handleIndexHtml";
 import { PluginContext } from "rollup";
 import { generatePolicyString, policyToTag } from "../policy/createPolicy";
 import { cssFilter, jsFilter, preCssFilter, tsFilter } from "../utils";
@@ -114,6 +114,7 @@ export interface TransformIndexHtmlHandlerProps {
   isTransformationStatusEmpty: boolean;
   sri: boolean;
   shouldSkip: ShouldSkip;
+  isVite6?: boolean;
 }
 
 export const transformIndexHtmlHandler = async ({
@@ -126,6 +127,7 @@ export const transformIndexHtmlHandler = async ({
   isTransformationStatusEmpty,
   sri,
   shouldSkip,
+  isVite6 = false,
 }: TransformIndexHtmlHandlerProps) => {
   if (isTransformationStatusEmpty && server) {
     //Return early if there are no transformations and we are in dev mode
@@ -186,9 +188,18 @@ export const transformIndexHtmlHandler = async ({
   });
 
   const InjectedHtmlTags = policyToTag(policyString);
+  
+  if(isVite6){
+    const changedHtml = handleCSPInsert(newHtml, policyString)
+    return {
+      html: changedHtml,
+      tags: []
+    }
+  }
 
   return {
     html: newHtml,
     tags: InjectedHtmlTags,
   };
+
 };