add csp for image load from blob so attachments are loaded correctly

2020-10-19 09:35:16 +11:00 · 2020-10-19 09:35:16 +11:00 · ddf41de3fb
parent b1cac5f01b
commit ddf41de3fb
10 changed files with 18 additions and 148 deletions
--- a/about.html
+++ b/about.html
@ -7,7 +7,7 @@
            font-src 'self';
            form-action 'self';
            frame-src 'none';
-            img-src 'self';
+            img-src 'self' blob: data:;
            media-src 'self' blob:;
            object-src 'none';
            script-src 'self';
--- a/background.html
+++ b/background.html
@ -13,7 +13,7 @@
            font-src 'self';
            form-action 'self';
            frame-src 'none';
-            img-src 'self';
+            img-src 'self' blob: data:;
            media-src 'self' blob:;
            object-src 'none';
            script-src 'self';
@ -56,11 +56,7 @@
    <div class='lightbox-container'></div>
  </script>

-  <script type='text/x-tmpl-mustache' id='scroll-down-button-view'>
-    <button class='text module-scroll-down__button {{ buttonClass }}' alt='{{ moreBelow }}'>
-      <div class='module-scroll-down__icon'></div>
-    </button>
-  </script>
+

  <script type='text/x-tmpl-mustache' id='last-seen-indicator-view'>
    <div class='module-last-seen-indicator__bar'/>
--- a/background_test.html
+++ b/background_test.html
@ -13,7 +13,7 @@
            font-src 'self';
            form-action 'self';
            frame-src 'none';
-            img-src 'self';
+            img-src 'self' blob: data:;
            media-src 'self' blob:;
            object-src 'none';
            script-src 'self' 'unsafe-eval';
@ -55,11 +55,6 @@
    <div class='lightbox-container'></div>
  </script>

-  <script type='text/x-tmpl-mustache' id='scroll-down-button-view'>
-    <button class='text module-scroll-down__button {{ buttonClass }}' alt='{{ moreBelow }}'>
-      <div class='module-scroll-down__icon'></div>
-    </button>
-  </script>

  <script type='text/x-tmpl-mustache' id='last-seen-indicator-view'>
    <div class='module-last-seen-indicator__bar'/>
--- a/debug_log.html
+++ b/debug_log.html
@ -7,7 +7,7 @@
            font-src 'self';
            form-action 'self';
            frame-src 'none';
-            img-src 'self';
+            img-src 'self' blob: data:;
            media-src 'self' blob:;
            object-src 'none';
            script-src 'self';
--- a/js/views/inbox_view.js
+++ b/js/views/inbox_view.js
@ -81,10 +81,6 @@
  Whisper.AppLoadingScreen = Whisper.View.extend({
    templateName: 'app-loading-screen',
    className: 'app-loading-screen',
-    updateProgress() {},
-    render_attributes: {
-      message: i18n('loading'),
-    },
  });

  Whisper.InboxView = Whisper.View.extend({
@ -140,13 +136,6 @@
      // FIXME: Fix this for new react views
      this.setupLeftPane();
    },
-    render_attributes: {
-      welcomeToSession: i18n('welcomeToSession'),
-    },
-    events: {
-      click: 'onClick',
-      'click .section-toggle': 'toggleSection',
-    },
    async setupLeftPane() {
      // Here we set up a full redux store with initial state for our LeftPane Root
      const convoCollection = getConversations();
@ -339,37 +328,10 @@
        view.remove();
      }
    },
-    onProgress(count) {
-      const view = this.appLoadingScreen;
-      if (view) {
-        view.updateProgress(count);
-      }
-    },
-    focusConversation(e) {
-      if (e && this.$(e.target).closest('.placeholder').length) {
-        return;
-      }
-
-      this.$('#header, .gutter').addClass('inactive');
-      this.$('.conversation-stack').removeClass('inactive');
-    },
-    focusHeader() {
-      this.$('.conversation-stack').addClass('inactive');
-      this.$('#header, .gutter').removeClass('inactive');
-      this.$('.conversation:first .menu').trigger('close');
-    },
+    onProgress() {},
    reloadBackgroundPage() {
      window.location.reload();
    },
-    toggleSection(e) {
-      // Expand or collapse this panel
-      const $target = this.$(e.currentTarget);
-      const $next = $target.next();
-
-      // Toggle section visibility
-      $next.slideToggle('fast');
-      $target.toggleClass('section-toggle-visible');
-    },
    async openConversation(id, messageId) {
      // If we call this to create a new conversation, it can only be private
      // (group conversations are created elsewhere)
@ -387,7 +349,6 @@
      }

      this.conversation_stack.open(conversation);
-      // this.focusConversation();
    },
    closeConversation(conversation) {
      if (conversation) {
@ -395,22 +356,6 @@
        this.conversation_stack.close(conversation);
      }
    },
-    closeRecording(e) {
-      if (e && this.$(e.target).closest('.capture-audio').length > 0) {
-        return;
-      }
-      this.$('.conversation:first .recorder').trigger('close');
-    },
-    onClick(e) {
-      this.closeRecording(e);
-    },
-    showToastMessageInGutter(message) {
-      const toast = new Whisper.MessageToastView({
-        message,
-      });
-      toast.$el.appendTo(this.$('.gutter'));
-      toast.render();
-    },
  });

  Whisper.ExpiredAlertBanner = Whisper.View.extend({
--- a/password.html
+++ b/password.html
@ -7,7 +7,7 @@
            font-src 'self';
            form-action 'self';
            frame-src 'none';
-            img-src 'self';
+            img-src 'self' blob: data:;
            media-src 'self' blob:;
            object-src 'none';
            script-src 'self';
--- a/permissions_popup.html
+++ b/permissions_popup.html
@ -7,7 +7,7 @@
            font-src 'self';
            form-action 'self';
            frame-src 'none';
-            img-src 'self';
+            img-src 'self' blob: data:;
            media-src 'self' blob:;
            object-src 'none';
            script-src 'self';
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@ -1,74 +1,9 @@
-.conversation {
-  background-color: $color-white;
-  height: 100%;
-  position: relative;
-
-  .panel,
-  .panel-wrapper {
-    overflow-y: scroll;
-  }
-
-  .panel {
-    .container {
-      padding-top: 20px;
-      max-width: 750px;
-      margin: 0 auto;
-      padding: 20px;
-    }
-  }
-
-  .main.panel,
-  .panel-wrapper {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    overflow: initial;
-  }
-
-  .conversation-content-left {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    width: 100%;
-  }
-
-  .main.panel {
-    @include themify($themes) {
-      border-top: themed('sessionBorder');
-      border-left: themed('sessionBorder');
-    }
-
-    .discussion-container {
-      flex-grow: 1;
-      position: relative;
-      max-width: 100%;
-      margin: 0;
-
-      .message-list {
-        -webkit-padding-start: 0px;
-        position: absolute;
-        top: 0;
-        height: 100%;
-        width: 100%;
-        margin: 0;
-        padding: 10px 0 0 0;
-        overflow-y: auto;
-        overflow-x: hidden;
-      }
-    }
-  }
-}
-
 .message-detail-wrapper {
  height: calc(100% - 48px);
  width: 100%;
  overflow-y: auto;
 }

-.discussion-container {
-  background-color: $color-white;
-}
-
 .message-container,
 .message-list {
  list-style: none;
--- a/test/index.html
+++ b/test/index.html
@ -43,11 +43,7 @@
    <div class="lightbox-container"></div>
  </script>

-  <script type="text/x-tmpl-mustache" id="scroll-down-button-view">
-    <button class="text module-scroll-down__button {{ buttonClass }}" alt="{{ moreBelow }}">
-      <div class="module-scroll-down__icon"></div>
-    </button>
-  </script>
+

  <script type="text/x-tmpl-mustache" id="last-seen-indicator-view">
    <div class="module-last-seen-indicator__bar"/>
--- a/ts/components/session/conversation/SessionConversation.tsx
+++ b/ts/components/session/conversation/SessionConversation.tsx
@ -125,9 +125,12 @@ export class SessionConversation extends React.Component<Props, State> {
      this.state.conversationKey
    );
    conversationModel.on('change', () => {
-      this.setState({
-        messages: conversationModel.messageCollection.models,
-      });
+      // reload as much messages as we had before the change.
+      void this.getMessages(
+        this.state.messages.length ||
+          Constants.CONVERSATION.DEFAULT_MESSAGE_FETCH_COUNT,
+        2
+      );
    });
  }

@ -155,7 +158,6 @@ export class SessionConversation extends React.Component<Props, State> {
  public render() {
    const {
      conversationKey,
-      doneInitialScroll,
      showRecordingView,
      showOptionsPane,
      quotedMessageProps,
@ -300,12 +302,12 @@ export class SessionConversation extends React.Component<Props, State> {
  ) {
    const { conversationKey, messageFetchTimestamp } = this.state;

-    const timestamp = getTimestamp();
+    const timestamp = Date.now();

    // If we have pulled messages in the last interval, don't bother rescanning
    // This avoids getting messages on every re-render.
    const timeBuffer = timestamp - messageFetchTimestamp;
-    if (timeBuffer < fetchInterval) {
+    if (timeBuffer / 1000 < fetchInterval) {
      return { newTopMessage: undefined, previousTopMessage: undefined };
    }

@ -325,6 +327,7 @@ export class SessionConversation extends React.Component<Props, State> {

    // Set first member of series here.
    const messageModels = messageSet.models.reverse();
+
    const messages = [];
    let previousSender;
    for (let i = 0; i < messageModels.length; i++) {