Browse Source

refactor how cookieYes script is loaded

pull/759/head
Dan Ditomaso 11 months ago
parent
commit
fe8bb60191
  1. 2
      bun.lock
  2. 3
      packages/web/index.html
  3. 2
      packages/web/package.json
  4. 2
      packages/web/tsconfig.json
  5. 18
      packages/web/vercel.json
  6. 6
      packages/web/vite-env.d.ts
  7. 23
      packages/web/vite.config.ts

2
bun.lock

@ -105,6 +105,7 @@
"react-map-gl": "8.0.4", "react-map-gl": "8.0.4",
"react-qrcode-logo": "^3.0.0", "react-qrcode-logo": "^3.0.0",
"rfc4648": "^1.5.4", "rfc4648": "^1.5.4",
"vite": "^7.0.4",
"vite-plugin-html": "^3.2.2", "vite-plugin-html": "^3.2.2",
"zod": "^4.0.5", "zod": "^4.0.5",
"zustand": "5.0.6", "zustand": "5.0.6",
@ -132,7 +133,6 @@
"tar": "^7.4.3", "tar": "^7.4.3",
"testing-library": "^0.0.2", "testing-library": "^0.0.2",
"typescript": "^5.8.3", "typescript": "^5.8.3",
"vite": "^7.0.4",
"vitest": "^3.2.4", "vitest": "^3.2.4",
}, },
}, },

3
packages/web/index.html

@ -1,6 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" data-theme="system"> <html lang="en" data-theme="system">
<head> <head>
<!-- CookieYes banner -->
<%- cookieYesScript %>
<!-- End of CookieYes banner -->
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/icon.svg" /> <link rel="icon" type="image/svg+xml" href="/icon.svg" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />

2
packages/web/package.json

@ -79,6 +79,7 @@
"react-qrcode-logo": "^3.0.0", "react-qrcode-logo": "^3.0.0",
"rfc4648": "^1.5.4", "rfc4648": "^1.5.4",
"vite-plugin-html": "^3.2.2", "vite-plugin-html": "^3.2.2",
"vite": "^7.0.4",
"zod": "^4.0.5", "zod": "^4.0.5",
"zustand": "5.0.6" "zustand": "5.0.6"
}, },
@ -105,7 +106,6 @@
"tar": "^7.4.3", "tar": "^7.4.3",
"testing-library": "^0.0.2", "testing-library": "^0.0.2",
"typescript": "^5.8.3", "typescript": "^5.8.3",
"vite": "^7.0.4",
"vitest": "^3.2.4" "vitest": "^3.2.4"
} }
} }

2
packages/web/tsconfig.json

@ -22,7 +22,7 @@
"@layouts/*": ["./src/layouts/*"] "@layouts/*": ["./src/layouts/*"]
} }
}, },
"include": ["src", "./vite-env.d.ts"], "include": ["src", ".d.ts"],
"exclude": [ "exclude": [
"routeTree.gen.ts", "routeTree.gen.ts",
"node_modules", "node_modules",

18
packages/web/vercel.json

@ -10,13 +10,25 @@
{ {
"source": "/", "source": "/",
"headers": [ "headers": [
{
"key": "Cross-Origin-Opener-Policy",
"value": "same-origin"
},
{ {
"key": "Cross-Origin-Embedder-Policy", "key": "Cross-Origin-Embedder-Policy",
"value": "require-corp" "value": "credentialless"
}, },
{ {
"key": "Cross-Origin-Opener-Policy", "key": "X-Content-Type-Options",
"value": "same-origin" "value": "nosniff"
},
{
"key": "Strict-Transport-Security",
"value": "max-age=63072000; includeSubDomains; preload"
},
{
"key": "Referrer-Policy",
"value": "strict-origin-when-cross-origin"
} }
] ]
} }

6
packages/web/vite-env.d.ts

@ -1,10 +1,12 @@
/// <reference types="vite/client" /> /// <reference types="vite/client" />
interface ViteTypeOptions {
strictImportMetaEnv: unknown;
}
interface ImportMetaEnv { interface ImportMetaEnv {
readonly env: {
readonly VITE_COMMIT_HASH: string; readonly VITE_COMMIT_HASH: string;
readonly VITE_VERSION: string; readonly VITE_VERSION: string;
};
} }
interface ImportMeta { interface ImportMeta {

23
packages/web/vite.config.ts

@ -3,7 +3,7 @@ import path from "node:path";
import process from "node:process"; import process from "node:process";
import tailwindcss from "@tailwindcss/vite"; import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react"; import react from "@vitejs/plugin-react";
import { defineConfig } from "vite"; import { defineConfig, loadEnv } from "vite";
import { createHtmlPlugin } from "vite-plugin-html"; import { createHtmlPlugin } from "vite-plugin-html";
let hash = ""; let hash = "";
@ -24,18 +24,22 @@ try {
} }
const CONTENT_SECURITY_POLICY = const CONTENT_SECURITY_POLICY =
"script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; style-src 'self' 'unsafe-inline' data: https://rsms.me https://cdn.jsdelivr.net; img-src 'self' data:; font-src 'self' data: https://rsms.me https://cdn.jsdelivr.net; worker-src 'self' blob:; object-src 'none'; base-uri 'self';"; "script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://cdn-cookieyes.com; style-src 'self' 'unsafe-inline' data: https://rsms.me https://cdn.jsdelivr.net; img-src 'self' data:; font-src 'self' data: https://rsms.me https://cdn.jsdelivr.net; worker-src 'self' blob:; object-src 'none'; base-uri 'self';";
export default defineConfig({ export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd());
return {
plugins: [ plugins: [
react(), react(),
tailwindcss(), tailwindcss(),
// adding CookieYes script if VITE_COOKIEYES_CLIENT_ID is set (it only runs while in Vercel) for GDPR/CCPA compliance // This is for GDPR/CCPA compliance
createHtmlPlugin({ createHtmlPlugin({
inject: { inject: {
data: { data: {
cookieScript: process.env.VITE_COOKIEYES_CLIENT_ID cookieYesScript:
? `<script async src="https://cdn-cookieyes.com/client_data/${process.env.VITE_COOKIEYES_CLIENT_ID}/script.js"></script>` mode === "production" && env.VITE_COOKIEYES_CLIENT_ID
? `<script async src="https://cdn-cookieyes.com/client_data/${env.VITE_COOKIEYES_CLIENT_ID}/script.js"></script>`
: "", : "",
}, },
}, },
@ -77,7 +81,12 @@ export default defineConfig({
headers: { headers: {
"content-security-policy": CONTENT_SECURITY_POLICY, "content-security-policy": CONTENT_SECURITY_POLICY,
"Cross-Origin-Opener-Policy": "same-origin", "Cross-Origin-Opener-Policy": "same-origin",
"Cross-Origin-Embedder-Policy": "require-corp", "Cross-Origin-Embedder-Policy": "credentialless",
"X-Content-Type-Options": "nosniff",
"Strict-Transport-Security":
"max-age=63072000; includeSubDomains; preload",
"Referrer-Policy": "strict-origin-when-cross-origin",
}, },
}, },
};
}); });

Loading…
Cancel
Save