Merge pull request #4148 from withspectrum/image-signing

Image signing

Author: brianlovin

api/apollo-server.js

@@ -61,6 +61,20 @@ const server = new ProtectedApolloServer({
           req.login(data, err => (err ? rej(err) : res()))
         ),
       user: currentUser,
+      getImageSignatureExpiration: () => {
+        /*
+          Expire images sent to the client at midnight each day (UTC).
+          Expiration needs to be consistent across all images in order
+          to preserve client-side caching abilities and to prevent checksum
+          mismatches during SSR
+        */
+        const date = new Date();
+        date.setHours(24);
+        date.setMinutes(0);
+        date.setSeconds(0);
+        date.setMilliseconds(0);
+        return date.getTime();
+      },
     };
   },
   subscriptions: {

api/index.js

@@ -26,6 +26,7 @@ import type { Loader } from './loaders/types';
 export type GraphQLContext = {
   user: DBUser,
   updateCookieUserData: (data: DBUser) => Promise<void>,
+  getImageSignatureExpiration: () => number,
   loaders: {
     [key: string]: Loader,
   },

api/queries/community/coverPhoto.js

@@ -0,0 +1,12 @@
+// @flow
+import type { GraphQLContext } from '../../';
+import type { DBCommunity } from 'shared/types';
+import { signImageUrl } from 'shared/imgix';
+
+export default ({ coverPhoto }: DBCommunity, _: any, ctx: GraphQLContext) => {
+  return signImageUrl(coverPhoto, {
+    w: 1280,
+    h: 384,
+    expires: ctx.getImageSignatureExpiration(),
+  });
+};

api/queries/community/index.js

@@ -24,6 +24,8 @@ import watercooler from './watercooler';
 import brandedLogin from './brandedLogin';
 import slackSettings from './slackSettings';
 import joinSettings from './joinSettings';
+import coverPhoto from './coverPhoto';
+import profilePhoto from './profilePhoto';
 
 // no-op resolvers to transition while removing payments
 import type { DBCommunity } from 'shared/types';
@@ -67,6 +69,8 @@ module.exports = {
     brandedLogin,
     slackSettings,
     joinSettings,
+    coverPhoto,
+    profilePhoto,
 
     invoices,
     recurringPayments,

api/queries/community/profilePhoto.js

@@ -0,0 +1,12 @@
+// @flow
+import type { GraphQLContext } from '../../';
+import type { DBUser } from 'shared/types';
+import { signImageUrl } from 'shared/imgix';
+
+export default ({ profilePhoto }: DBUser, _: any, ctx: GraphQLContext) => {
+  return signImageUrl(profilePhoto, {
+    w: 256,
+    h: 256,
+    expires: ctx.getImageSignatureExpiration(),
+  });
+};

api/queries/message/content.js

@@ -0,0 +1,8 @@
+// @flow
+import type { GraphQLContext } from '../../';
+import type { DBMessage } from 'shared/types';
+import body from './content/body';
+
+export default (message: DBMessage, _: any, ctx: GraphQLContext) => ({
+  body: body(message, ctx.getImageSignatureExpiration()),
+});

api/queries/message/content/body.js

@@ -0,0 +1,9 @@
+// @flow
+import type { DBMessage } from 'shared/types';
+import { signImageUrl } from 'shared/imgix';
+
+export default (message: DBMessage, imageSignatureExpiration: number) => {
+  const { content, messageType } = message;
+  if (messageType !== 'media') return content.body;
+  return signImageUrl(content.body, { expires: imageSignatureExpiration });
+};

api/queries/message/index.js

@@ -6,6 +6,7 @@ import author from './author';
 import thread from './thread';
 import reactions from './reactions';
 import parent from './parent';
+import content from './content';
 
 module.exports = {
   Query: {
@@ -18,5 +19,6 @@ module.exports = {
     thread,
     reactions,
     parent,
+    content,
   },
 };

api/queries/thread/content.js

@@ -1,25 +1,11 @@
 // @flow
 import type { GraphQLContext } from '../../';
 import type { DBThread } from 'shared/types';
+import body from './content/body';
 
-export default ({ content }: DBThread, _: any, ctx: GraphQLContext) => {
-  const defaultDraftState = JSON.stringify({
-    blocks: [
-      {
-        key: 'foo',
-        text: '',
-        type: 'unstyled',
-        depth: 0,
-        inlineStyleRanges: [],
-        entityRanges: [],
-        data: {},
-      },
-    ],
-    entityMap: {},
-  });
-
+export default (thread: DBThread, _: any, ctx: GraphQLContext) => {
   return {
-    title: content.title,
-    body: content.body ? content.body : defaultDraftState,
+    title: thread.content.title,
+    body: body(thread, ctx.getImageSignatureExpiration()),
   };
 };

api/queries/thread/content/body.js

@@ -0,0 +1,44 @@
+// @flow
+import type { DBThread } from 'shared/types';
+import { signImageUrl } from 'shared/imgix';
+
+export default (thread: DBThread, imageSignatureExpiration: number) => {
+  const { content } = thread;
+
+  if (!content.body) {
+    return JSON.stringify({
+      blocks: [
+        {
+          key: 'foo',
+          text: '',
+          type: 'unstyled',
+          depth: 0,
+          inlineStyleRanges: [],
+          entityRanges: [],
+          data: {},
+        },
+      ],
+      entityMap: {},
+    });
+  }
+
+  // Replace the local image srcs with the remote image src
+  const body = JSON.parse(content.body);
+
+  const imageKeys = Object.keys(body.entityMap).filter(
+    key => body.entityMap[key].type.toLowerCase() === 'image'
+  );
+
+  imageKeys.forEach((key, index) => {
+    if (!body.entityMap[key[index]]) return;
+
+    const { src } = body.entityMap[imageKeys[index]].data;
+
+    // transform the body inline with signed image urls
+    body.entityMap[imageKeys[index]].data.src = signImageUrl(src, {
+      expires: imageSignatureExpiration,
+    });
+  });
+
+  return JSON.stringify(body);
+};