Merge pull request #6372 from WoltLab/6.2-fancyapps-v6-consent

Only display external content in Fancybox after confirmation by the user

Author: Cyperghost

com.woltlab.wcf/templates/shared_imageViewer.tpl

@@ -44,6 +44,11 @@
 		}
 	  }
 	</script>
+	{if MESSAGE_ENABLE_USER_CONSENT}
+		<template id="consentImageViewer" data-show-all-media="{if $__wcf->getUser()->userID && $__wcf->getUser()->getUserOption('enableEmbeddedMedia')}1{else}0{/if}">
+			{include file="messageUserConsent" target='' host='' url='' sandbox=true}
+		</template>
+	{/if}
 
 	{assign var=__imageViewerLoaded value=true}
 {/if}

ts/WoltLabSuite/Core/Component/Image/Fancybox/ConsentPlugin.ts

@@ -0,0 +1,107 @@
+/**
+ * @author Olaf Braun
+ * @copyright 2001-2025 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ */
+
+import { CarouselSlide, FancyboxInstance } from "@fancyapps/ui";
+import { CarouselInstance } from "@fancyapps/ui/dist/carousel/carousel";
+import { allExternalMediaEnabled } from "WoltLabSuite/Core/Ui/Message/UserConsent";
+import { stringToBool } from "WoltLabSuite/Core/Core";
+
+export class ConsentPlugin {
+  #api: FancyboxInstance | undefined = undefined;
+  #sliderToType = new Map<CarouselSlide, string | undefined>();
+  #templateNode: HTMLTemplateElement | undefined;
+  #onAddSlideEvent = this.#onAddSlide.bind(this);
+  #onAttachSlideElEvent = this.#onAttachSlideEl.bind(this);
+
+  constructor() {
+    this.#templateNode = document.getElementById("consentImageViewer") as HTMLTemplateElement;
+  }
+
+  init(api: FancyboxInstance): void {
+    if (this.#showAllMedia()) {
+      return;
+    }
+
+    this.#api = api;
+
+    api.on("Carousel.addSlide", this.#onAddSlideEvent).on("Carousel.attachSlideEl", this.#onAttachSlideElEvent);
+  }
+
+  destroy(): void {
+    this.#api
+      ?.off("Carousel.addSlide", this.#onAddSlideEvent)
+      ?.off("Carousel.attachSlideEl", this.#onAttachSlideElEvent);
+  }
+
+  #onAddSlide(_: FancyboxInstance, __: CarouselInstance, slide: CarouselSlide): void {
+    if (!slide.src) {
+      return;
+    }
+
+    if (this.#isExternalURL(slide.src)) {
+      this.#sliderToType.set(slide, slide.type);
+      slide.type = "consent";
+    }
+  }
+
+  #onAttachSlideEl(_: FancyboxInstance, carousel: CarouselInstance, slide: CarouselSlide): void {
+    if (slide.type !== "consent") {
+      return;
+    }
+
+    slide.el!.innerHTML = "";
+    slide.el!.append(this.getConsentHTML(carousel, slide));
+  }
+
+  private getConsentHTML(carousel: CarouselInstance, slide: CarouselSlide): DocumentFragment {
+    const clone = this.#templateNode!.content.cloneNode(true) as DocumentFragment;
+
+    const messageUserConsent = clone.querySelector(".messageUserConsent") as HTMLElement;
+    messageUserConsent.dataset.payload = "";
+
+    const externalURL = clone.querySelector(".externalURL") as HTMLAnchorElement;
+    const url = new URL(slide.src!);
+    externalURL.href = slide.src!;
+    externalURL.innerText = url.host;
+
+    const button = clone.querySelector(".jsButtonMessageUserConsentEnable") as HTMLButtonElement;
+    button.addEventListener("click", () => {
+      this.destroy();
+
+      this.#templateNode!.dataset.showAllMedia = "1";
+
+      carousel
+        .getSlides()
+        .filter((slide) => slide.type === "consent")
+        .forEach((slide) => {
+          slide.type = this.#sliderToType.get(slide);
+          slide.el!.innerHTML = "";
+        });
+
+      // refresh current slide content
+      carousel.emit("detachSlideEl", slide);
+      carousel.emit("attachSlideEl", slide);
+    });
+
+    return clone;
+  }
+
+  #showAllMedia(): boolean {
+    if (!this.#templateNode) {
+      return true;
+    }
+
+    if (stringToBool(this.#templateNode.dataset.showAllMedia!)) {
+      return true;
+    }
+
+    return allExternalMediaEnabled();
+  }
+
+  #isExternalURL(url: string): boolean {
+    return new URL(url).origin !== window.location.origin;
+  }
+}

ts/WoltLabSuite/Core/Component/Image/Viewer.ts

@@ -1,11 +1,20 @@
+/**
+ * @author Olaf Braun
+ * @copyright 2001-2025 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ */
+
 import { Fancybox, CarouselSlide, FancyboxInstance } from "@fancyapps/ui";
 import { getPageOverlayContainer } from "WoltLabSuite/Core/Helper/PageOverlay";
 import { getPhrase } from "WoltLabSuite/Core/Language";
+import { ConsentPlugin } from "./Fancybox/ConsentPlugin";
 
 setDefaultConfig();
 
 export function setup() {
-  Fancybox.bind('[data-fancybox]:is([data-type="image"],[data-type="video"])');
+  Fancybox.bind(
+    '[data-fancybox]:is([data-type="image"],[data-type="youtube"],[data-type="vimeo"],[data-type="video"])',
+  );
 }
 
 export function setupLegacy() {
@@ -27,6 +36,12 @@ function setDefaultConfig(): void {
       autoplay: false,
     },
   };
+  if (!defaultConfig.plugins) {
+    defaultConfig.plugins = {};
+  }
+  defaultConfig.plugins.consent = () => {
+    return new ConsentPlugin();
+  };
 }
 
 export function getLocalization(): Record<string, string> {

ts/WoltLabSuite/Core/Ui/Message/UserConsent.ts

@@ -14,11 +14,9 @@ import DomUtil from "../../Dom/Util";
 import User from "../../User";
 
 class UserConsent {
-  private enableAll = false;
-
   constructor() {
     if (window.sessionStorage.getItem(`${Core.getStoragePrefix()}user-consent`) === "all") {
-      this.enableAll = true;
+      enableAll = true;
     }
 
     this.registerEventListeners();
@@ -27,7 +25,7 @@ class UserConsent {
   }
 
   private registerEventListeners(): void {
-    if (this.enableAll) {
+    if (enableAll) {
       this.enableAllExternalMedia();
     } else {
       wheneverFirstSeen(".jsButtonMessageUserConsentEnable", (button) => {
@@ -39,7 +37,7 @@ class UserConsent {
   private click(event: MouseEvent): void {
     event.preventDefault();
 
-    this.enableAll = true;
+    enableAll = true;
 
     this.enableAllExternalMedia();
 
@@ -72,10 +70,15 @@ class UserConsent {
   }
 }
 
+let enableAll = false;
 let userConsent: UserConsent;
 
 export function init(): void {
   if (!userConsent) {
     userConsent = new UserConsent();
   }
 }
+
+export function allExternalMediaEnabled(): boolean {
+  return enableAll;
+}