From 3cbe7e1efc948fa3f978eb1d49c843d529d597c9 Mon Sep 17 00:00:00 2001
From: SleeplessOne1917 <28871516+SleeplessOne1917@users.noreply.github.com>
Date: Thu, 18 Apr 2024 19:28:54 -0400
Subject: [PATCH] Prevent images from downloading without consent

---
 lemmy-translations                            |  2 +-
 src/assets/css/main.css                       |  8 ---
 src/server/utils/create-ssr-html.tsx          | 10 ++++
 src/shared/components/app/app.tsx             |  2 +-
 .../components/common/adult-consent-modal.tsx |  2 +-
 src/shared/components/common/pictrs-image.tsx | 60 ++++++++++---------
 6 files changed, 44 insertions(+), 40 deletions(-)

diff --git a/lemmy-translations b/lemmy-translations
index e78c744a..c88dd1e3 160000
--- a/lemmy-translations
+++ b/lemmy-translations
@@ -1 +1 @@
-Subproject commit e78c744abe5c3824f9ca7de7f1ee086468385ee0
+Subproject commit c88dd1e3b36ee1617f1b86acf94c1b7946e97cd4
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 93064d0a..a7d7e706 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -461,11 +461,3 @@ br.big {
 .totp-link {
   width: fit-content;
 }
-
-#app[data-adult-consent] {
-  filter: blur(10px);
-  -webkit-filter: blur(10px);
-  -moz-filter: blur(10px);
-  -o-filter: blur(10px);
-  -ms-filter: blur(10px);
-}
diff --git a/src/server/utils/create-ssr-html.tsx b/src/server/utils/create-ssr-html.tsx
index f6f9ec58..cb0ec615 100644
--- a/src/server/utils/create-ssr-html.tsx
+++ b/src/server/utils/create-ssr-html.tsx
@@ -98,6 +98,16 @@ export async function createSsrHtml(
     ${helmet.title.toString()}
     ${helmet.meta.toString()}
   
+    <style>
+    #app[data-adult-consent] {
+      filter: blur(10px);
+      -webkit-filter: blur(10px);
+      -moz-filter: blur(10px);
+      -o-filter: blur(10px);
+      -ms-filter: blur(10px);
+    }
+    </style>
+
     <!-- Required meta tags -->
     <meta name="Description" content="Lemmy">
     <meta charset="utf-8">
diff --git a/src/shared/components/app/app.tsx b/src/shared/components/app/app.tsx
index 0c08cee0..4d1cbea2 100644
--- a/src/shared/components/app/app.tsx
+++ b/src/shared/components/app/app.tsx
@@ -40,7 +40,7 @@ export default class App extends Component<any, any> {
             id="app"
             className="lemmy-site"
             ref={this.rootRef}
-            data-adult-consent={this.isoData.showAdultConsentModal}
+            data-adult-consent={this.isoData.showAdultConsentModal || null}
           >
             <button
               type="button"
diff --git a/src/shared/components/common/adult-consent-modal.tsx b/src/shared/components/common/adult-consent-modal.tsx
index 27c8c05a..ca73e895 100644
--- a/src/shared/components/common/adult-consent-modal.tsx
+++ b/src/shared/components/common/adult-consent-modal.tsx
@@ -89,8 +89,8 @@ interface AdultConsentModalState {
 
 function handleAdultConsent(i: AdultConsentModal) {
   document.cookie = `${adultConsentCookieKey}=true; Path=/; SameSite=Strict${isHttps() ? "; Secure" : ""}`;
-  document.querySelector("#app")?.removeAttribute("data-adult-consent");
   i.setState({ show: false });
+  location.reload();
 }
 
 function handleAdultConsentGoBack(i: AdultConsentModal) {
diff --git a/src/shared/components/common/pictrs-image.tsx b/src/shared/components/common/pictrs-image.tsx
index 1983a85d..9a5f450e 100644
--- a/src/shared/components/common/pictrs-image.tsx
+++ b/src/shared/components/common/pictrs-image.tsx
@@ -2,6 +2,8 @@ import classNames from "classnames";
 import { Component } from "inferno";
 
 import { UserService } from "../../services";
+import { setIsoData } from "@utils/app";
+import { IsoData } from "../../interfaces";
 
 const iconThumbnailSize = 96;
 const thumbnailSize = 256;
@@ -19,9 +21,7 @@ interface PictrsImageProps {
 }
 
 export class PictrsImage extends Component<PictrsImageProps, any> {
-  constructor(props: any, context: any) {
-    super(props, context);
-  }
+  private readonly isoData: IsoData = setIsoData(this.context);
 
   render() {
     const { src, icon, iconOverlay, banner, thumbnail, nsfw, pushup, cardTop } =
@@ -33,32 +33,34 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
         true);
 
     return (
-      <picture>
-        <source srcSet={this.src("webp")} type="image/webp" />
-        <source srcSet={src} />
-        <source srcSet={this.src("jpg")} type="image/jpeg" />
-        <img
-          src={src}
-          alt={this.alt()}
-          title={this.alt()}
-          loading="lazy"
-          className={classNames("overflow-hidden pictrs-image", {
-            "img-fluid": !(icon || iconOverlay),
-            banner,
-            "thumbnail rounded object-fit-cover":
-              thumbnail && !(icon || banner),
-            "img-expanded slight-radius": !(thumbnail || icon),
-            "img-blur": thumbnail && nsfw,
-            "object-fit-cover img-icon me-1": icon,
-            "img-blur-icon": icon && blurImage,
-            "img-blur-thumb": thumbnail && blurImage,
-            "ms-2 mb-0 rounded-circle object-fit-cover avatar-overlay":
-              iconOverlay,
-            "avatar-pushup": pushup,
-            "card-img-top": cardTop,
-          })}
-        />
-      </picture>
+      !this.isoData.showAdultConsentModal && (
+        <picture>
+          <source srcSet={this.src("webp")} type="image/webp" />
+          <source srcSet={src} />
+          <source srcSet={this.src("jpg")} type="image/jpeg" />
+          <img
+            src={src}
+            alt={this.alt()}
+            title={this.alt()}
+            loading="lazy"
+            className={classNames("overflow-hidden pictrs-image", {
+              "img-fluid": !(icon || iconOverlay),
+              banner,
+              "thumbnail rounded object-fit-cover":
+                thumbnail && !(icon || banner),
+              "img-expanded slight-radius": !(thumbnail || icon),
+              "img-blur": thumbnail && nsfw,
+              "object-fit-cover img-icon me-1": icon,
+              "img-blur-icon": icon && blurImage,
+              "img-blur-thumb": thumbnail && blurImage,
+              "ms-2 mb-0 rounded-circle object-fit-cover avatar-overlay":
+                iconOverlay,
+              "avatar-pushup": pushup,
+              "card-img-top": cardTop,
+            })}
+          />
+        </picture>
+      )
     );
   }