32 |
33 | 
34 |
35 | 🍪
36 |
37 | React Cookie Manager Playground
38 | 39 |
40 |
46 |
47 | Cookie Consent Status
41 |42 | Marketing/Advertising Cookies: {consentStatus} 43 |
44 | 45 |
48 |
78 |
79 | );
80 | }
81 |
82 | export default App;
83 |
--------------------------------------------------------------------------------
/playground/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/playground/src/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
--------------------------------------------------------------------------------
/playground/src/index.css:
--------------------------------------------------------------------------------
1 | :root {
2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3 | line-height: 1.5;
4 | font-weight: 400;
5 |
6 | color-scheme: light dark;
7 | color: rgba(255, 255, 255, 0.87);
8 | background-color: #242424;
9 |
10 | font-synthesis: none;
11 | text-rendering: optimizeLegibility;
12 | -webkit-font-smoothing: antialiased;
13 | -moz-osx-font-smoothing: grayscale;
14 | }
15 |
16 | a {
17 | font-weight: 500;
18 | color: #646cff;
19 | text-decoration: inherit;
20 | }
21 | a:hover {
22 | color: #535bf2;
23 | }
24 |
25 | body {
26 | margin: 0;
27 | display: flex;
28 | place-items: center;
29 | min-width: 320px;
30 | min-height: 100vh;
31 | }
32 |
33 | h1 {
34 | font-size: 3.2em;
35 | line-height: 1.1;
36 | }
37 |
38 | button {
39 | border-radius: 8px;
40 | border: 1px solid transparent;
41 | padding: 0.6em 1.2em;
42 | font-size: 1em;
43 | font-weight: 500;
44 | font-family: inherit;
45 | background-color: #1a1a1a;
46 | cursor: pointer;
47 | transition: border-color 0.25s;
48 | }
49 | button:hover {
50 | border-color: #646cff;
51 | }
52 | button:focus,
53 | button:focus-visible {
54 | outline: 4px auto -webkit-focus-ring-color;
55 | }
56 |
57 | @media (prefers-color-scheme: light) {
58 | :root {
59 | color: #213547;
60 | background-color: #ffffff;
61 | }
62 | a:hover {
63 | color: #747bff;
64 | }
65 | button {
66 | background-color: #f9f9f9;
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/playground/src/main.tsx:
--------------------------------------------------------------------------------
1 | import { default as i18n, default as i18next } from "i18next";
2 | import { StrictMode } from "react";
3 | import { createRoot } from "react-dom/client";
4 | import { initReactI18next } from "react-i18next";
5 | import { CookieManager } from "../../dist/";
6 | import "../../dist/style.css";
7 | import { CookieCategories } from "../../dist/types/types";
8 | import App from "./App.tsx";
9 | import "./index.css";
10 | import "./globals.css";
11 |
12 | const useI18next = true;
13 | const translationI18NextPrefix = "cookies";
14 |
15 | const Translations = {
16 | title: "Would You Like A Cookie? 🍪",
17 | message:
18 | "We value your privacy. Choose which cookies you want to allow. Essential cookies are always enabled as they are necessary for the website to function properly.",
19 | buttonText: "Accept All",
20 | declineButtonText: "Decline All",
21 | manageButtonText: "Manage Cookies",
22 | privacyPolicyText: "Privacy Policy",
23 | };
24 |
25 | i18n.use(initReactI18next).init({
26 | resources: {
27 | en: {
28 | translation: {
29 | [translationI18NextPrefix]: {
30 | title: "Would You Like A Cookie? 🍪",
31 | },
32 | },
33 | },
34 | pl: {
35 | translation: {
36 | [translationI18NextPrefix]: {
37 | title: "Chcesz ciasteczko? 🍪",
38 | manageCookiesStatus: "Status: {{status}} na dzień {{date}}",
39 | manageCookiesStatusConsented: "Zgoda",
40 | manageCookiesStatusDeclined: "Odmowa",
41 | },
42 | },
43 | },
44 | },
45 | lng: "en",
46 | });
47 |
48 | createRoot(document.getElementById("root")!).render(
49 | YouTube Video Embed Test
49 |50 | This YouTube video is embedded directly to observe what happens when 51 | cookies haven't been accepted yet. 52 |
53 | 54 | {/* Direct YouTube embed without conditional rendering */} 55 |
56 |
65 |
66 |
67 |
76 |
77 |
64 | {displayType === "modal" && (
65 |
66 | )}
67 |
184 | );
185 | };
186 |
187 | const CookieConsenter: React.FC<
188 | CookieConsenterProps & { tFunction: TFunction }
189 | > = ({
190 | showManageButton = true,
191 | privacyPolicyUrl,
192 | displayType = "popup",
193 | theme = "light",
194 | tFunction,
195 | onAccept,
196 | onDecline,
197 | onManage,
198 | initialPreferences = {
199 | Analytics: false,
200 | Social: false,
201 | Advertising: false,
202 | },
203 | detailedConsent,
204 | isManaging = false,
205 | classNames,
206 | }) => {
207 | const [isExiting, setIsExiting] = useState(false);
208 | const [isEntering, setIsEntering] = useState(true);
209 | const [shouldRender, setShouldRender] = useState(true);
210 | const isMobile = useIsMobile();
211 |
212 | useEffect(() => {
213 | setTimeout(() => {
214 | setIsEntering(false);
215 | }, 50);
216 | }, []);
217 |
218 | useEffect(() => {
219 | if (isExiting) {
220 | const timer = setTimeout(() => {
221 | setShouldRender(false);
222 | }, 500); // Match the duration of the exit animation
223 | return () => clearTimeout(timer);
224 | }
225 | }, [isExiting]);
226 |
227 | const handleAcceptClick = (e: React.MouseEvent
78 |
183 |
87 | {isManaging ? (
88 |
182 |
99 | {title && (
100 |
180 | )}
181 | 106 | {title} 107 |
108 | )} 109 |115 | {tFunction("message")} 116 |
117 |
118 |
130 |
145 | {showManageButton && (
146 |
158 | )}
159 |
160 | {privacyPolicyUrl && (
161 |
176 | {tFunction("privacyPolicyText")}
177 |
178 | )}
179 |
507 |
546 | );
547 | }
548 | return (
549 |
508 | {title &&
511 | {title}
} 509 |{tFunction("message")}
510 |
512 | {privacyPolicyUrl && (
513 |
519 | {tFunction("privacyPolicyText")}
520 |
521 | )}
522 |
545 |
523 | {showManageButton && (
524 |
530 | )}
531 |
537 |
543 |
544 |
550 | {title &&
553 | );
554 | };
555 |
556 | const renderButtons = () => {
557 | if (displayType === "popup") {
558 | return (
559 | {title}
} 551 |{tFunction("message")}
552 |
560 |
592 | );
593 | }
594 |
595 | if (displayType === "modal") {
596 | return (
597 |
561 |
567 |
570 |
571 |
572 | {showManageButton && (
573 |
579 | )}
580 | {privacyPolicyUrl && (
581 |
587 | {tFunction("privacyPolicyText")}
588 |
589 | )}
590 |
591 |
598 |
633 | );
634 | }
635 |
636 | return null;
637 | };
638 |
639 | const content = (
640 |
599 | {privacyPolicyUrl && (
600 |
606 | {tFunction("privacyPolicyText")}
607 |
608 | )}
609 |
632 |
610 | {showManageButton && (
611 |
617 | )}
618 |
624 |
630 |
631 |
641 |
655 | );
656 |
657 | return createPortal(content, document.body);
658 | };
659 |
660 | export default CookieConsenter;
661 |
--------------------------------------------------------------------------------
/src/components/FloatingCookieButton.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { CookieConsenterClassNames } from "../types/types";
3 | import { cn } from "../utils/cn";
4 |
5 | interface FloatingCookieButtonProps {
6 | theme?: "light" | "dark";
7 | onClick: () => void;
8 | onClose?: () => void;
9 | classNames?: CookieConsenterClassNames;
10 | }
11 |
12 | export const FloatingCookieButton: React.FC
642 | {displayType === "modal" ? (
643 |
654 |
644 | {renderContent()}
645 | {renderButtons()}
646 |
647 | ) : (
648 |
649 | {renderContent()}
650 | {renderButtons()}
651 |
652 | )}
653 | setIsHovered(true)}
24 | onMouseLeave={() => setIsHovered(false)}
25 | className={
26 | classNames?.floatingButton
27 | ? cn(classNames.floatingButton)
28 | : cn(`
29 | fixed bottom-6 left-6 z-[99999]
30 | w-12 h-12 rounded-full
31 | flex items-center justify-center
32 | transition-all duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]
33 | hover:scale-110 focus:outline-none
34 | group cursor-pointer
35 | ${
36 | theme === "light"
37 | ? "bg-white/95 shadow-lg ring-1 ring-black/10 text-gray-700 hover:text-gray-900"
38 | : "bg-black/95 shadow-lg ring-1 ring-white/10 text-gray-300 hover:text-white"
39 | }
40 | `)
41 | }
42 | style={{
43 | animation:
44 | "slide-in-bottom 0.5s cubic-bezier(0.32, 0.72, 0, 1) forwards",
45 | }}
46 | aria-label="Manage cookie preferences"
47 | role="button"
48 | tabIndex={0}
49 | onKeyDown={(e) => {
50 | if (e.key === "Enter" || e.key === " ") {
51 | onClick();
52 | }
53 | }}
54 | >
55 | {/* Close button */}
56 | {isHovered && (
57 |
94 | )}
95 |
109 |
169 |
170 | );
171 | };
172 |
--------------------------------------------------------------------------------
/src/components/ManageConsent.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import {
3 | CookieCategories,
4 | DetailedCookieConsent,
5 | CookieConsenterClassNames,
6 | } from "../types/types";
7 | import { TFunction } from "../utils/translations";
8 | import { cn } from "../utils/cn";
9 |
10 | interface ManageConsentProps {
11 | theme?: "light" | "dark";
12 | tFunction: TFunction;
13 | onSave: (categories: CookieCategories) => void;
14 | onCancel?: () => void;
15 | initialPreferences?: CookieCategories;
16 | detailedConsent?: DetailedCookieConsent | null;
17 | classNames?: CookieConsenterClassNames;
18 | }
19 |
20 | export const ManageConsent: React.FC76 | {tFunction("manageCookiesStatus", { 77 | status: status.consented 78 | ? tFunction("manageCookiesStatusConsented") 79 | : tFunction("manageCookiesStatusDeclined"), 80 | date: formatDate(status.timestamp), 81 | })} 82 |
83 | ); 84 | }; 85 | 86 | return ( 87 |
94 |
422 | );
423 | };
424 |
--------------------------------------------------------------------------------
/src/context/CookieConsentContext.tsx:
--------------------------------------------------------------------------------
1 | import React, {
2 | createContext,
3 | useContext,
4 | useState,
5 | useEffect,
6 | useMemo,
7 | useRef,
8 | } from "react";
9 | import { createPortal } from "react-dom";
10 | import CookieConsenter from "../components/CookieConsenter";
11 | import { FloatingCookieButton } from "../components/FloatingCookieButton";
12 | import type {
13 | CookieCategories,
14 | CookieConsenterProps,
15 | DetailedCookieConsent,
16 | TranslationObject,
17 | TranslationFunction,
18 | } from "../types/types";
19 | import { ManageConsent } from "../components/ManageConsent";
20 | import { getBlockedHosts, getBlockedKeywords } from "../utils/tracker-utils";
21 | import { createTFunction } from "../utils/translations";
22 | import { CookieBlockingManager } from "../utils/cookie-blocking";
23 | import { setCookie, getCookie, deleteCookie } from "../utils/cookie-utils";
24 | import {
25 | generateSessionId,
26 | postSessionToAnalytics,
27 | } from "../utils/session-utils";
28 |
29 | // Helper function to check if running on localhost
30 | const isLocalhost = (): boolean => {
31 | if (typeof window !== "undefined") {
32 | const hostname = window.location.hostname;
33 | return (
34 | hostname === "localhost" ||
35 | hostname === "127.0.0.1" ||
36 | hostname.startsWith("192.168.") ||
37 | hostname.startsWith("10.")
38 | );
39 | }
40 | return false;
41 | };
42 |
43 | // Helper function to post to analytics if not on localhost
44 | const postToAnalyticsIfNotLocalhost = async (
45 | cookieKitId: string,
46 | sessionId: string,
47 | action?: string,
48 | preferences?: CookieCategories,
49 | userId?: string
50 | ) => {
51 | if (isLocalhost()) {
52 | console.log(
53 | "[CookieKit] Running on localhost - consent data will be sent when deployed to production"
54 | );
55 | return;
56 | }
57 |
58 | await postSessionToAnalytics(
59 | cookieKitId,
60 | sessionId,
61 | action,
62 | preferences,
63 | userId
64 | );
65 | };
66 |
67 | interface CookieConsentContextValue {
68 | hasConsent: boolean | null;
69 | isDeclined: boolean;
70 | detailedConsent: DetailedCookieConsent | null;
71 | showConsentBanner: () => void;
72 | acceptCookies: () => void;
73 | declineCookies: () => void;
74 | updateDetailedConsent: (preferences: CookieCategories) => void;
75 | }
76 |
77 | const CookieManagerContext = createContext
95 |
120 |
121 | 105 | {tFunction("manageTitle")} 106 |
107 |117 | {tFunction("manageMessage")} 118 |
119 |
122 | {/* Essential Cookies - Always enabled */}
123 |
369 |
370 |
130 |
178 |
179 | {/* Analytics Cookies */}
180 |
131 |
168 | 141 | {tFunction("manageEssentialTitle")} 142 |
143 |153 | {tFunction("manageEssentialSubtitle")} 154 |
155 |165 | {tFunction("manageEssentialStatus")} 166 |
167 |
175 | {tFunction("manageEssentialStatusButtonText")}
176 |
177 |
187 |
241 |
242 | {/* Social Cookies */}
243 |
188 |
214 |
240 | 198 | {tFunction("manageAnalyticsTitle")} 199 |
200 |210 | {tFunction("manageAnalyticsSubtitle")} 211 |
212 | {renderConsentStatus("Analytics")} 213 |
250 |
304 |
305 | {/* Advertising Cookies */}
306 |
251 |
277 |
303 | 261 | {tFunction("manageSocialTitle")} 262 |
263 |273 | {tFunction("manageSocialSubtitle")} 274 |
275 | {renderConsentStatus("Social")} 276 |
313 |
368 |
314 |
340 |
367 | 324 | {tFunction("manageAdvertTitle")} 325 |
326 |336 | {tFunction("manageAdvertSubtitle")} 337 |
338 | {renderConsentStatus("Advertising")} 339 |
371 | {onCancel && (
372 |
388 | )}
389 |
399 |
400 |
401 |
402 |
418 | Powered by CookieKit
419 |
420 |
421 |
499 |
,
527 | document.body
528 | )}
529 | {isFloatingButtonVisible &&
530 | !isVisible &&
531 | !showManageConsent &&
532 | createPortal(
533 |
500 |
526 |
507 |
525 |
534 | {
537 | setShowManageConsent(true);
538 | setIsFloatingButtonVisible(false);
539 | }}
540 | onClose={() => {
541 | setIsFloatingButtonVisible(false);
542 | }}
543 | classNames={props.classNames}
544 | />
545 |
,
546 | document.body
547 | )}
548 |
45 |
53 | `;
54 | };
55 |
56 | /**
57 | * Adds event listeners to the settings button
58 | * @param placeholderId The unique ID for the placeholder
59 | */
60 | const addSettingsButtonListeners = (placeholderId: string): void => {
61 | const settingsButton = document.getElementById(
62 | `cookie-settings-${placeholderId}`
63 | );
64 | if (settingsButton) {
65 | settingsButton.addEventListener("mouseover", () => {
66 | settingsButton.style.backgroundColor = "#2563eb";
67 | });
68 | settingsButton.addEventListener("mouseout", () => {
69 | settingsButton.style.backgroundColor = "#3b82f6";
70 | });
71 | settingsButton.addEventListener("click", () => {
72 | // Try to show cookie settings
73 | window.dispatchEvent(new CustomEvent("show-cookie-consent"));
74 | });
75 | }
76 | };
77 |
78 | /**
79 | * Positions an iframe absolutely within its parent to prevent layout disruption
80 | * @param iframe The iframe element to position
81 | */
82 | const positionIframeAbsolutely = (iframe: HTMLIFrameElement): void => {
83 | iframe.style.position = "absolute";
84 | iframe.style.top = "0";
85 | iframe.style.left = "0";
86 | iframe.style.width = "1px";
87 | iframe.style.height = "1px";
88 | iframe.style.opacity = "0";
89 | iframe.style.pointerEvents = "none";
90 | iframe.style.visibility = "hidden";
91 | iframe.style.zIndex = "-1";
92 | };
93 |
94 | /**
95 | * Creates a placeholder for blocked content
96 | * @param iframe The iframe element to block
97 | * @param originalSrc The original source URL of the iframe
98 | * @returns The created wrapper element containing the placeholder
99 | */
100 | export const createContentPlaceholder = (
101 | iframe: HTMLIFrameElement,
102 | originalSrc: string
103 | ): HTMLDivElement => {
104 | // Create a unique ID for the placeholder
105 | const placeholderId = `cookie-blocked-content-${Math.random()
106 | .toString(36)
107 | .substring(2, 11)}`;
108 |
109 | // Get the iframe's parent element
110 | const parentElement = iframe.parentElement;
111 | if (!parentElement) {
112 | throw new Error("Iframe has no parent element");
113 | }
114 |
115 | // Make the iframe invisible but keep it in place
116 | iframe.setAttribute("data-cookie-blocked", "true");
117 | iframe.setAttribute("data-original-src", originalSrc);
118 | iframe.src = "about:blank";
119 |
120 | // Create a wrapper div with position relative
121 | const wrapper = document.createElement("div");
122 | applyWrapperStyles(
123 | wrapper,
124 | iframe.style.width || "100%",
125 | iframe.style.height || "315px"
126 | );
127 |
128 | // Add content directly to the wrapper
129 | wrapper.innerHTML = createPlaceholderContent(placeholderId);
130 |
131 | // Create the placeholder for tracking purposes only
132 | const placeholderElement = document.createElement("div");
133 | placeholderElement.id = placeholderId;
134 | placeholderElement.className = "cookie-consent-blocked-iframe";
135 | placeholderElement.setAttribute("data-cookie-consent-placeholder", "true");
136 | placeholderElement.setAttribute("data-blocked-src", originalSrc);
137 | placeholderElement.style.display = "none"; // Hide the placeholder as we're not using it for display
138 |
139 | // Insert the wrapper right before the iframe
140 | parentElement.insertBefore(wrapper, iframe);
141 |
142 | // Position the iframe absolutely within the wrapper to prevent layout disruption
143 | positionIframeAbsolutely(iframe);
144 |
145 | // Move the iframe inside the wrapper
146 | wrapper.appendChild(iframe);
147 |
148 | // Add the hidden placeholder to the wrapper for tracking
149 | wrapper.appendChild(placeholderElement);
150 |
151 | // Add event listener to the button
152 | addSettingsButtonListeners(placeholderId);
153 |
154 | return wrapper;
155 | };
156 |
157 | /**
158 | * Blocks tracking scripts and iframes based on keywords
159 | * @param trackingKeywords Array of keywords to block
160 | * @returns MutationObserver that watches for new elements
161 | */
162 | export const blockTrackingScripts = (
163 | trackingKeywords: string[]
164 | ): MutationObserver => {
165 | // Remove all script tags that match tracking domains
166 | document.querySelectorAll("script").forEach((script) => {
167 | if (
168 | script.src &&
169 | trackingKeywords.some((keyword) => script.src.includes(keyword))
170 | ) {
171 | script.remove();
172 | }
173 | });
174 |
175 | // Also block iframes from tracking domains (especially for YouTube embeds)
176 | document.querySelectorAll("iframe").forEach((iframe) => {
177 | if (
178 | iframe.src &&
179 | trackingKeywords.some((keyword) => iframe.src.includes(keyword))
180 | ) {
181 | createContentPlaceholder(iframe, iframe.src);
182 | }
183 | });
184 |
185 | // Prevent new tracking scripts and iframes from being injected
186 | const observer = new MutationObserver((mutations) => {
187 | mutations.forEach((mutation) => {
188 | mutation.addedNodes.forEach((node) => {
189 | // Handle script tags
190 | if (node instanceof HTMLElement && node.tagName === "SCRIPT") {
191 | const src = node.getAttribute("src");
192 | if (
193 | src &&
194 | trackingKeywords.some((keyword) => src.includes(keyword))
195 | ) {
196 | node.remove();
197 | }
198 | }
199 |
200 | // Handle iframe tags (especially YouTube)
201 | if (node instanceof HTMLElement && node.tagName === "IFRAME") {
202 | const src = node.getAttribute("src");
203 | if (
204 | src &&
205 | trackingKeywords.some((keyword) => src.includes(keyword))
206 | ) {
207 | createContentPlaceholder(node as HTMLIFrameElement, src);
208 | }
209 | }
210 | });
211 | });
212 | });
213 |
214 | observer.observe(document.documentElement, {
215 | childList: true,
216 | subtree: true,
217 | });
218 |
219 | return observer;
220 | };
221 |
222 | /**
223 | * Ensures that all placeholders remain visible and properly styled
224 | */
225 | export const ensurePlaceholdersVisible = (): void => {
226 | const placeholders = document.querySelectorAll(
227 | '[data-cookie-consent-placeholder="true"]'
228 | );
229 |
230 | if (placeholders.length > 0) {
231 | placeholders.forEach((placeholder) => {
232 | // Make sure the placeholder is visible
233 | if (placeholder instanceof HTMLElement) {
234 | placeholder.style.display = "flex";
235 | placeholder.style.visibility = "visible";
236 | placeholder.style.opacity = "1";
237 | placeholder.style.zIndex = "100";
238 |
239 | // Find the parent wrapper
240 | const wrapper = placeholder.parentElement;
241 | if (wrapper) {
242 | // Make sure the wrapper is properly positioned
243 | applyWrapperStyles(wrapper);
244 |
245 | // Check if we already have content in the wrapper
246 | const hasContent =
247 | wrapper.querySelector(".cookie-consent-wrapper-content") !== null ||
248 | wrapper.innerHTML.includes("Content Blocked");
249 |
250 | // If no content exists, add it directly to the wrapper
251 | if (!hasContent) {
252 | const placeholderId =
253 | placeholder.id ||
254 | `cookie-blocked-content-${Math.random()
255 | .toString(36)
256 | .substring(2, 11)}`;
257 |
258 | // Get the blocked source if available
259 | const blockedSrc =
260 | placeholder.getAttribute("data-blocked-src") || "unknown source";
261 |
262 | wrapper.innerHTML = createPlaceholderContent(placeholderId);
263 |
264 | // Re-append the placeholder to the wrapper
265 | wrapper.appendChild(placeholder);
266 |
267 | // Find the iframe inside the wrapper
268 | const iframe = wrapper.querySelector(
269 | "iframe"
270 | ) as HTMLIFrameElement | null;
271 | if (iframe) {
272 | // Position the iframe absolutely to prevent layout disruption
273 | positionIframeAbsolutely(iframe);
274 |
275 | // Make sure it's still using about:blank
276 | if (
277 | iframe.src !== "about:blank" &&
278 | iframe.hasAttribute("data-original-src")
279 | ) {
280 | iframe.src = "about:blank";
281 | }
282 |
283 | // Re-append the iframe to the wrapper
284 | wrapper.appendChild(iframe);
285 | }
286 |
287 | // Add event listener to the button
288 | addSettingsButtonListeners(placeholderId);
289 | }
290 |
291 | // Find the iframe inside the wrapper
292 | const iframe = wrapper.querySelector(
293 | "iframe"
294 | ) as HTMLIFrameElement | null;
295 | if (iframe) {
296 | // Position the iframe absolutely to prevent layout disruption
297 | positionIframeAbsolutely(iframe);
298 |
299 | // Make sure it's still using about:blank
300 | if (
301 | iframe.src !== "about:blank" &&
302 | iframe.hasAttribute("data-original-src")
303 | ) {
304 | iframe.src = "about:blank";
305 | }
306 | }
307 | }
308 | }
309 | });
310 | }
311 | };
312 |
--------------------------------------------------------------------------------
/src/utils/cookie-blocking/index.ts:
--------------------------------------------------------------------------------
1 | import {
2 | blockTrackingRequests,
3 | restoreOriginalRequests,
4 | } from "./request-blocker";
5 | import {
6 | blockTrackingScripts,
7 | ensurePlaceholdersVisible,
8 | createContentPlaceholder,
9 | } from "./content-blocker";
10 |
11 | /**
12 | * Main cookie blocking manager that handles all aspects of cookie blocking
13 | */
14 | export class CookieBlockingManager {
15 | private observerRef: MutationObserver | null = null;
16 | private intervalId: number | null = null;
17 |
18 | /**
19 | * Initializes cookie blocking based on user preferences
20 | * @param blockedHosts Array of hosts to block
21 | * @param blockedKeywords Array of keywords to block in scripts and iframes
22 | */
23 | public initialize(blockedHosts: string[], blockedKeywords: string[]): void {
24 | // Block network requests
25 | if (blockedHosts.length > 0) {
26 | blockTrackingRequests(blockedHosts);
27 | }
28 |
29 | // Block scripts and iframes
30 | if (blockedKeywords.length > 0) {
31 | this.observerRef = blockTrackingScripts(blockedKeywords);
32 |
33 | // Set up periodic check to ensure placeholders remain visible
34 | this.startPlaceholderVisibilityCheck();
35 | }
36 | }
37 |
38 | /**
39 | * Starts a periodic check to ensure placeholders remain visible
40 | */
41 | private startPlaceholderVisibilityCheck(): void {
42 | // Run the check immediately
43 | ensurePlaceholdersVisible();
44 |
45 | // Then set up an interval
46 | this.intervalId = window.setInterval(ensurePlaceholdersVisible, 2000);
47 | }
48 |
49 | /**
50 | * Cleans up all cookie blocking functionality
51 | */
52 | public cleanup(): void {
53 | // Restore original request functions
54 | restoreOriginalRequests();
55 |
56 | // Disconnect observer
57 | if (this.observerRef) {
58 | this.observerRef.disconnect();
59 | this.observerRef = null;
60 | }
61 |
62 | // Clear interval
63 | if (this.intervalId !== null) {
64 | window.clearInterval(this.intervalId);
65 | this.intervalId = null;
66 | }
67 | }
68 | }
69 |
70 | // Export individual functions for direct use
71 | export {
72 | blockTrackingRequests,
73 | restoreOriginalRequests,
74 | blockTrackingScripts,
75 | ensurePlaceholdersVisible,
76 | createContentPlaceholder,
77 | };
78 |
--------------------------------------------------------------------------------
/src/utils/cookie-blocking/request-blocker.ts:
--------------------------------------------------------------------------------
1 | // Store original functions
2 | let originalXhrOpen: typeof XMLHttpRequest.prototype.open | null = null;
3 | let originalFetch: typeof window.fetch | null = null;
4 |
5 | /**
6 | * Blocks network requests to specified domains by overriding XMLHttpRequest and fetch
7 | * @param blockedHosts Array of domain strings to block
8 | */
9 | export const blockTrackingRequests = (blockedHosts: string[]) => {
10 | // Store original functions if not already stored
11 | if (!originalXhrOpen) {
12 | originalXhrOpen = XMLHttpRequest.prototype.open;
13 | }
14 | if (!originalFetch) {
15 | originalFetch = window.fetch;
16 | }
17 |
18 | // Override XMLHttpRequest to block requests to tracking domains
19 | XMLHttpRequest.prototype.open = function (method: string, url: string | URL) {
20 | const urlString = url.toString();
21 | if (blockedHosts.some((host) => urlString.includes(host))) {
22 | console.debug(`[CookieKit] Blocked XMLHttpRequest to: ${urlString}`);
23 | throw new Error(`Request to ${urlString} blocked by consent settings`);
24 | }
25 | return originalXhrOpen!.apply(this, arguments as any);
26 | };
27 |
28 | // Override fetch API to block tracking requests
29 | window.fetch = function (url: RequestInfo | URL, options?: RequestInit) {
30 | const urlString = url.toString();
31 | if (
32 | typeof urlString === "string" &&
33 | blockedHosts.some((host) => urlString.includes(host))
34 | ) {
35 | console.debug(`[CookieKit] Blocked fetch request to: ${urlString}`);
36 | return Promise.resolve(
37 | new Response(null, {
38 | status: 403,
39 | statusText: "Blocked by consent settings",
40 | })
41 | );
42 | }
43 | return originalFetch!.apply(this, arguments as any);
44 | };
45 | };
46 |
47 | /**
48 | * Restores the original XMLHttpRequest and fetch implementations
49 | */
50 | export const restoreOriginalRequests = () => {
51 | if (originalXhrOpen) {
52 | XMLHttpRequest.prototype.open = originalXhrOpen;
53 | }
54 | if (originalFetch) {
55 | window.fetch = originalFetch;
56 | }
57 | };
58 |
--------------------------------------------------------------------------------
/src/utils/cookie-utils.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Sets a cookie with the specified name, value, and expiration days
3 | * @param name The name of the cookie
4 | * @param value The value to store in the cookie
5 | * @param days Number of days until the cookie expires
6 | */
7 | export const setCookie = (name: string, value: string, days: number): void => {
8 | if (typeof window === "undefined") return; // SSR-safe
9 | const date = new Date();
10 | date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
11 | document.cookie = `${name}=${value};expires=${date.toUTCString()};path=/;SameSite=Lax`;
12 | };
13 |
14 | /**
15 | * Gets a cookie value by name
16 | * @param name The name of the cookie to retrieve
17 | * @returns The cookie value or null if not found
18 | */
19 | export const getCookie = (name: string): string | null => {
20 | if (typeof window === "undefined") return null; // SSR-safe
21 | const value = `; ${document.cookie}`;
22 | const parts = value.split(`; ${name}=`);
23 | if (parts.length === 2) {
24 | return parts.pop()?.split(";").shift() || null;
25 | }
26 | return null;
27 | };
28 |
29 | /**
30 | * Deletes a cookie by setting its expiration to a past date
31 | * @param name The name of the cookie to delete
32 | */
33 | export const deleteCookie = (name: string): void => {
34 | if (typeof window === "undefined") return; // SSR-safe
35 | document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/`;
36 | };
37 |
38 | /**
39 | * Checks if a cookie exists
40 | * @param name The name of the cookie to check
41 | * @returns True if the cookie exists, false otherwise
42 | */
43 | export const cookieExists = (name: string): boolean => {
44 | if (typeof window === "undefined") return false; // SSR-safe
45 | return getCookie(name) !== null;
46 | };
47 |
48 | /**
49 | * Gets all cookies as an object
50 | * @returns An object with cookie names as keys and values as values
51 | */
52 | export const getAllCookies = (): Record🔒
46 | Content Blocked
47 |This content requires cookies that are currently blocked by your privacy settings. This embedded content may track your activity.
48 |After accepting cookies, please refresh the page to view this content.
49 | 52 |