betagouv
/
mon-entreprise
mirror of https://github.com/betagouv/mon-entreprise
1
0
Fork 0
Code Releases Activity

🖋️ Mentionne les en-tête CSP sur la page intégration 

Fixes #882
pull/1538/head
Maxime Quandalle 2021-05-07 17:35:35 +02:00
parent 4632ddb215
commit c0f1c94dc5
4 changed files with 77 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
mon-entreprise/source/components/layout/Footer/Footer.tsx
View File

@ -103,13 +103,15 @@ export default function Footer() {
<Link to={sitePaths.integration.index}>
<Trans>Intégrer nos simulateurs</Trans>
</Link>
{' • '}
{language === 'fr' && (
<Link to={sitePaths.accessibilité}>
<Trans i18nKey="footer.accessibilité">
Accessibilité : non conforme
</Trans>
</Link>
<>
{' • '}
<Link to={sitePaths.accessibilité}>
<Trans i18nKey="footer.accessibilité">
Accessibilité : non conforme
</Trans>
</Link>
</>
)}
{!!hrefLink.length && ' • '}
{hrefLink.map(({ hrefLang, href }) => (

22
mon-entreprise/source/locales/ui-en.yaml
View File

@ -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</0><1>Our simulators can be seamlessly
integrated by adding a simple line of code to your web page.</1><2>You can
choose the simulator to integrate and <2>customize the main color of the
module</2> to blend it into the visual theme of your page.</2><3>The
attribute <1>data-lang="en"</1> allows you to choose English as the
simulator language.</3>
iframe:
csp-1: <0>Iframe integration and content security policy</0><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.</1>
csp-2: "You can correct it with the following policy:"
intro: <0><0>Integrate the web module</0><1>Our simulators can be integrated
seamlessly by adding a simple line of code to your web page.</1><2>You
can choose the simulator to integrate and <2>customize the main color of
the module</2> to fit the visual theme of your page.</2><3>The
<1>data-lang="en"</1> attribute allows you to choose English as the
simulator language.</3></0><1></1><2>Note that if your site uses a
content security policy via the HTTP <1>Content-Security-Policy</1>
response header, a benign error may appear in the console.<3></3></2>
module: What module?
gérer:
aide-déclaration-indépendant:

4
mon-entreprise/source/pages/Iframes/index.tsx
View File

@ -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 (

56
mon-entreprise/source/pages/integration/Iframe.tsx
View File

@ -1,3 +1,4 @@
import Overlay from 'Components/Overlay'
import {
ThemeColorsContext,
ThemeColorsProvider,
@ -177,8 +178,8 @@ export default function Integration() {
<>
<ScrollToTop />
<TrackPage name="module_web" />
<div>
<Trans i18nKey="pages.développeurs.iframe">
<Trans i18nKey="pages.développeurs.iframe.intro">
<div>
<h1>Intégrez le module Web</h1>
<p>
Nos simulateurs sont intégrables de manière transparente en ajoutant
@ -193,9 +194,15 @@ export default function Integration() {
L'attribut <i>data-lang="en"</i> vous permet quant à lui de choisir
l'anglais comme langue du simulateur.
</p>
</Trans>
</div>
<IntegrationCustomizer />
</div>
<IntegrationCustomizer />
<p>
À noter que si votre site utilise une politique de sécurité de contenu
via l'en-tête de réponse HTTP <i>Content-Security-Policy</i>, une
erreur bénigne peut apparaître dans la console.
<EnSavoirPlusCSP />
</p>
</Trans>
<section className="blocks" id="integrations">
<h2>
<Trans>Quelques intégrations</Trans>
@ -249,6 +256,44 @@ export default function Integration() {
)
}
function EnSavoirPlusCSP() {
const [opened, setOpened] = useState(false)
return (
<>
<button onClick={() => setOpened(true)} className="ui__ link-button">
<Trans>En savoir plus</Trans>
</button>
{opened && (
<Overlay onClose={() => setOpened(false)} style={{ textAlign: 'left' }}>
<Trans i18nKey="pages.développeurs.iframe.csp-1">
<h3>Intégration iframe et politique de sécurité de contenu</h3>
<p>
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é.
</p>
</Trans>
<blockquote>
Failed to execute 'postMessage' on 'DOMWindow': The target origin
provided ('https://mon-entreprise.fr') does not match the recipient
window's origin
</blockquote>
<p>
<Trans i18nKey="pages.développeurs.iframe.csp-2">
Vous pouvez la corriger avec la politique suivante :
</Trans>
</p>
<code>
script-src 'self' 'unsafe-inline' https://mon-entreprise.fr;
<br />
img-src 'self' https://mon-entreprise.fr;
</code>
</Overlay>
)}
</>
)
}
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);