Feature/nuxt scripts

examples/nuxt-app/nuxt.config.ts

@@ -47,4 +47,4 @@ export default defineNuxtConfig({
   },
 
   compatibilityDate: '2025-03-20'
-})
+})

packages/nuxt-ripple-analytics/plugins/analytics.ts

@@ -43,7 +43,8 @@ const setupDataLayer = (featureFlags: IRplFeatureFlags) => {
 const setupGTM = (GTM_ID: string) => {
   if (GTM_ID) {
     // Add tracking code to page with loadScript
-    loadScript(GTM_ID, { defer: true, compatibility: false })
+    const nonce = useNonce()
+    loadScript(GTM_ID, { defer: true, compatibility: false, nonce })
   }
 }
 

packages/nuxt-ripple/components/TideBaseLayout.vue

@@ -176,7 +176,21 @@ const footerNav = computed(() => {
 await nuxtApp.callHook('tide:page', props)
 
 const theme = useTideSiteTheme(props.site)
-useTideHideAlerts()
+
+// useScript(
+//   {
+//     src: '/scripts/alerts.js',
+//     async: false,
+//     defer: false,
+//     onLoaded: false,
+//     onError: false,
+//     fetchpriority: 'high'
+//   },
+//   {
+//     trigger: 'server'
+//   }
+// )
+
 useTideSiteMeta(props, nuxtApp?.$app_origin)
 useTideFavicons(props.site, theme)
 </script>

packages/nuxt-ripple/composables/use-tide-favicons.ts

@@ -8,7 +8,7 @@
   const siteUrl = config?.siteUrl || ''
   const themeColour = theme?.['rpl-clr-primary'] ?? '#ffffff'
 
   const manifest = {
     id: siteUrl,
     name: site?.name,
     short_name: site?.shortName || '',
@@ -34,10 +34,10 @@
     })
   }
 
-  link.push({
-    rel: 'manifest',
-    href: `data:application/manifest+json,${encodeURIComponent(JSON.stringify(manifest))}`
-  })
+  // link.push({
+  //   rel: 'manifest',
+  //   href: `data:application/manifest+json,${encodeURIComponent(JSON.stringify(manifest))}`
+  // })
 
   if (site.favicon?.src) {
     link.push({

packages/nuxt-ripple/composables/use-tide-hide-alerts.ts

@@ -40,6 +40,7 @@ try {
     styleSheet.innerText = styles
     document.head.appendChild(styleSheet)
   }
+    console.log('Dismissed alerts')
 } catch (e) {
   console.error(e)
 }`

packages/nuxt-ripple/public/scripts/alerts.js

@@ -0,0 +1,35 @@
+;(function () {
+  console.log('alerts.js loaded')
+  function getCookie(name) {
+    const value = `; ${document.cookie}`
+    const parts = value.split(`; ${name}=`)
+    if (parts.length === 2) return parts.pop().split(';').shift()
+  }
+
+  const DISMISSED_ALERTS_COOKIE = 'dismissedAlerts'
+  const guidRegex = new RegExp(
+    '^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4,5}-[0-9a-f]{4}-[0-9a-f]{12}$'
+  )
+
+  try {
+    const cookieValue = getCookie(DISMISSED_ALERTS_COOKIE)
+
+    if (cookieValue) {
+      const dismissedIds = JSON.parse(decodeURIComponent(cookieValue))
+
+      const styles = dismissedIds.reduce((result, id) => {
+        if (guidRegex.test(id)) {
+          return `${result} [data-alert-id="${id}"] {display: none;}`
+        }
+
+        return result
+      }, '')
+
+      const styleSheet = document.createElement('style')
+      styleSheet.innerText = styles
+      document.head.appendChild(styleSheet)
+    }
+  } catch (e) {
+    console.error(e)
+  }
+})()

packages/ripple-sdp-core/layers/script-loader/nuxt.config.ts

@@ -0,0 +1,40 @@
+import { defineNuxtConfig } from 'nuxt/config'
+
+export default defineNuxtConfig({
+  modules: ['nuxt-security', '@nuxt/scripts'],
+  scripts: {
+    debug: true
+  },
+  security: {
+    rateLimiter: false,
+    strict: true, // Enables strict mode for security headers
+    nonce: true, // Enables HTML nonce support in SSR mode
+    headers: {
+      crossOriginEmbedderPolicy: 'unsafe-none',
+      crossOriginResourcePolicy: 'same-origin',
+      contentSecurityPolicy: {
+        'worker-src': ["'self'", 'blob:'],
+        'img-src': ["'self'", 'data:', process.env.NUXT_PUBLIC_TIDE_BASE_URL],
+        'style-src': ["'unsafe-inline'", "'self'"],
+        'font-src': [`'self'`, 'data:'],
+        'script-src': ["'nonce-{{nonce}}'", "'strict-dynamic'"],
+        'connect-src': ["'self'", 'https:']
+      }
+    }
+  },
+  routeRules: {
+    '/embed': {
+      security: {
+        headers: {
+          permissionsPolicy: {
+            'picture-in-picture': [],
+            geolocation: []
+          },
+          xFrameOptions: 'SAMEORIGIN',
+          crossOriginEmbedderPolicy: 'unsafe-none',
+          contentSecurityPolicy: false
+        }
+      }
+    }
+  }
+})

packages/ripple-sdp-core/layers/script-loader/pages/embed.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="embed-container">
+    <div class="rpl-iframe">
+      <iframe
+        :src="url"
+        :height="height"
+        :title="oembed?.title"
+        :allow="allow"
+        :allowfullscreen="oembed?.allowfullscreen"
+        frameborder="0"
+        referrerpolicy="strict-origin-when-cross-origin"
+        class="rpl-iframe"
+      ></iframe>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from '#imports'
+import { extract } from '@extractus/oembed-extractor'
+
+function extractSrcFromHtml(html: string): string | null {
+  // Regular expression to find the src attribute in an iframe
+  const iframeSrcRegex = /<iframe[^>]*\s+src="([^"]+)"/
+  const match = html.match(iframeSrcRegex)
+
+  // If a match is found, return the src URL, otherwise return null
+  return match ? match[1] : null
+}
+
+function extractAllowFromHtml(html: string): string | null {
+  // Regular expression to find the allow attribute in an iframe
+  const iframeAllowRegex = /<iframe[^>]*\s+allow="([^"]+)"/
+  const match = html.match(iframeAllowRegex)
+
+  // If a match is found, return the allow URL, otherwise return null
+  return match ? match[1] : null
+}
+
+const route = useRoute()
+const ombedRef = ref(null)
+const width = '100%'
+const height = ref('800')
+const updateHeight = () => {
+  if (window.innerHeight) {
+    height.value = `${window.innerHeight}px`
+  }
+}
+
+const iframeDomain = ref('')
+
+let oembed = null
+try {
+  oembed = await extract(route.query.url, { maxheight: 800 })
+} catch (error) {
+  console.error('Failed to extract oembed:', error)
+}
+
+const allow = oembed && extractAllowFromHtml(oembed.html)
+const iframePlayerSrc = oembed && extractSrcFromHtml(oembed.html)
+
+if (oembed) {
+  ombedRef.value = oembed
+} else {
+  ombedRef.value = {
+    html: '<div class="error-message">Invalid URL or unsupported domain.</div>'
+  }
+}
+
+const ALLOWED_DOMAINS = [
+  'vicgovgraduates.freshdesk.com',
+  'youtube.com',
+  'youtu.be',
+  'vimeo.com',
+  'google.com'
+]
+
+const url = computed(() => {
+  const urlString = iframePlayerSrc || route.query.url
+  if (!urlString) return null
+
+  try {
+    const urlObj = new URL(urlString)
+    iframeDomain.value = urlObj.hostname.replace('www.', '')
+    return ALLOWED_DOMAINS.some((allowed) =>
+      iframeDomain.value.endsWith(allowed)
+    )
+      ? urlString
+      : null
+  } catch {
+    return null
+  }
+})
+
+defineRouteRules({
+  security: {
+    headers: {
+      permissionsPolicy: false
+    }
+  }
+})
+</script>
+
+<style scoped>
+.error-message {
+  padding: 1rem;
+  text-align: center;
+  color: #666;
+}
+</style>

packages/ripple-sdp-core/nuxt.config.ts

@@ -1,7 +1,47 @@
 import { defineNuxtConfig } from 'nuxt/config'
 
 export default defineNuxtConfig({
+  experimental: {
+    inlineRouteRules: true
+  },
+  modules: ['nuxt-security', '@nuxt/scripts'],
+  scripts: {
+    debug: true
+  },
+  security: {
+    rateLimiter: false,
+    strict: true, // Enables strict mode for security headers
+    nonce: true, // Enables HTML nonce support in SSR mode
+    headers: {
+      crossOriginEmbedderPolicy: 'unsafe-none',
+      crossOriginResourcePolicy: 'same-origin',
+      contentSecurityPolicy: {
+        'worker-src': ["'self'", 'blob:'],
+        'img-src': ["'self'", 'data:', process.env.NUXT_PUBLIC_TIDE_BASE_URL],
+        'style-src': ["'unsafe-inline'", "'self'"],
+        'font-src': [`'self'`, 'data:'],
+        'script-src': ["'nonce-{{nonce}}'", "'strict-dynamic'"],
+        'connect-src': ["'self'", 'https:']
+      }
+    }
+  },
+  routeRules: {
+    '/embed': {
+      security: {
+        headers: {
+          permissionsPolicy: {
+            'picture-in-picture': [],
+            geolocation: []
+          },
+          xFrameOptions: 'SAMEORIGIN',
+          crossOriginEmbedderPolicy: 'unsafe-none',
+          contentSecurityPolicy: false
+        }
+      }
+    }
+  },
   extends: [
+    './layers/script-loader',
     '@dpc-sdp/ripple-tide-event',
     '@dpc-sdp/ripple-tide-topic',
     '@dpc-sdp/ripple-tide-landing-page',

packages/ripple-sdp-core/package.json

@@ -17,6 +17,9 @@
     "@dpc-sdp/ripple-tide-publication": "workspace:*",
     "@dpc-sdp/ripple-tide-search": "workspace:*",
     "@dpc-sdp/ripple-tide-topic": "workspace:*",
-    "@dpc-sdp/ripple-tide-webform": "workspace:*"
+    "@dpc-sdp/ripple-tide-webform": "workspace:*",
+    "@extractus/oembed-extractor": "^4.0.6",
+    "@nuxt/scripts": "^0.11.5",
+    "nuxt-security": "^2.2.0"
   }
 }

packages/ripple-tide-api/src/utils/markup-transpiler/default-plugins.ts

@@ -173,7 +173,7 @@ const pluginEmbededVideo = function (this: any) {
       const iframe = $video.find('iframe')
       const height = iframe.attr('height')
       const width = iframe.attr('width')
-      const source = iframe.attr('src')
+      const source = `/embed?url=${iframe.attr('src')}`
       const title = $video.attr('title') || ''
       const caption = $video.find('figcaption')?.text()
       const link = $video.find('.field--name-field-media-link a')?.attr('href')
@@ -309,6 +309,10 @@ const pluginIFrames = function (this: any) {
     const $iframe = this.find(el)
     const wrapperClasses = ['rpl-iframe']
 
+    if (!$iframe.attr('src').startsWith('/embed?url')) {
+      $iframe.attr('src', `/embed?url=${$iframe.attr('src')}`)
+    }
+
     // If no height setting from CMS, we give it a default height
     if (!$iframe.attr('height')) {
       wrapperClasses.push('rpl-iframe--default')

packages/ripple-tide-landing-page/components/global/TideLandingPage/EmbeddedContent.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="rpl-iframe">
+    <iframe
+      :src="`/embed?url=${embedUrl}`"
+      frameborder="0"
+      class="rpl-iframe__content"
+      width="100%"
+      height="600"
+      allowfullscreen
+    ></iframe>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  embedUrl: string
+}
+
+withDefaults(defineProps<Props>(), {})
+</script>
+
+<style></style>