feat: render crossorigin anonymous for scripts and script/font preloads (#27)

Author: danielroe

src/renderer.ts

@@ -328,8 +328,9 @@ export function renderPreloadLinks (ssrContext: SSRContext, rendererContext: Ren
       const rel = file.type === 'module' ? 'modulepreload' : 'preload'
       const as = file.type ? file.type === 'module' ? ' as="script"' : ` as="${file.type}"` : ''
       const type = file.type === 'font' ? ` type="font/${file.extension}" crossorigin` : ''
+      const crossorigin = file.type === 'font' || file.type === 'module' ? ' crossorigin' : ''
 
-      return `<link rel="${rel}" href="${rendererContext.publicPath}${file.path}"${as}${type}>`
+      return `<link rel="${rel}" href="${rendererContext.publicPath}${file.path}"${as}${type}${crossorigin}>`
     }).join('')
 }
 
@@ -347,7 +348,7 @@ export function renderPrefetchLinks (ssrContext: SSRContext, rendererContext: Re
 export function renderScripts (ssrContext: SSRContext, rendererContext: RendererContext): string {
   const { scripts } = getRequestDependencies(ssrContext, rendererContext)
   return Object.values(scripts).map(({ path, type }) =>
-    `<script${type === 'module' ? ' type="module"' : ''} src="${rendererContext.publicPath}${path}"${type !== 'module' ? ' defer' : ''}></script>`
+    `<script${type === 'module' ? ' type="module"' : ''} src="${rendererContext.publicPath}${path}"${type !== 'module' ? ' defer' : ''} crossorigin></script>`
   ).join('')
 }
 

test/renderer.test.ts

@@ -21,8 +21,8 @@ describe('renderer', () => {
     const { renderScripts } = await getRenderer()
     const result = renderScripts().split('</script>').slice(0, -1).map(s => `${s}</script>`).sort()
     expect(result).to.deep.equal([
-      '<script type="module" src="/entry.mjs"></script>',
-      '<script type="module" src="/index.mjs"></script>'
+      '<script type="module" src="/entry.mjs" crossorigin></script>',
+      '<script type="module" src="/index.mjs" crossorigin></script>'
     ])
   })
   it('renders styles correctly', async () => {
@@ -36,9 +36,9 @@ describe('renderer', () => {
     const result = renderResourceHints().split('>').slice(0, -1).map(s => `${s}>`).sort()
     expect(result).to.deep.equal(
       [
-        '<link rel="modulepreload" href="/entry.mjs" as="script">',
-        '<link rel="modulepreload" href="/index.mjs" as="script">',
-        '<link rel="modulepreload" href="/vendor.mjs" as="script">',
+        '<link rel="modulepreload" href="/entry.mjs" as="script" crossorigin>',
+        '<link rel="modulepreload" href="/index.mjs" as="script" crossorigin>',
+        '<link rel="modulepreload" href="/vendor.mjs" as="script" crossorigin>',
         '<link rel="preload" href="/index.css" as="style">'
       ]
     )
@@ -62,9 +62,9 @@ describe('renderer with legacy manifest', () => {
     const result = renderScripts().split('</script>').slice(0, -1).map(s => `${s}</script>`).sort()
     expect(result).to.deep.equal(
       [
-        '<script src="/_nuxt/app.js" defer></script>',
-        '<script src="/_nuxt/commons/app.js" defer></script>',
-        '<script src="/_nuxt/runtime.js" defer></script>'
+        '<script src="/_nuxt/app.js" defer crossorigin></script>',
+        '<script src="/_nuxt/commons/app.js" defer crossorigin></script>',
+        '<script src="/_nuxt/runtime.js" defer crossorigin></script>'
       ]
     )
   })