Merge pull request #997 from serlo/pixabycdn

Fix images from Pixabays's CDN

__tests__/asset-proxy.ts

@@ -1,4 +1,4 @@
-import { bypass, http } from 'msw'
+import { http } from 'msw'
 
 import {
   currentTestEnvironment,
@@ -21,11 +21,20 @@ beforeEach(() => {
         headers: { 'content-type': 'application/json' },
       })
     }),
-    // it would be better to internally fake the response, but for some reason msw does not handle Content-Encoding header correctly
     http.get(
       'https://upload.wikimedia.org/wikipedia/commons/8/8b/Sinus_mit_y.svg',
-      async ({ request }) => {
-        return await fetch(bypass(new Request(request.url, request)))
+      () => {
+        return new Response('', {
+          headers: { 'content-type': 'image/svg+xml' },
+        })
+      },
+    ),
+    http.get(
+      'https://cdn.pixabay.com/photo/2018/06/27/16/56/minimal-3502044_1280.jpg',
+      () => {
+        return new Response('', {
+          headers: { 'content-type': 'binary/octet-stream' },
+        })
       },
     ),
   )
@@ -67,6 +76,28 @@ test('request to asset-proxy works also in case of other encodings', async () =>
   )
 })
 
+test('request to asset-proxy works for pixabays CDN even if its response content-type is not image ', async () => {
+  const env = currentTestEnvironment()
+  const response = await env.fetch(
+    {
+      subdomain: 'asset-proxy',
+      pathname:
+        '/image?url=https://cdn.pixabay.com/photo/2018/06/27/16/56/minimal-3502044_1280.jpg',
+    },
+    {
+      headers: {
+        'Accept-Encoding': '*',
+      },
+    },
+  )
+  expect(response.status).toBe(200)
+  expect(response.headers.get('content-type')).toBe('binary/octet-stream')
+  expect(response.headers.get('Set-Cookie')).toBeNull()
+  expect(response.headers.get('cache-control')).toBe(
+    'public, max-age=31536000, immutable',
+  )
+})
+
 describe('returns placeholder', () => {
   test('when url parameter is empty', async () => {
     const response = await requestAsset('')

src/asset-proxy.ts

@@ -25,7 +25,10 @@ export async function assetProxy(request: Request): Promise<Response | null> {
     },
   )
 
-  if (originalResponse.ok && isImageResponse(originalResponse)) {
+  if (
+    originalResponse.ok &&
+    (isImageResponse(originalResponse) || isFromPixabayCdn(originalResponse))
+  ) {
     const response = new Response(originalResponse.body, originalResponse)
     response.headers.delete('set-cookie')
     response.headers.set('cache-control', 'public, max-age=31536000, immutable')
@@ -34,3 +37,14 @@ export async function assetProxy(request: Request): Promise<Response | null> {
 
   return getPlaceholder()
 }
+
+function isFromPixabayCdn(response: Response) {
+  const url = new Url(response.url)
+  const contentType = response.headers.get('content-type')
+
+  return (
+    response.status === 200 &&
+    `${url.subdomain}.${url.domain}` === 'cdn.pixabay.com' &&
+    contentType === 'binary/octet-stream'
+  )
+}