From 096b5e85689a944b5ada6a4ab4707e33e8e4cd9d Mon Sep 17 00:00:00 2001
From: Johan Girod <johan.girod@beta.gouv.fr>
Date: Tue, 8 Feb 2022 16:37:43 +0100
Subject: [PATCH] =?UTF-8?q?R=C3=A9pare=20l'autoresize=20de=20l'iframe=20su?=
 =?UTF-8?q?r=20chrome?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On utilise une logique propre, plus la peine de passer par iframeResizer (qui intègre beaucoup de logique
de polyfill).

Par ailleurs, répare la page de test de l'intégration iframe en dev.

fix #1968, fix #1998
---
 .../integration/mon-entreprise/covid19.js     |  10 +-
 .../mon-entreprise/demande-mobilité.js        |   6 +-
 .../mon-entreprise/english/navigation.js      |   8 +-
 .../mon-entreprise/english/status.js          |   2 +-
 .../mon-entreprise/localisation-field.js      |   6 +-
 .../mon-entreprise/partage-simulation.js      |   2 +-
 .../mon-entreprise/persistence-simulation.js  |   8 +-
 .../integration/mon-entreprise/recherche.js   |   4 +-
 .../mon-entreprise/simulateur-ae.js           |  10 +-
 .../mon-entreprise/simulateur-dividendes.js   |  10 +-
 .../mon-entreprise/simulateur-salarie.js      |  14 +-
 site/cypress/support/simulateur.js            |  10 +-
 site/package.json                             |   4 +-
 site/source/App.tsx                           |   1 -
 site/source/Provider.tsx                      |   7 +-
 .../components/Simulation/SimulationGoals.tsx |   2 +-
 .../components/utils/embeddedContext.tsx      |   8 +-
 site/source/hooks/useIframeResizer.ts         |  20 +++
 site/source/iframe-integration-script.js      |  18 +--
 site/vite.config.ts                           |   8 +-
 yarn.lock                                     | 136 ++++++++++++++++--
 21 files changed, 230 insertions(+), 64 deletions(-)
 create mode 100644 site/source/hooks/useIframeResizer.ts

diff --git a/site/cypress/integration/mon-entreprise/covid19.js b/site/cypress/integration/mon-entreprise/covid19.js
index 87b4a65e7..fc367c9e3 100644
--- a/site/cypress/integration/mon-entreprise/covid19.js
+++ b/site/cypress/integration/mon-entreprise/covid19.js
@@ -9,11 +9,13 @@ describe('Page covid-19', function () {
 	if (!fr) {
 		return
 	}
-	before(() => cy.visit(encodeURI('/simulateurs/chômage-partiel')))
-	it('should not crash', () => {
+	before(function () {
+		return cy.visit(encodeURI('/simulateurs/chômage-partiel'))
+	})
+	it('should not crash', function () {
 		cy.contains('Salaire brut mensuel')
 	})
-	it('should display 100% de prise en charge pour un SMIC', () => {
+	it('should display 100% de prise en charge pour un SMIC', function () {
 		cy.contains('SMIC').click()
 		testText('comparaison-net', (text) =>
 			expect(text).to.eq('Soit 100 % du revenu net')
@@ -22,7 +24,7 @@ describe('Page covid-19', function () {
 			expect(text).to.eq('Soit 0 % du coût habituel')
 		)
 	})
-	it('should display an amount for the prise en charge pour un salaire médian', () => {
+	it('should display an amount for the prise en charge pour un salaire médian', function () {
 		cy.contains('salaire médian').click()
 		testText('comparaison-net', (text) =>
 			expect(text).to.match(/Soit [\d]{2} % du revenu net/)
diff --git a/site/cypress/integration/mon-entreprise/demande-mobilité.js b/site/cypress/integration/mon-entreprise/demande-mobilité.js
index 2f206a1b6..3ba44f683 100644
--- a/site/cypress/integration/mon-entreprise/demande-mobilité.js
+++ b/site/cypress/integration/mon-entreprise/demande-mobilité.js
@@ -15,7 +15,7 @@ describe(`Formulaire demande mobilité (${
 	let responses = {}
 	const hostnamesToRecord = ['geo.api.gouv.fr']
 
-	beforeEach(() => {
+	beforeEach(function () {
 		pendingRequests = new Set()
 		responses = {}
 		cy.setInterceptResponses(
@@ -26,7 +26,7 @@ describe(`Formulaire demande mobilité (${
 		)
 		cy.visit(encodeURI('/gérer/demande-mobilité'))
 	})
-	afterEach(() => {
+	afterEach(function () {
 		cy.writeInterceptResponses(
 			pendingRequests,
 			responses,
@@ -34,7 +34,7 @@ describe(`Formulaire demande mobilité (${
 		)
 	})
 
-	it('should allow to complete and download', () => {
+	it('should allow to complete and download', function () {
 		cy.contains('Salarié').click().wait(500)
 		cy.focused().tab().type('{downarrow}')
 
diff --git a/site/cypress/integration/mon-entreprise/english/navigation.js b/site/cypress/integration/mon-entreprise/english/navigation.js
index 6ca06dc7f..fd20c6a49 100644
--- a/site/cypress/integration/mon-entreprise/english/navigation.js
+++ b/site/cypress/integration/mon-entreprise/english/navigation.js
@@ -6,7 +6,7 @@ const GERER_FIXTURES_FOLDER = `${FIXTURES_FOLDER}/gérer`
 const writeFixtures = Cypress.env('record_http') !== undefined
 
 describe('General navigation', function () {
-	it('should enable switching site language', () => {
+	it('should enable switching site language', function () {
 		cy.visit(
 			fr ? encodeURI('/créer/auto-entrepreneur') : '/create/auto-entrepreneur'
 		)
@@ -17,7 +17,7 @@ describe('General navigation', function () {
 		)
 	})
 
-	it('should go back to home when clicking on logo', () => {
+	it('should go back to home when clicking on logo', function () {
 		cy.visit(encodeURI('/documentation/contrat-salarié'))
 		cy.get('[data-test-id="logo img"]').click()
 		cy.url().should('match', new RegExp(`${Cypress.config().baseUrl}/?`))
@@ -33,7 +33,7 @@ describe(`Navigation to income simulator using company name (${
 		'search-recherche-entreprises.fabrique.social.gouv.fr',
 		'geo.api.gouv.fr',
 	]
-	beforeEach(() => {
+	beforeEach(function () {
 		cy.clearLocalStorage() // Try to avoid flaky tests
 
 		pendingRequests = new Set()
@@ -46,7 +46,7 @@ describe(`Navigation to income simulator using company name (${
 		)
 		cy.visit('/')
 	})
-	afterEach(() => {
+	afterEach(function () {
 		cy.writeInterceptResponses(
 			pendingRequests,
 			responses,
diff --git a/site/cypress/integration/mon-entreprise/english/status.js b/site/cypress/integration/mon-entreprise/english/status.js
index f4e7a5d93..d7e18ed70 100644
--- a/site/cypress/integration/mon-entreprise/english/status.js
+++ b/site/cypress/integration/mon-entreprise/english/status.js
@@ -1,6 +1,6 @@
 describe('Status guide', function () {
 	const fr = Cypress.env('language') === 'fr'
-	beforeEach(() => {
+	beforeEach(function () {
 		cy.visit(fr ? encodeURI('/créer') : '/create')
 		cy.contains(fr ? 'Trouver le bon statut' : 'Find the right status').click()
 	})
diff --git a/site/cypress/integration/mon-entreprise/localisation-field.js b/site/cypress/integration/mon-entreprise/localisation-field.js
index 8b567b98c..2b7591702 100644
--- a/site/cypress/integration/mon-entreprise/localisation-field.js
+++ b/site/cypress/integration/mon-entreprise/localisation-field.js
@@ -1,10 +1,12 @@
 const fr = Cypress.env('language') === 'fr'
 
-describe('Champs localisation (simulateur salarié)', () => {
+describe('Champs localisation (simulateur salarié)', function () {
 	if (!fr) {
 		return
 	}
-	before(() => cy.visit(encodeURI('/simulateurs/salarié')))
+	before(function () {
+		return cy.visit(encodeURI('/simulateurs/salarié'))
+	})
 
 	it('should not crash when selecting localisation', function () {
 		cy.contains('SMIC').click()
diff --git a/site/cypress/integration/mon-entreprise/partage-simulation.js b/site/cypress/integration/mon-entreprise/partage-simulation.js
index 3e8633394..ab512d322 100644
--- a/site/cypress/integration/mon-entreprise/partage-simulation.js
+++ b/site/cypress/integration/mon-entreprise/partage-simulation.js
@@ -1,6 +1,6 @@
 const fr = Cypress.env('language') === 'fr'
 
-describe('Partage (simulateur salarié)', () => {
+describe('Partage (simulateur salarié)', function () {
 	const brutInputSelector =
 		'#contrat\\ salarié\\ \\.\\ rémunération\\ \\.\\ brut\\ de\\ base'
 	const simulatorUrl = '/simulateurs/salaire-brut-net'
diff --git a/site/cypress/integration/mon-entreprise/persistence-simulation.js b/site/cypress/integration/mon-entreprise/persistence-simulation.js
index cc98d8f73..eeb71cdc7 100644
--- a/site/cypress/integration/mon-entreprise/persistence-simulation.js
+++ b/site/cypress/integration/mon-entreprise/persistence-simulation.js
@@ -1,11 +1,13 @@
 const inputSelector = 'div[aria-labelledby="simulator-legend"] input'
 const fr = Cypress.env('language') === 'fr'
-describe('Persistence (simulateur salarié)', () => {
+describe('Persistence (simulateur salarié)', function () {
 	if (!fr) {
 		return
 	}
-	before(() => cy.visit(encodeURI('/simulateurs/salarié')))
-	beforeEach(() => {
+	before(function () {
+		return cy.visit(encodeURI('/simulateurs/salarié'))
+	})
+	beforeEach(function () {
 		cy.clearLocalStorage()
 	})
 
diff --git a/site/cypress/integration/mon-entreprise/recherche.js b/site/cypress/integration/mon-entreprise/recherche.js
index cf743b320..b2d0647e0 100644
--- a/site/cypress/integration/mon-entreprise/recherche.js
+++ b/site/cypress/integration/mon-entreprise/recherche.js
@@ -1,11 +1,11 @@
 const fr = Cypress.env('language') === 'fr'
 
-describe('Recherche globales', () => {
+describe('Recherche globales', function () {
 	if (!fr || Cypress.config().baseUrl != 'https://mon-entreprise.urssaf.fr') {
 		return
 	}
 
-	it('should display the search results when the magnifying glass is clicked', () => {
+	it('should display the search results when the magnifying glass is clicked', function () {
 		cy.visit('/')
 
 		cy.contains('Rechercher').click()
diff --git a/site/cypress/integration/mon-entreprise/simulateur-ae.js b/site/cypress/integration/mon-entreprise/simulateur-ae.js
index d9d80debe..01b1f4214 100644
--- a/site/cypress/integration/mon-entreprise/simulateur-ae.js
+++ b/site/cypress/integration/mon-entreprise/simulateur-ae.js
@@ -2,20 +2,22 @@ const fr = Cypress.env('language') === 'fr'
 const inputSelector =
 	'div[aria-labelledby="simulator-legend"] input[inputmode="numeric"]'
 
-describe('Simulateur auto-entrepreneur', () => {
+describe('Simulateur auto-entrepreneur', function () {
 	if (!fr) {
 		return
 	}
-	before(() => cy.visit('/simulateurs/auto-entrepreneur'))
+	before(function () {
+		return cy.visit('/simulateurs/auto-entrepreneur')
+	})
 
-	it('should allow to enter the date of creation', () => {
+	it('should allow to enter the date of creation', function () {
 		cy.get(inputSelector).first().type('{selectall}50000')
 		cy.contains('Passer').click()
 		cy.contains('Passer').click()
 		cy.contains('Début 2022').click()
 		cy.contains('ACRE')
 	})
-	it('should not have negative value', () => {
+	it('should not have negative value', function () {
 		cy.contains('Mensuel').click()
 		cy.wait(100)
 		cy.get(inputSelector).first().type('{selectall}5000')
diff --git a/site/cypress/integration/mon-entreprise/simulateur-dividendes.js b/site/cypress/integration/mon-entreprise/simulateur-dividendes.js
index 3fb258cbb..fb360d58d 100644
--- a/site/cypress/integration/mon-entreprise/simulateur-dividendes.js
+++ b/site/cypress/integration/mon-entreprise/simulateur-dividendes.js
@@ -1,19 +1,21 @@
 const inputSelector = 'div[aria-labelledby="simulator-legend"] input'
 const fr = Cypress.env('language') === 'fr'
 
-describe('Simulateur dividendes', () => {
+describe('Simulateur dividendes', function () {
 	if (!fr) {
 		return
 	}
-	before(() => cy.visit('/simulateurs/dividendes'))
+	before(function () {
+		return cy.visit('/simulateurs/dividendes')
+	})
 
-	it('should show by default the PFU calculation at 12.8 / 17.2', () => {
+	it('should show by default the PFU calculation at 12.8 / 17.2', function () {
 		cy.get(inputSelector).first().type('{selectall}5000')
 		cy.contains(/[cC]otisations\s+17,2\s*%/)
 		cy.contains(/[Ii]mpôt\s+12,8\s*%/)
 	})
 
-	it('should allow switching PFU with barème', () => {
+	it('should allow switching PFU with barème', function () {
 		cy.get('div [role="radiogroup"] input').eq(0).should('not.be.checked')
 	})
 })
diff --git a/site/cypress/integration/mon-entreprise/simulateur-salarie.js b/site/cypress/integration/mon-entreprise/simulateur-salarie.js
index 92e9c7def..a64515bac 100644
--- a/site/cypress/integration/mon-entreprise/simulateur-salarie.js
+++ b/site/cypress/integration/mon-entreprise/simulateur-salarie.js
@@ -1,13 +1,15 @@
 const fr = Cypress.env('language') === 'fr'
 
-describe('Simulateur salarié', () => {
+describe('Simulateur salarié', function () {
 	if (!fr) {
 		return
 	}
-	before(() => cy.visit(encodeURI('/simulateurs/salarié')))
+	before(function () {
+		return cy.visit(encodeURI('/simulateurs/salarié'))
+	})
 
-	describe('part time contract', () => {
-		before(() => {
+	describe('part time contract', function () {
+		before(function () {
 			cy.get('button').contains('SMIC').click()
 			cy.contains('Voir mes paramètres').click()
 			cy.get('div[role="dialog"]').contains('Temps partiel').click()
@@ -15,7 +17,7 @@ describe('Simulateur salarié', () => {
 			cy.wait(100)
 		})
 
-		it('should permit selecting the smic before part-time contrat', () => {
+		it('should permit selecting the smic before part-time contrat', function () {
 			cy.get(
 				'#contrat\\ salarié\\ \\.\\ rémunération\\ \\.\\ brut\\ de\\ base'
 			).should(($input) => {
@@ -25,7 +27,7 @@ describe('Simulateur salarié', () => {
 			})
 		})
 
-		it('should permit customizing the number of worked hours and clear the input value', () => {
+		it('should permit customizing the number of worked hours and clear the input value', function () {
 			cy.contains('Suivant').click()
 			cy.focused().type(25)
 			cy.get(
diff --git a/site/cypress/support/simulateur.js b/site/cypress/support/simulateur.js
index 6ea97cfe5..718e295c9 100644
--- a/site/cypress/support/simulateur.js
+++ b/site/cypress/support/simulateur.js
@@ -5,17 +5,17 @@ const chargeInputSelector =
 const fr = Cypress.env('language') === 'fr'
 
 export const runSimulateurTest = (simulateur) => {
-	describe(`Simulateur ${simulateur}`, () => {
-		before(() =>
-			cy.visit(
+	describe(`Simulateur ${simulateur}`, function () {
+		before(function () {
+			return cy.visit(
 				encodeURI(`/${fr ? 'simulateurs' : 'calculators'}/${simulateur}`)
 			)
-		)
+		})
 		it('should not crash', function () {
 			cy.get(inputSelector)
 		})
 
-		it('should display a result when entering a value in any of the currency input', () => {
+		it('should display a result when entering a value in any of the currency input', function () {
 			cy.contains(fr ? 'Annuel' : 'Yearly').click()
 			if (['indépendant', 'profession-liberale'].includes(simulateur)) {
 				cy.get(chargeInputSelector).type(1000)
diff --git a/site/package.json b/site/package.json
index 82ce7e13c..2264481f6 100644
--- a/site/package.json
+++ b/site/package.json
@@ -40,7 +40,6 @@
 		"i18n:rules:translate": "node scripts/i18n/translate-rules.js",
 		"i18n:ui:check": "i18next -c scripts/i18n/parser.config.cjs && node scripts/i18n/check-missing-UI-translation",
 		"i18n:ui:translate": "rm -rf source/locales/static-analysis-fr.json && i18next -c scripts/i18n/parser.config.cjs && node scripts/i18n/translate-ui.js"
-
 	},
 	"resolutions": {
 		"@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
@@ -72,7 +71,6 @@
 		"@sentry/tracing": "^6.3.5",
 		"algoliasearch": "^4.10.2",
 		"fuse.js": "^6.4.6",
-		"iframe-resizer": "^4.1.1",
 		"markdown-to-jsx": "^7.1.5",
 		"modele-social": "^0.5.0",
 		"publicodes": "^1.0.0-beta.30",
@@ -112,6 +110,7 @@
 		"@types/react-router": "^5.1.2",
 		"@types/react-router-dom": "^5.3.2",
 		"@types/recharts": "^1.8.16",
+		"@types/serve-static": "^1.13.10",
 		"@types/styled-components": "^5.1.9",
 		"@typescript-eslint/eslint-plugin": "^5.10.2",
 		"@typescript-eslint/parser": "^5.10.2",
@@ -133,6 +132,7 @@
 		"prettier": "^2.5.1",
 		"rimraf": "^3.0.2",
 		"rollup-plugin-toml": "^1.0.0",
+		"serve-static": "^1.14.2",
 		"typescript": "^4.3.2",
 		"vite": "^2.7.13",
 		"vite-plugin-shim-react-pdf": "^1.0.4",
diff --git a/site/source/App.tsx b/site/source/App.tsx
index 9bd9cfe1f..ab55e00a9 100644
--- a/site/source/App.tsx
+++ b/site/source/App.tsx
@@ -10,7 +10,6 @@ import {
 } from 'Components/utils/EngineContext'
 import { SitePathsContext } from 'Components/utils/SitePathsContext'
 import { Container, Spacing } from 'DesignSystem/layout'
-import 'iframe-resizer'
 import { StrictMode, useContext, useMemo } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useTranslation } from 'react-i18next'
diff --git a/site/source/Provider.tsx b/site/source/Provider.tsx
index 8d4072ec4..470fe1564 100644
--- a/site/source/Provider.tsx
+++ b/site/source/Provider.tsx
@@ -12,9 +12,9 @@ import { Link } from 'DesignSystem/typography/link'
 import { Body, Intro } from 'DesignSystem/typography/paragraphs'
 import { createBrowserHistory } from 'history'
 import i18next from 'i18next'
-import 'iframe-resizer'
 import logo from 'Images/logo-monentreprise.svg'
-import React, { createContext, useEffect, useMemo, useState } from 'react'
+import { useIframeResizer } from 'Hooks/useIframeResizer'
+import React, { createContext, useMemo } from 'react'
 import { HelmetProvider } from 'react-helmet-async'
 import { I18nextProvider } from 'react-i18next'
 import { Provider as ReduxProvider } from 'react-redux'
@@ -28,6 +28,7 @@ import {
 	PreloadedState,
 	Store,
 } from 'redux'
+
 // ATInternet Tracking
 import { TrackingContext } from './ATInternetTracking'
 import { createTracker } from './ATInternetTracking/Tracker'
@@ -83,6 +84,8 @@ export default function Provider({
 	}, [])
 	onStoreCreated?.(store)
 
+	useIframeResizer()
+
 	return (
 		<DesignSystemThemeProvider>
 			<GlobalStyle />
diff --git a/site/source/components/Simulation/SimulationGoals.tsx b/site/source/components/Simulation/SimulationGoals.tsx
index 11784f7f1..72b1d2445 100644
--- a/site/source/components/Simulation/SimulationGoals.tsx
+++ b/site/source/components/Simulation/SimulationGoals.tsx
@@ -87,7 +87,7 @@ function TopSection({ toggles }: { toggles?: React.ReactNode }) {
 					justifyContent="center"
 				>
 					<LogoContainer
-						href={process.env.FR_BASE_URL}
+						href={import.meta.env.VITE_FR_BASE_URL}
 						target="_blank"
 						rel="noreferrer"
 					>
diff --git a/site/source/components/utils/embeddedContext.tsx b/site/source/components/utils/embeddedContext.tsx
index 7fedf879d..dc1a1fc7b 100644
--- a/site/source/components/utils/embeddedContext.tsx
+++ b/site/source/components/utils/embeddedContext.tsx
@@ -1,4 +1,10 @@
-import React, { createContext, ReactNode, useContext, useState } from 'react'
+import React, {
+	createContext,
+	ReactNode,
+	useContext,
+	useEffect,
+	useState,
+} from 'react'
 
 /*
 	Instead of relying on a contextual Provider that activates the
diff --git a/site/source/hooks/useIframeResizer.ts b/site/source/hooks/useIframeResizer.ts
new file mode 100644
index 000000000..6ac74f637
--- /dev/null
+++ b/site/source/hooks/useIframeResizer.ts
@@ -0,0 +1,20 @@
+import { useEffect } from 'react'
+
+export function useIframeResizer() {
+	useEffect(() => {
+		// The code below communicate with the iframe.js script on a host site
+		// to automatically resize the iframe when its inner content height
+		// change.
+		if (!window.location.search.includes('iframe')) {
+			return
+		}
+		const minHeight = 700 // Also used in iframe.js
+		const observer = new ResizeObserver(([entry]) => {
+			const value = Math.max(minHeight, entry.contentRect.height)
+			window.parent?.postMessage({ kind: 'resize-height', value }, '*')
+		})
+		observer.observe(window.document.body)
+
+		return () => observer.disconnect()
+	}, [])
+}
diff --git a/site/source/iframe-integration-script.js b/site/source/iframe-integration-script.js
index a68c14c93..a3b301c3d 100644
--- a/site/source/iframe-integration-script.js
+++ b/site/source/iframe-integration-script.js
@@ -1,5 +1,3 @@
-import { iframeResizer } from 'iframe-resizer'
-
 import { hexToHSL } from './hexToHSL'
 
 let script =
@@ -37,13 +35,6 @@ const iframeAttributes = {
 for (var key in iframeAttributes) {
 	iframe.setAttribute(key, iframeAttributes[key])
 }
-iframeResizer(
-	{
-		interval: 0,
-		heightCalculationMethod: 'taggedElement',
-	},
-	iframe
-)
 
 const links = document.createElement('div')
 const moduleToSitePath = {
@@ -54,8 +45,11 @@ const moduleToSitePath = {
 }
 const simulateurLink =
 	import.meta.env.VITE_FR_BASE_URL + moduleToSitePath[moduleName] ?? ''
+
 const url = new URL(simulateurLink)
+
 const params = new URLSearchParams(url.search)
+
 params.append('utm_source', 'iframe')
 params.append('utm_medium', 'iframe')
 params.append('utm_campaign', 'newtext')
@@ -73,3 +67,9 @@ links.innerHTML = `
 
 script.parentNode.insertBefore(iframe, script)
 script.parentNode.insertBefore(links, script)
+
+window.addEventListener('message', function (evt) {
+	if (evt.data.kind === 'resize-height') {
+		iframe.style.height = evt.data.value + 'px'
+	}
+})
diff --git a/site/vite.config.ts b/site/vite.config.ts
index 4cc47058e..1beeab608 100644
--- a/site/vite.config.ts
+++ b/site/vite.config.ts
@@ -7,6 +7,7 @@ import toml from 'rollup-plugin-toml'
 import { defineConfig, Plugin } from 'vite'
 import { watchDottedNames } from '../modele-social/build.js'
 import shimReactPdf from 'vite-plugin-shim-react-pdf'
+import serveStatic from 'serve-static'
 
 export default defineConfig({
 	resolve: {
@@ -85,12 +86,17 @@ function multipleSPA(options: MultipleSPAOptions): Plugin {
 			.replace(/\{\{(.+)\}\}/g, (_match, p1) => siteData[p1.trim()])
 		return filledTemplate
 	}
-
 	return {
 		name: 'multiple-spa',
 		enforce: 'pre',
 
 		configureServer(vite) {
+			vite.middlewares.use(
+				'/simulateur-iframe-integration.js',
+				serveStatic(new URL('./dist', import.meta.url).pathname, {
+					index: 'simulateur-iframe-integration.js',
+				})
+			)
 			// eslint-disable-next-line @typescript-eslint/no-misused-promises
 			vite.middlewares.use(async (req, res, next) => {
 				const url = req.originalUrl
diff --git a/yarn.lock b/yarn.lock
index a527aaa9f..209371cb3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1665,6 +1665,11 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
   integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==
 
+"@types/mime@^1":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-1.3.2.tgz#93e25bf9ee75fe0fd80b594bc4feb0e862111b5a"
+  integrity sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==
+
 "@types/minimatch@^3.0.3":
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.5.tgz#1001cc5e6a3704b83c236027e77f2f58ea010f40"
@@ -1804,6 +1809,14 @@
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
   integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
 
+"@types/serve-static@^1.13.10":
+  version "1.13.10"
+  resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.13.10.tgz#f5e0ce8797d2d7cc5ebeda48a52c96c4fa47a8d9"
+  integrity sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ==
+  dependencies:
+    "@types/mime" "^1"
+    "@types/node" "*"
+
 "@types/sinonjs__fake-timers@^6.0.2":
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-6.0.4.tgz#0ecc1b9259b76598ef01942f547904ce61a6a77d"
@@ -2848,7 +2861,7 @@ debounce@^1.2.1:
   resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
   integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
 
-debug@^2.2.0:
+debug@2.6.9, debug@^2.2.0:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -2910,6 +2923,16 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
 
+depd@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+  integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
+
+destroy@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
+  integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
+
 dfa@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/dfa/-/dfa-1.2.0.tgz#96ac3204e2d29c49ea5b57af8d92c2ae12790657"
@@ -3009,6 +3032,11 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+  integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
+
 electron-to-chromium@^1.4.17:
   version "1.4.53"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.53.tgz#5d80a91c399b44952ef485857fb5b9d4387d2e60"
@@ -3019,6 +3047,11 @@ emoji-regex@^8.0.0:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
+encodeurl@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+  integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
+
 encoding@^0.1.11:
   version "0.1.13"
   resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
@@ -3215,6 +3248,11 @@ escalade@^3.1.1:
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
   integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
 
+escape-html@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+  integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
+
 escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
@@ -3428,6 +3466,11 @@ esutils@~1.0.0:
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-1.0.0.tgz#8151d358e20c8acc7fb745e7472c0025fe496570"
   integrity sha1-gVHTWOIMisx/t0XnRywAJf5JZXA=
 
+etag@~1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+  integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
+
 eventemitter2@^6.4.3:
   version "6.4.5"
   resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.5.tgz#97380f758ae24ac15df8353e0cc27f8b95644655"
@@ -3616,6 +3659,11 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+fresh@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+  integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
+
 fs-extra@^10.0.0:
   version "10.0.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.0.0.tgz#9ff61b655dde53fb34a82df84bb214ce802e17c1"
@@ -3947,6 +3995,17 @@ htmlparser2@^6.1.0:
     domutils "^2.5.2"
     entities "^2.0.0"
 
+http-errors@1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.8.1.tgz#7c3f28577cbc8a207388455dbd62295ed07bd68c"
+  integrity sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.4"
+    setprototypeof "1.2.0"
+    statuses ">= 1.5.0 < 2"
+    toidentifier "1.0.1"
+
 http-signature@~1.3.6:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.3.6.tgz#cb6fbfdf86d1c974f343be94e87f7fc128662cf9"
@@ -4009,11 +4068,6 @@ ieee754@^1.2.1:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
-iframe-resizer@^4.1.1:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/iframe-resizer/-/iframe-resizer-4.3.2.tgz#42dd88345d18b9e377b6044dddb98c664ab0ce6b"
-  integrity sha512-gOWo2hmdPjMQsQ+zTKbses08mDfDEMh4NneGQNP4qwePYujY1lguqP6gnbeJkf154gojWlBhIltlgnMfYjGHWA==
-
 ignore@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
@@ -4050,7 +4104,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.3:
+inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -4635,6 +4689,11 @@ mime-types@^2.1.12, mime-types@~2.1.19:
   dependencies:
     mime-db "1.51.0"
 
+mime@1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
+  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
+
 mimic-fn@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
@@ -4680,7 +4739,7 @@ ms@2.1.2:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-ms@^2.1.1:
+ms@2.1.3, ms@^2.1.1:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
@@ -4828,6 +4887,13 @@ object.values@^1.1.5:
     define-properties "^1.1.3"
     es-abstract "^1.19.1"
 
+on-finished@~2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
+  integrity sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=
+  dependencies:
+    ee-first "1.1.1"
+
 once@^1.3.0, once@^1.3.1, once@^1.3.2, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@@ -4917,6 +4983,11 @@ parse5@^6.0.1:
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
   integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
 
+parseurl@~1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
+  integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
+
 path-dirname@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
@@ -5166,6 +5237,11 @@ randexp@0.4.6:
     discontinuous-range "1.0.0"
     ret "~0.1.10"
 
+range-parser@~1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
+  integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
+
 react-color@^2.14.0:
   version "2.19.3"
   resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.19.3.tgz#ec6c6b4568312a3c6a18420ab0472e146aa5683d"
@@ -5716,6 +5792,40 @@ semver@^7.3.5:
   dependencies:
     lru-cache "^6.0.0"
 
+send@0.17.2:
+  version "0.17.2"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.17.2.tgz#926622f76601c41808012c8bf1688fe3906f7820"
+  integrity sha512-UJYB6wFSJE3G00nEivR5rgWp8c2xXvJ3OPWPhmuteU0IKj8nKbG3DrjiOmLwpnHGYWAVwA69zmTm++YG0Hmwww==
+  dependencies:
+    debug "2.6.9"
+    depd "~1.1.2"
+    destroy "~1.0.4"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    fresh "0.5.2"
+    http-errors "1.8.1"
+    mime "1.6.0"
+    ms "2.1.3"
+    on-finished "~2.3.0"
+    range-parser "~1.2.1"
+    statuses "~1.5.0"
+
+serve-static@^1.14.2:
+  version "1.14.2"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.14.2.tgz#722d6294b1d62626d41b43a013ece4598d292bfa"
+  integrity sha512-+TMNA9AFxUEGuC0z2mevogSnn9MXKb4fa7ngeRMJaaGv8vTwnIEkKi+QGvPt33HSnf8pRS+WGM0EbMtCJLKMBQ==
+  dependencies:
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    parseurl "~1.3.3"
+    send "0.17.2"
+
+setprototypeof@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
+  integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
+
 shallowequal@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
@@ -5836,6 +5946,11 @@ sshpk@^1.14.1:
     safer-buffer "^2.0.2"
     tweetnacl "~0.14.0"
 
+"statuses@>= 1.5.0 < 2", statuses@~1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
+  integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
+
 stream-shift@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d"
@@ -6090,6 +6205,11 @@ to-through@^2.0.0:
   dependencies:
     through2 "^2.0.3"
 
+toidentifier@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
+  integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
+
 toml@^2.3.3:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/toml/-/toml-2.3.6.tgz#25b0866483a9722474895559088b436fd11f861b"