Merge pull request #4858 from Countly/Ratings-XSS

[SER-1082] XSS changes for ratings

Author: kanwarujjaval

plugins/star-rating/frontend/public/javascripts/countly.views.js

@@ -15,12 +15,12 @@
     }
 
     var Drawer = countlyVue.views.create({
+        mixins: [countlyVue.mixins.commonFormatters],
         template: CV.T("/star-rating/templates/drawer.html"),
         props: {
             settings: Object,
             controls: Object
         },
-        mixins: [],
         data: function() {
             return {
                 imageSource: '',
@@ -182,6 +182,7 @@
 
     // these table components should be 3 different components
     var CommentsTable = countlyVue.views.create({
+        mixins: [countlyVue.mixins.commonFormatters],
         template: CV.T("/star-rating/templates/comments-table.html"),
         props: {
             comments: Array,
@@ -284,7 +285,8 @@
     var WidgetsTable = countlyVue.views.create({
         template: CV.T("/star-rating/templates/widgets-table.html"),
         mixins: [
-            countlyVue.mixins.auth(FEATURE_NAME)
+            countlyVue.mixins.auth(FEATURE_NAME),
+            countlyVue.mixins.commonFormatters
         ],
         props: {
             rows: {
@@ -821,7 +823,8 @@
         },
         mixins: [
             countlyVue.mixins.hasDrawers("widget"),
-            countlyVue.mixins.auth(FEATURE_NAME)
+            countlyVue.mixins.auth(FEATURE_NAME),
+            countlyVue.mixins.commonFormatters
         ],
         data: function() {
             return {
@@ -1083,7 +1086,7 @@
                 starRatingPlugin.requestSingleWidget(this.$route.params.id, function(widget) {
                     self.widget = widget;
                     self.widget.popup_header_text = replaceEscapes(self.widget.popup_header_text);
-                    self.widget.created_at = countlyCommon.formatTimeAgo(self.widget.created_at);
+                    self.widget.created_at = countlyCommon.formatTimeAgoText(self.widget.created_at).text;
                     if (self.cohortsEnabled) {
                         self.widget = self.parseTargeting(widget);
                     }
@@ -1177,6 +1180,7 @@
     });
 
     var UserFeedbackRatingsTable = countlyVue.views.create({
+        mixins: [countlyVue.mixins.commonFormatters],
         template: CV.T('/star-rating/templates/users-feedback-ratings-table.html'),
         props: {
             ratings: {

plugins/star-rating/frontend/public/templates/comments-table.html

@@ -18,7 +18,7 @@
       </el-table-column>
       <el-table-column sortable="true" prop="cd" :label="i18n('feedback.time')" min-width="120">
         <template v-slot="rowScope">
-            <span class="text-medium" :data-test-id="'ratings-comment-table-time-row-' + rowScope.$index" v-html="rowScope.row.cd"></span>
+            <span class="text-medium" :data-test-id="'ratings-comment-table-time-row-' + rowScope.$index">{{unescapeHtml(rowScope.row.cd)}}</span>
         </template>
       </el-table-column>
       <el-table-column prop="email" :label="i18n('feedback.email')" min-width="200">

plugins/star-rating/frontend/public/templates/drawer.html

@@ -22,7 +22,7 @@
 						</div>
 						<div class="ratings-drawer__ratings-popup">
               <div class="ratings-drawer__rp-question-area" data-test-id="ratings-drawer-ratingspopup-question">
-                {{ drawerScope.editedObject.popup_header_text }}
+                {{ unescapeHtml(drawerScope.editedObject.popup_header_text) }}
               </div>
               <div v-if="drawerScope.editedObject.ratings_texts">
                 <div class="ratings-drawer__rp-ratings-area" v-if="drawerScope.editedObject.rating_symbol==='emojis'">

plugins/star-rating/frontend/public/templates/users-feedback-ratings-table.html

@@ -16,7 +16,7 @@
         </el-table-column>
         <el-table-column prop="time" column-key="ts" :label="i18n('feedback.time')">
           <template v-slot="rowScope">
-              <span v-html="rowScope.row.ts" class="text-medium"></span>
+            <span class="text-medium">{{unescapeHtml(rowScope.row.ts)}}</span>
           </template>
         </el-table-column>
     </cly-datatable-n>

plugins/star-rating/frontend/public/templates/widget-detail.html

@@ -7,7 +7,7 @@
           <span data-test-id="ratings-detail-back-link-label">{{ i18n('feedback.back-to-rating-widgets') }}</span>
         </div>
         <div class="ratings-widget-detail-view__widget-name">
-          <h3 v-html="widget.popup_header_text" class="ratings-widget-detail-view__widget-name" data-test-id="ratings-detail-widget-name-label"></h3>
+          <h3 class="ratings-widget-detail-view__widget-name" data-test-id="ratings-detail-widget-name-label">{{unescapeHtml(widget.popup_header_text)}}</h3>
         </div>
         <div class="ratings-widget-detail-view__widget-informations bu-mt-4">
           <div :class="[widget.status && 'ratings-widget-detail-view__widget-status-active', !widget.status && 'ratings-widget-detail-view__widget-status-disabled', 'bu-has-text-weight-semibold text-small bu-mt-1']">
@@ -16,7 +16,7 @@ <h3 v-html="widget.popup_header_text" class="ratings-widget-detail-view__widget-
           </div>
           <div class="ratings-widget-detail-view__created-at text-medium bu-p-1 bu-ml-2"> <i class="ion-android-time" data-test-id="ratings-detail-created-at-icon"></i> 
             <span data-test-id="ratings-detail-created-at-label">{{ i18n('feedback.created-at') }}</span>
-            <span data-test-id="ratings-detail-created-at-value" v-html="widget.created_at"></span></div>
+            <span data-test-id="ratings-detail-created-at-value">{{unescapeHtml(widget.created_at)}}</span></div>
           <div class="ratings-widget-detail-view__widget-id text-medium bu-p-1 bu-ml-2">
             <i data-test-id="ratings-detail-price-tag-icon" class="ion-pricetag"></i>
             <span data-test-id="ratings-detail-widget-id-label" class="ratings-widget-detail-view__widget-id">{{ i18n('feedback.widget-id') }} </span>

plugins/star-rating/frontend/public/templates/widgets-table.html

@@ -22,7 +22,7 @@
             <template v-slot="rowScope">
               <div>
                 <div @click="goWidgetDetail(rowScope.row._id)" :data-test-id="'ratings-widgets-data-table-widget-name-' + rowScope.$index" :class="[rowScope.row.hover && 'bu-is-underlined bu-is-clickable color-primary', 'color-dark-blue-100 text-medium']">
-                  {{rowScope.row.popup_header_text}}
+                  {{unescapeHtml(rowScope.row.popup_header_text)}}
                 </div>
                 <div>
                   <span :data-test-id="'ratings-widgets-data-table-widget-id-label-' + rowScope.$index" class="color-cool-gray-40 text-small bu-has-text-weight-semibold"> {{ i18n('feedback.widget-id') }} </span>