Add CSP 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/image-component/default/pages/xss-svg.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/image-component/default/public/xss.svg

@@ -229,6 +229,28 @@ function runTests(mode) {
     }
   })
 
+  it('should not execute scripts inside svg image', async () => {
+    let browser
+    try {
+      browser = await webdriver(appPort, '/xss-svg')
+      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(
+        appPort,
+        '/_next/image?url=%2Fxss.svg&w=256&q=75'
+      )
+      expect(await browser.elementById('msg').text()).toBe('safe')
+    } finally {
+      if (browser) {
+        await browser.close()
+      }
+    }
+  })
+
   it('should work when using flexbox', async () => {
     let browser
     try {