From c0f1c94dc5243f5fba015cfd6d9139ec3d517cba Mon Sep 17 00:00:00 2001 From: Maxime Quandalle Date: Fri, 7 May 2021 17:35:35 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=96=8B=EF=B8=8F=20Mentionne=20les=20en-t?= =?UTF-8?q?=C3=AAte=20CSP=20sur=20la=20page=20int=C3=A9gration?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes #882 --- .../components/layout/Footer/Footer.tsx | 14 +++-- mon-entreprise/source/locales/ui-en.yaml | 22 +++++--- mon-entreprise/source/pages/Iframes/index.tsx | 4 +- .../source/pages/integration/Iframe.tsx | 56 +++++++++++++++++-- 4 files changed, 77 insertions(+), 19 deletions(-) diff --git a/mon-entreprise/source/components/layout/Footer/Footer.tsx b/mon-entreprise/source/components/layout/Footer/Footer.tsx index 2bd6cd95b..1cd0da9b1 100644 --- a/mon-entreprise/source/components/layout/Footer/Footer.tsx +++ b/mon-entreprise/source/components/layout/Footer/Footer.tsx @@ -103,13 +103,15 @@ export default function Footer() { Intégrer nos simulateurs - {' • '} {language === 'fr' && ( - - - Accessibilité : non conforme - - + <> + {' • '} + + + Accessibilité : non conforme + + + )} {!!hrefLink.length && ' • '} {hrefLink.map(({ hrefLang, href }) => ( diff --git a/mon-entreprise/source/locales/ui-en.yaml b/mon-entreprise/source/locales/ui-en.yaml index e2aa64193..f0fdaca90 100644 --- a/mon-entreprise/source/locales/ui-en.yaml +++ b/mon-entreprise/source/locales/ui-en.yaml @@ -108,7 +108,6 @@ Nous n'avons rien trouvé: We didn't find any matching registered company. Oui: Yes Outils pour les développeurs: Tools for developers Pages associées: Related pages -Professions libérales: By job Par statut: By status Part du salaire net maintenue: Share of net salary maintained Part employeur: Employer share @@ -127,6 +126,7 @@ Prise en charge du revenu net avec chômage partiel: Net income support with sho Prochaines questions: Next questions Professionnels de santé: Health Care Professionals Professions: Professions +Professions libérales: By job Protection sociale: Social security Précédent: Previous Prévisualisation: Preview @@ -972,12 +972,20 @@ pages: source tools to be integrated seemlessly in the usual journey of your users. titre: Integrate social security law at the heart of your tools - iframe: <0>Integrate the Web module<1>Our simulators can be seamlessly - integrated by adding a simple line of code to your web page.<2>You can - choose the simulator to integrate and <2>customize the main color of the - module to blend it into the visual theme of your page.<3>The - attribute <1>data-lang="en" allows you to choose English as the - simulator language. + iframe: + csp-1: <0>Iframe integration and content security policy<1>The error below + that is displayed in the console is related to the communication between + the parent page and the iframe for automatic resizing to the displayed + content. + csp-2: "You can correct it with the following policy:" + intro: <0><0>Integrate the web module<1>Our simulators can be integrated + seamlessly by adding a simple line of code to your web page.<2>You + can choose the simulator to integrate and <2>customize the main color of + the module to fit the visual theme of your page.<3>The + <1>data-lang="en" attribute allows you to choose English as the + simulator language.<1><2>Note that if your site uses a + content security policy via the HTTP <1>Content-Security-Policy + response header, a benign error may appear in the console.<3> module: What module? gérer: aide-déclaration-indépendant: diff --git a/mon-entreprise/source/pages/Iframes/index.tsx b/mon-entreprise/source/pages/Iframes/index.tsx index e5350bc58..8ebdb9ec2 100644 --- a/mon-entreprise/source/pages/Iframes/index.tsx +++ b/mon-entreprise/source/pages/Iframes/index.tsx @@ -14,7 +14,9 @@ export default function Iframes() { // briefly during transitions, cf. // https://github.com/betagouv/mon-entreprise/issues/1462 useEffect(() => { - document.body.style.overflowY = 'hidden' + if ('parentIFrame' in window) { + document.body.style.overflowY = 'hidden' + } }, []) return ( diff --git a/mon-entreprise/source/pages/integration/Iframe.tsx b/mon-entreprise/source/pages/integration/Iframe.tsx index 2e627c707..031211aad 100644 --- a/mon-entreprise/source/pages/integration/Iframe.tsx +++ b/mon-entreprise/source/pages/integration/Iframe.tsx @@ -1,3 +1,4 @@ +import Overlay from 'Components/Overlay' import { ThemeColorsContext, ThemeColorsProvider, @@ -177,8 +178,8 @@ export default function Integration() { <> -
- + +

Intégrez le module Web

Nos simulateurs sont intégrables de manière transparente en ajoutant @@ -193,9 +194,15 @@ export default function Integration() { L'attribut data-lang="en" vous permet quant à lui de choisir l'anglais comme langue du simulateur.

- -
- +
+ +

+ À noter que si votre site utilise une politique de sécurité de contenu + via l'en-tête de réponse HTTP Content-Security-Policy, une + erreur bénigne peut apparaître dans la console. + +

+

Quelques intégrations @@ -249,6 +256,44 @@ export default function Integration() { ) } +function EnSavoirPlusCSP() { + const [opened, setOpened] = useState(false) + return ( + <> + + {opened && ( + setOpened(false)} style={{ textAlign: 'left' }}> + +

Intégration iframe et politique de sécurité de contenu

+

+ L'erreur ci-dessous qui s'affiche dans la console est liée à la + communication entre la page parente et l'iframe pour le + redimensionnement automatique au contenu affiché. +

+ +
+ Failed to execute 'postMessage' on 'DOMWindow': The target origin + provided ('https://mon-entreprise.fr') does not match the recipient + window's origin +
+

+ + Vous pouvez la corriger avec la politique suivante : + +

+ + script-src 'self' 'unsafe-inline' https://mon-entreprise.fr; +
+ img-src 'self' https://mon-entreprise.fr; + + + )} + + ) +} + type IntegrationCodeProps = { module?: string color?: string @@ -284,6 +329,7 @@ function IntegrationCode({ margin: auto; margin-bottom: 1em; overflow: auto; + line-height: 1.6em; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05), -1px 1px 1px rgba(0, 0, 0, 0.02);