feat: iframe project

apps/nuxt/.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": ["@nuxt/eslint-config", "@vue/eslint-config-prettier/skip-formatting", "../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*", ".nuxt/**", ".output/**", "node_modules", "nuxt.config.ts"],
+  "ignorePatterns": ["!**/*", ".nuxt/**", ".output/**", "node_modules", "nuxt.config.ts", "src/public/scripts/iframe.js"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx", "*.vue"],

apps/nuxt/nuxt.config.ts

@@ -23,6 +23,12 @@ export default defineNuxtConfig({
     '/stats': { swr: 86400 }, // cached for 1 day (86400 seconds)
     '/budget': { prerender: true },
     '/ajouter-une-aide-entreprises': { prerender: true },
+    '/iframe/projet/**': {
+      swr: true,
+      security: {
+        headers: NuxtSecurityConfig.getIframePageHeadersConfig(),
+      }
+    }
   },
   compatibilityDate: '2024-10-09',
   workspaceDir: '../../',
@@ -108,7 +114,7 @@ export default defineNuxtConfig({
     ssg: {
       hashScripts: true
     },
-    headers: NuxtSecurityConfig.getHeaderConfig(),
+    headers: NuxtSecurityConfig.getHeadersConfig(),
     rateLimiter: NuxtSecurityConfig.getRateLimiterConfig()
   },
   sentry: NuxtSentryConfig.getConfig(),
@@ -130,6 +136,7 @@ export default defineNuxtConfig({
     disallow:[
       '/questionnaire/',
       '/ajouter-une-aide-entreprises',
+      '/iframe/projet/'
     ],
     credits: false
   },

apps/nuxt/nuxt.security.config.ts

@@ -1,4 +1,4 @@
-import { SecurityHeaders, RateLimiter } from 'nuxt-security'
+import { SecurityHeaders, RateLimiter, ContentSecurityPolicyValue } from 'nuxt-security'
 import { NuxtSentryConfig } from './nuxt.sentry.config'
 import Config from './src/config'
 
@@ -11,45 +11,61 @@ export class NuxtSecurityConfig {
   static _posthogAssetsUrl = 'https://eu-assets.i.posthog.com'
   static _sentryData = NuxtSentryConfig.getSentryData()
 
-  static getHeaderConfig(): SecurityHeaders {
+  static getHeadersConfig(): SecurityHeaders {
     return {
       contentSecurityPolicy: {
-        'form-action': ["'self'"],
-        'script-src-elem': [
-          "'self'",
-          "'unsafe-inline'",
-          "'nonce-{{nonce}}'",
-          this._statsBetaGouvFrUrl,
-          this._posthogUrl,
-          this._posthogAssetsUrl,
-          this._typeformUrl
-        ],
-        'script-src': ["'self'", "'nonce-{{nonce}}'", "'strict-dynamic'", Config.isProduction() ? '' : "'unsafe-eval'"],
-        'worker-src': ["'self'", 'blob:'],
-        'style-src': ["'self'", "'unsafe-inline'", this._typeformUrl],
-        'font-src': ["'self'"],
-        'object-src': ["'self'"],
-        'img-src': ["'self'", 'data:'],
-        'connect-src': [
-          "'self'",
-          this._statsBetaGouvFrUrl,
-          this._typeformUrl,
-          this._typeformApiUrl,
-          this._posthogUrl,
-          this._posthogAssetsUrl,
-          this._sentryData?.domain ? this._sentryData.domain : ''
-        ],
-        'base-uri': ["'self'"],
-        'frame-ancestors': ["'self'"],
-        'frame-src': ["'self'", this._typeformFormUrl],
-        'default-src': ["'none'"]
+        ...this._getDefaultContentSecurityPolicy(),
+        'frame-ancestors': ["'self'"]
       }
       // Missing headers:
       // 'X-Frame-Options': 'ALLOW-FROM https://conseillers-entreprises.service-public.fr',
       // 'Expect-CT': `default-src 'self' ${this._sentryData?.domain ? this._sentryData.domain : ''}; report-uri ${this._sentryData?.url};`
     }
   }
 
+  static getIframePageHeadersConfig(): SecurityHeaders {
+    return {
+      contentSecurityPolicy: {
+        ...this._getDefaultContentSecurityPolicy(),
+        'frame-ancestors': false
+      },
+      xFrameOptions: false
+    }
+  }
+
+  private static _getDefaultContentSecurityPolicy(): ContentSecurityPolicyValue {
+    return {
+      'form-action': ["'self'"],
+      'script-src-elem': [
+        "'self'",
+        "'unsafe-inline'",
+        "'nonce-{{nonce}}'",
+        this._statsBetaGouvFrUrl,
+        this._posthogUrl,
+        this._posthogAssetsUrl,
+        this._typeformUrl
+      ],
+      'script-src': ["'self'", "'nonce-{{nonce}}'", "'strict-dynamic'", Config.isProduction() ? '' : "'unsafe-eval'"],
+      'worker-src': ["'self'", 'blob:'],
+      'style-src': ["'self'", "'unsafe-inline'", this._typeformUrl],
+      'font-src': ["'self'"],
+      'object-src': ["'self'"],
+      'img-src': ["'self'", 'data:'],
+      'connect-src': [
+        "'self'",
+        this._statsBetaGouvFrUrl,
+        this._typeformUrl,
+        this._typeformApiUrl,
+        this._posthogUrl,
+        this._posthogAssetsUrl,
+        this._sentryData?.domain ? this._sentryData.domain : ''
+      ],
+      'base-uri': ["'self'"],
+      'frame-src': ["'self'", this._typeformFormUrl],
+      'default-src': ["'none'"]
+    }
+  }
+
   static getRateLimiterConfig(): RateLimiter | undefined | false {
     return Config.isProduction() ? undefined : false
   }

apps/nuxt/project.json

@@ -50,6 +50,15 @@
       "options": {
         "cwd": "apps/nuxt"
       }
+    },
+    "generate-iframe-script": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "apps/nuxt",
+        "commands": [
+          "npx esbuild --bundle ./scripts/iframe.ts --outfile=./src/public/scripts/iframe.js --target=node20 --format=cjs --minify"
+        ]
+      }
     }
   }
 }

apps/nuxt/scripts/iframe.ts

@@ -0,0 +1,47 @@
+import iframeResize from '@iframe-resizer/parent'
+
+const script = document.getElementById('transition-ecologique-entreprise') as HTMLScriptElement | null
+
+if (script) {
+  setupIframe(script)
+}
+
+function setupIframe(element: HTMLScriptElement) {
+  const url = new URL(element.src).origin
+  const type = element.dataset.type || ''
+  const id = element.dataset.id || ''
+  const src = `${url}/iframe/${type}/${id}`
+
+  const iframe = document.createElement('iframe')
+
+  document.head.insertAdjacentHTML(
+    'beforeend',
+    `<style>
+      #iframe-tee {
+        border: none;
+        display: block;
+        margin: 0 auto;
+        width: 100%;
+      }
+    </style>`
+  )
+
+  const iframeAttributes = {
+    src,
+    style: 'border: none; width: 100%; display: block; margin: 0 auto;',
+    allow: 'fullscreen',
+    id: 'iframe-tee'
+  }
+
+  for (const key in iframeAttributes) {
+    iframe.setAttribute(key, iframeAttributes[key as keyof typeof iframeAttributes] as string)
+  }
+
+  if (element.parentNode) {
+    element.parentNode.insertBefore(iframe, element)
+  }
+
+  iframe.onload = () => {
+    iframeResize({ license: 'GPLv3', checkOrigin: false }, iframe)
+  }
+}

apps/nuxt/src/app.vue

@@ -1,37 +1,7 @@
-<script setup lang="ts">
-import { MetaSeo } from '@/tools/metaSeo'
-import { useNavigationStore } from './stores/navigation'
-import TeeFooter from './components/TeeFooter.vue'
-import Translation from '@/tools/translation'
-import Cookie from '@/tools/cookies'
-
-const navigationStore = useNavigationStore()
-const router = useRouter()
-const route = useRoute()
-
-onBeforeMount(() => {
-  Translation.setLocale('fr')
-  Cookie.setCookies()
-})
-
-// cf: https://stackoverflow.com/questions/69495211/vue3-route-query-empty
-navigationStore.setRouter(router)
-navigationStore.setRoute(route)
-
-useSeoMeta(MetaSeo.default())
-</script>
+<script setup lang="ts"></script>
 
 <template>
-  <div>
-    <TeeHeader />
+  <NuxtLayout>
     <NuxtPage />
-    <div class="fr-mt-0v">
-      <TeeFooter />
-    </div>
-    <ClientOnly>
-      <TeeDsfrConsent />
-      <TeeDsfrPersonalizeConsent />
-      <TeeRegisterModal v-if="navigationStore.hasRegisterModal" />
-    </ClientOnly>
-  </div>
+  </NuxtLayout>
 </template>

apps/nuxt/src/assets/scss/card.scss

@@ -105,8 +105,12 @@
     }
   }
 
-  &__title a::after {
-    display: none !important;
+  &:not(.fr-card--icon-link) {
+    .fr-card__title {
+      a::after {
+        display: none !important;
+      }
+    }
   }
 
   &__header--priority {
@@ -132,16 +136,18 @@
 
   @each $color, $properties in setting.$colors {
     &--#{$color} {
-      @if meta.type-of($properties) == map {
-        background-color: map.get($properties, "color") !important;
-        color: map.get($properties, "color-with-background") !important;
-      }
-
-      .fr-card__title {
+      @if $color != "grey" {
         @if meta.type-of($properties) == map {
+          background-color: map.get($properties, "color") !important;
           color: map.get($properties, "color-with-background") !important;
-        } @else {
-          color: setting.$text-grey;
+        }
+
+        .fr-card__title {
+          @if meta.type-of($properties) == map {
+            color: map.get($properties, "color-with-background") !important;
+          } @else {
+            color: setting.$text-grey;
+          }
         }
       }
     }

apps/nuxt/src/layouts/default.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { useNavigationStore } from '@/stores/navigation'
+import TeeFooter from '@/components/TeeFooter.vue'
+import { MetaSeo } from '@/tools/metaSeo'
+import Translation from '@/tools/translation'
+import Cookie from '@/tools/cookies'
+
+const navigationStore = useNavigationStore()
+const router = useRouter()
+const route = useRoute()
+
+onBeforeMount(() => {
+  Translation.setLocale('fr')
+  Cookie.setCookies()
+})
+
+// cf: https://stackoverflow.com/questions/69495211/vue3-route-query-empty
+navigationStore.setRouter(router)
+navigationStore.setRoute(route)
+
+useSeoMeta(MetaSeo.default())
+</script>
+
+<template>
+  <div>
+    <ClientOnly>
+      <TeeDsfrConsent />
+      <TeeDsfrPersonalizeConsent />
+      <TeeRegisterModal v-if="navigationStore.hasRegisterModal" />
+    </ClientOnly>
+    <TeeHeader />
+
+    <slot />
+
+    <div class="fr-mt-0v">
+      <TeeFooter />
+    </div>
+  </div>
+</template>

apps/nuxt/src/layouts/iframe.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>
+    <slot />
+  </div>
+</template>

apps/nuxt/src/pages/iframe/demo/index.client.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <Script
+      id="transition-ecologique-entreprise"
+      :src="Iframe.getScript()"
+      data-type="projet"
+      data-id="diag-360"
+    ></Script>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Iframe } from '@/tools/iframe/iframe'
+
+definePageMeta({
+  layout: 'iframe'
+})
+</script>