Prevent images from downloading without consent

lemmy-translations

@@ -1 +1 @@
-Subproject commit e78c744abe5c3824f9ca7de7f1ee086468385ee0
+Subproject commit c88dd1e3b36ee1617f1b86acf94c1b7946e97cd4

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);
-}

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">

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"

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) {

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) {
+  private readonly isoData: IsoData = setIsoData(this.context);
-    super(props, 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>
+      !this.isoData.showAdultConsentModal && (
-        <source srcSet={this.src("webp")} type="image/webp" />
+        <picture>
-        <source srcSet={src} />
+          <source srcSet={this.src("webp")} type="image/webp" />
-        <source srcSet={this.src("jpg")} type="image/jpeg" />
+          <source srcSet={src} />
-        <img
+          <source srcSet={this.src("jpg")} type="image/jpeg" />
-          src={src}
+          <img
-          alt={this.alt()}
+            src={src}
-          title={this.alt()}
+            alt={this.alt()}
-          loading="lazy"
+            title={this.alt()}
-          className={classNames("overflow-hidden pictrs-image", {
+            loading="lazy"
-            "img-fluid": !(icon || iconOverlay),
+            className={classNames("overflow-hidden pictrs-image", {
-            banner,
+              "img-fluid": !(icon || iconOverlay),
-            "thumbnail rounded object-fit-cover":
+              banner,
-              thumbnail && !(icon || banner),
+              "thumbnail rounded object-fit-cover":
-            "img-expanded slight-radius": !(thumbnail || icon),
+                thumbnail && !(icon || banner),
-            "img-blur": thumbnail && nsfw,
+              "img-expanded slight-radius": !(thumbnail || icon),
-            "object-fit-cover img-icon me-1": icon,
+              "img-blur": thumbnail && nsfw,
-            "img-blur-icon": icon && blurImage,
+              "object-fit-cover img-icon me-1": icon,
-            "img-blur-thumb": thumbnail && blurImage,
+              "img-blur-icon": icon && blurImage,
-            "ms-2 mb-0 rounded-circle object-fit-cover avatar-overlay":
+              "img-blur-thumb": thumbnail && blurImage,
-              iconOverlay,
+              "ms-2 mb-0 rounded-circle object-fit-cover avatar-overlay":
-            "avatar-pushup": pushup,
+                iconOverlay,
-            "card-img-top": cardTop,
+              "avatar-pushup": pushup,
-          })}
+              "card-img-top": cardTop,
-        />
+            })}
-      </picture>
+          />
+        </picture>
+      )
     );
   }