fix(adblock): utilisation de l'url de matomo au lieu de celle d'un pr…

…ovider de pub pour éviter de modifier les CSP (#6227)
SocialGouv · Oct 30, 2024 · 5d6be94 · 5d6be94
1 parent 0a2a701
commit 5d6be94
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 22 deletions.
diff --git a/packages/code-du-travail-frontend/middleware.ts b/packages/code-du-travail-frontend/middleware.ts
@@ -8,7 +8,7 @@ export function middleware(request) {
     process.env.NEXT_PUBLIC_APP_ENV !== "production" ? "'unsafe-eval'" : ""
   };
   frame-src 'self' https://mon-entreprise.urssaf.fr https://matomo.fabrique.social.gouv.fr *.dailymotion.com;
-  connect-src 'self' https://geo.api.gouv.fr https://sentry.fabrique.social.gouv.fr https://matomo.fabrique.social.gouv.fr https://www3.doubleclick.net https://marketingplatform.google.com/about/enterprise/;
+  connect-src 'self' https://geo.api.gouv.fr https://sentry.fabrique.social.gouv.fr https://matomo.fabrique.social.gouv.fr;
   worker-src 'self' blob:;
   `;
   // Replace newline characters and spaces

diff --git a/packages/code-du-travail-frontend/package.json b/packages/code-du-travail-frontend/package.json
@@ -49,7 +49,6 @@
     "@socialgouv/matomo-next": "^1.6.1",
     "@socialgouv/modeles-social": "workspace:^",
     "@socialgouv/reference-article": "^1.0.1",
-    "adblock-detect-react": "^1.3.1",
     "cors": "^2.8.5",
     "date-fns": "^2.22.1",
     "debounce-promise": "^3.1.2",

diff --git a/packages/code-du-travail-frontend/src/modules/layout/feedback/AdBlockDetector.ts b/packages/code-du-travail-frontend/src/modules/layout/feedback/AdBlockDetector.ts
@@ -0,0 +1,15 @@
+import { PIWIK_URL } from "../../../config";
+
+export const detectAdBlockCall = async (): Promise<boolean> => {
+  return fetch(PIWIK_URL, {
+    method: "HEAD",
+    mode: "no-cors",
+    cache: "no-store",
+  })
+    .then(({ redirected }) => {
+      return redirected;
+    })
+    .catch(() => {
+      return true;
+    });
+};
diff --git a/packages/code-du-travail-frontend/src/modules/layout/feedback/FeedbackAdblock.tsx b/packages/code-du-travail-frontend/src/modules/layout/feedback/FeedbackAdblock.tsx
@@ -3,10 +3,12 @@ import { fr } from "@codegouvfr/react-dsfr";
 export const FeedbackAdblock = () => {
   return (
     <>
-      <h2 className={fr.cx("fr-h5")}>Un adblock a été détecté.</h2>
+      <h2 className={fr.cx("fr-h5")}>
+        Nous n&apos;avons pas pu envoyer votre réponse
+      </h2>
       <p>
-        Il n&apos;est pas possible de soumettre un feedback si un adblock est
-        détecté. Merci de désactiver votre adblock et de recharger la page.
+        Pour soumettre votre avis, merci de désactiver temporairement votre
+        bloqueur de publicité et recharger la page.
       </p>
     </>
   );

diff --git a/packages/code-du-travail-frontend/src/modules/layout/feedback/index.tsx b/packages/code-du-travail-frontend/src/modules/layout/feedback/index.tsx
@@ -6,11 +6,10 @@ import { FeedbackDefault } from "./FeedbackDefault";
 import { FeedbackContent, FeedbackDataSent } from "./FeedbackContent";
 import { FeedbackAnswered } from "./FeedbackAnswered";
 import { useFeedbackEvents } from "./tracking";
-import { useDetectAdBlock } from "adblock-detect-react";
 import { FeedbackAdblock } from "./FeedbackAdblock";
+import { detectAdBlockCall } from "./AdBlockDetector";
 
 export const Feedback = () => {
-  const adBlockDetected = useDetectAdBlock();
   const [viewFeedback, setViewFeedback] = useState<
     "yes" | "no" | "default" | "answered" | "adBlockDetected"
   >("default");
@@ -21,13 +20,15 @@ export const Feedback = () => {
     emitFeedbackSuggestion,
   } = useFeedbackEvents();
 
-  const onClickNo = () => {
-    setViewFeedback(adBlockDetected ? "adBlockDetected" : "no");
+  const onClickNo = async () => {
+    const detectAddBlock = await detectAdBlockCall();
+    setViewFeedback(detectAddBlock ? "adBlockDetected" : "no");
     emitNegativeFeedback();
   };
 
-  const onClickYes = () => {
-    setViewFeedback(adBlockDetected ? "adBlockDetected" : "yes");
+  const onClickYes = async () => {
+    const detectAddBlock = await detectAdBlockCall();
+    setViewFeedback(detectAddBlock ? "adBlockDetected" : "yes");
     emitPositiveFeedback();
   };
 

diff --git a/yarn.lock b/yarn.lock
@@ -1902,7 +1902,6 @@ __metadata:
     "@types/debounce-promise": ^3.1.4
     "@types/jest": ^29.5.12
     "@types/xml2js": ^0.4.14
-    adblock-detect-react: ^1.3.1
     cors: ^2.8.5
     cypress: ^13.13.2
     cypress-html-validate: ^6.1.0
@@ -8550,16 +8549,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"adblock-detect-react@npm:^1.3.1":
-  version: 1.3.1
-  resolution: "adblock-detect-react@npm:1.3.1"
-  peerDependencies:
-    react: ">=16.8.0"
-    react-dom: ">=16.8.0"
-  checksum: cbedb878fa4e0b52a47325875fba171199b75a1ec8c13bcb81dbf0f02b1df895d55ce3b66fb6c111cdebc0ed341d247404e0bd799028d846c8c3631c3b3f0bf4
-  languageName: node
-  linkType: hard
-
 "add-stream@npm:^1.0.0":
   version: 1.0.0
   resolution: "add-stream@npm:1.0.0"