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,6 +33,7 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
         true);
 
     return (
+      !this.isoData.showAdultConsentModal && (
         <picture>
           <source srcSet={this.src("webp")} type="image/webp" />
           <source srcSet={src} />
@@ -59,6 +60,7 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
             })}
           />
         </picture>
+      )
     );
   }