Add CSP to Image Optimization API (#28620)

Add CSP header to Image Optimization API

Author: styfle

packages/next/server/image-optimizer.ts

@@ -525,6 +525,8 @@ function setResponseHeaders(
     res.setHeader('Content-Disposition', `inline; filename="${fileName}"`)
   }
 
+  res.setHeader('Content-Security-Policy', `script-src 'none'; sandbox;`)
+
   return { finished: false }
 }
 

test/integration/production/pages/svg-image.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import Image from 'next/image'
+
+const Page = () => {
+  return (
+    <div>
+      <h1>SVG with a script tag attempting XSS</h1>
+      <Image id="img" src="/xss.svg" width="100" height="100" />
+      <p id="msg">safe</p>
+    </div>
+  )
+}
+
+export default Page

test/integration/production/public/xss.svg

@@ -78,7 +78,7 @@ describe('Production Usage', () => {
   })
 
   it('should contain generated page count in output', async () => {
-    const pageCount = process.env.NEXT_PRIVATE_TEST_WEBPACK4_MODE ? 37 : 38
+    const pageCount = process.env.NEXT_PRIVATE_TEST_WEBPACK4_MODE ? 38 : 39
     expect(output).toContain(`Generating static pages (0/${pageCount})`)
     expect(output).toContain(
       `Generating static pages (${pageCount}/${pageCount})`

test/integration/production/test/index.test.js

@@ -342,5 +342,24 @@ module.exports = (context) => {
       expect(pathname).toBe('/%2fexample.com')
       expect(hostname).not.toBe('example.com')
     })
+
+    it('should not execute script embedded inside svg image', async () => {
+      let browser
+      try {
+        browser = await webdriver(context.appPort, '/svg-image')
+        await browser.eval(`document.getElementById("img").scrollIntoView()`)
+        expect(await browser.elementById('img').getAttribute('src')).toContain(
+          'xss.svg'
+        )
+        expect(await browser.elementById('msg').text()).toBe('safe')
+        browser = await webdriver(
+          context.appPort,
+          '/_next/image?url=%2Fxss.svg&w=256&q=75'
+        )
+        expect(await browser.elementById('msg').text()).toBe('safe')
+      } finally {
+        if (browser) await browser.close()
+      }
+    })
   })
 }