Warnings for dangerous files

ts/components/conversation/Message.md

@@ -1922,6 +1922,48 @@ Voice notes are not shown any differently from audio attachments.
 </util.ConversationContext>
 ```
 
+#### Dangerous file type
+
+```jsx
+<util.ConversationContext theme={util.theme}>
+  <li>
+    <Message
+      conversationColor="green"
+      direction="incoming"
+      i18n={util.i18n}
+      timestamp={Date.now()}
+      attachment={{
+        url: util.txtObjectUrl,
+        contentType: 'text/plain',
+        fileName: 'blah.exe',
+        fileSize: '3.05 KB',
+      }}
+      onClickAttachment={isDangerous =>
+        console.log('onClickAttachment - isDangerous:', isDangerous)
+      }
+    />
+  </li>
+  <li>
+    <Message
+      conversationColor="green"
+      direction="outgoing"
+      i18n={util.i18n}
+      timestamp={Date.now()}
+      status="sent"
+      attachment={{
+        url: util.txtObjectUrl,
+        contentType: 'text/plain',
+        fileName: 'blah.exe',
+        fileSize: '3.05 KB',
+      }}
+      onClickAttachment={isDangerous =>
+        console.log('onClickAttachment - isDangerous:', isDangerous)
+      }
+    />
+  </li>
+</util.ConversationContext>
+```
+
 ### In a group conversation
 
 Note that the author avatar goes away if `collapseMetadata` is set.

ts/components/conversation/Message.tsx

@@ -14,6 +14,7 @@ import { ContactName } from './ContactName';
 import { Quote, QuotedAttachment } from './Quote';
 import { EmbeddedContact } from './EmbeddedContact';
 
+import { isFileDangerous } from '../../util/isFileDangerous';
 import { Contact } from '../../types/Contact';
 import { Color, Localizer } from '../../types/Util';
 import { ContextMenu, ContextMenuTrigger, MenuItem } from 'react-contextmenu';
@@ -87,7 +88,7 @@ export interface Props {
   onClickAttachment?: () => void;
   onReply?: () => void;
   onRetrySend?: () => void;
-  onDownload?: () => void;
+  onDownload?: (isDangerous: boolean) => void;
   onDelete?: () => void;
   onShowDetail: () => void;
 }
@@ -363,7 +364,7 @@ export class Message extends React.Component<Props, State> {
     );
   }
 
-  // tslint:disable-next-line max-func-body-length cyclomatic-complexity
+  // tslint:disable-next-line max-func-body-length cyclomatic-complexity jsx-no-lambda react-this-binding-issue
   public renderAttachment() {
     const {
       i18n,
@@ -503,6 +504,7 @@ export class Message extends React.Component<Props, State> {
     } else {
       const { fileName, fileSize, contentType } = attachment;
       const extension = getExtension({ contentType, fileName });
+      const isDangerous = isFileDangerous(fileName);
 
       return (
         <div
@@ -516,10 +518,17 @@ export class Message extends React.Component<Props, State> {
               : null
           )}
         >
-          <div className="module-message__generic-attachment__icon">
-            {extension ? (
-              <div className="module-message__generic-attachment__icon__extension">
-                {extension}
+          <div className="module-message__generic-attachment__icon-container">
+            <div className="module-message__generic-attachment__icon">
+              {extension ? (
+                <div className="module-message__generic-attachment__icon__extension">
+                  {extension}
+                </div>
+              ) : null}
+            </div>
+            {isDangerous ? (
+              <div className="module-message__generic-attachment__icon-dangerous-container">
+                <div className="module-message__generic-attachment__icon-dangerous" />
               </div>
             ) : null}
           </div>
@@ -734,9 +743,16 @@ export class Message extends React.Component<Props, State> {
       return null;
     }
 
+    const fileName = attachment && attachment.fileName;
+    const isDangerous = isFileDangerous(fileName || '');
+
     const downloadButton = attachment ? (
       <div
-        onClick={onDownload}
+        onClick={() => {
+          if (onDownload) {
+            onDownload(isDangerous);
+          }
+        }}
         role="button"
         className={classNames(
           'module-message__buttons__download',

ts/util/index.ts

@@ -1,6 +1,13 @@
 import * as GoogleChrome from './GoogleChrome';
 import { arrayBufferToObjectURL } from './arrayBufferToObjectURL';
+import { isFileDangerous } from './isFileDangerous';
 import { missingCaseError } from './missingCaseError';
 import { migrateColor } from './migrateColor';
 
-export { arrayBufferToObjectURL, GoogleChrome, missingCaseError, migrateColor };
+export {
+  arrayBufferToObjectURL,
+  GoogleChrome,
+  isFileDangerous,
+  migrateColor,
+  missingCaseError,
+};

ts/util/isFileDangerous.ts

@@ -0,0 +1,6 @@
+// tslint:disable-next-line max-line-length
+const DANGEROUS_FILE_TYPES = /\.(ADE|ADP|APK|BAT|CHM|CMD|COM|CPL|DLL|DMG|EXE|HTA|INS|ISP|JAR|JS|JSE|LIB|LNK|MDE|MSC|MSI|MSP|MST|NSH|PIF|SCR|SCT|SHB|SYS|VB|VBE|VBS|VXD|WSC|WSF|WSH|CAB)$/i;
+
+export function isFileDangerous(fileName: string): boolean {
+  return DANGEROUS_FILE_TYPES.test(fileName);
+}