@gitlab/ui 66.36.1 → 67.0.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [67.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.37.0...v67.0.0) (2023-10-27)
+
+
+### Features
+
+* **SafeHtml:** disallow potentially dangerous tags ([25926ab](https://gitlab.com/gitlab-org/gitlab-ui/commit/25926ab418ffbbbe657a6a1485d01c13368e2a67))
+
+
+### BREAKING CHANGES
+
+* **SafeHtml:** This change improves safe-html defense
+by adding style, mystlye and form tags to the forbidden
+list.
+
+# [66.37.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.36.1...v66.37.0) (2023-10-25)
+
+
+### Features
+
+* **GlDuoChatMessage:** do not strip out copy-code ([14782a5](https://gitlab.com/gitlab-org/gitlab-ui/commit/14782a5d60a8e48dffb60fa120bddc61285d950a))
+
 ## [66.36.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.36.0...v66.36.1) (2023-10-24)
 
 

package/dist/components/base/filtered_search/filtered_search.js

@@ -1,7 +1,6 @@
 import isEqual from 'lodash/isEqual';
 import cloneDeep from 'lodash/cloneDeep';
-import PortalVue from 'portal-vue';
-import Vue from 'vue';
+import { PortalTarget } from 'portal-vue';
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlIcon from '../icon/icon';
 import GlSearchBoxByClick from '../search_box_by_click/search_box_by_click';
@@ -9,7 +8,6 @@ import GlFilteredSearchTerm from './filtered_search_term';
 import { termTokenDefinition, createTerm, needDenormalization, denormalizeTokens, isEmptyTerm, INTENT_ACTIVATE_PREVIOUS, ensureTokenId, normalizeTokens } from './filtered_search_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-Vue.use(PortalVue);
 let portalUuid = 0;
 function initialState() {
   return [createTerm()];
@@ -18,7 +16,8 @@ var script = {
   name: 'GlFilteredSearch',
   components: {
     GlSearchBoxByClick,
-    GlIcon
+    GlIcon,
+    PortalTarget
   },
   directives: {
     GlTooltip: GlTooltipDirective

package/dist/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.js

@@ -14,6 +14,9 @@ const concatIndicesUntilEmpty = arr => {
 };
 var script = {
   name: 'GlDuoChatMessage',
+  safeHtmlConfigExtension: {
+    ADD_TAGS: ['copy-code']
+  },
   components: {
     DocumentationSources,
     GlDuoUserFeedback
@@ -102,7 +105,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
     'gl-ml-auto gl-bg-blue-100 gl-text-blue-900 gl-rounded-bottom-right-none': _vm.isUserMessage,
     'gl-rounded-bottom-left-none gl-text-gray-900 gl-bg-white gl-border-1 gl-border-solid gl-border-gray-50':
       _vm.isAssistantMessage,
-  }},[_c('div',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(_vm.messageContent),expression:"messageContent"}],ref:"content"}),_vm._v(" "),(_vm.isAssistantMessage)?[(_vm.sources)?_c('documentation-sources',{attrs:{"sources":_vm.sources}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-align-items-flex-end gl-mt-4"},[_c('gl-duo-user-feedback',{on:{"feedback":function($event){return _vm.$emit('track-feedback', $event)}}})],1)]:_vm._e()],2)};
+  }},[_c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.messageContent),expression:"messageContent",arg:_vm.$options.safeHtmlConfigExtension}],ref:"content"}),_vm._v(" "),(_vm.isAssistantMessage)?[(_vm.sources)?_c('documentation-sources',{attrs:{"sources":_vm.sources}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-align-items-flex-end gl-mt-4"},[_c('gl-duo-user-feedback',{on:{"feedback":function($event){return _vm.$emit('track-feedback', $event)}}})],1)]:_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/directives/safe_html/constants.js

@@ -1,5 +1,6 @@
 // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1421#note_617098438
 // for more details
 const forbiddenDataAttrs = ['data-remote', 'data-url', 'data-type', 'data-method', 'data-disable-with', 'data-disabled', 'data-disable', 'data-turbo'];
+const forbiddenTags = ['style', 'mstyle', 'form'];
 
-export { forbiddenDataAttrs };
+export { forbiddenDataAttrs, forbiddenTags };

package/dist/directives/safe_html/safe_html.js

@@ -1,5 +1,5 @@
 import DOMPurify from 'dompurify';
-import { forbiddenDataAttrs } from './constants';
+import { forbiddenDataAttrs, forbiddenTags } from './constants';
 
 const {
   sanitize
@@ -13,7 +13,8 @@ const {
 const DEFAULT_CONFIG = {
   RETURN_DOM_FRAGMENT: true,
   ALLOW_UNKNOWN_PROTOCOLS: true,
-  FORBID_ATTR: [...forbiddenDataAttrs]
+  FORBID_ATTR: forbiddenDataAttrs,
+  FORBID_TAGS: forbiddenTags
 };
 const transform = (el, binding) => {
   if (binding.oldValue !== binding.value) {

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 24 Oct 2023 21:07:01 GMT
+ * Generated on Fri, 27 Oct 2023 09:40:39 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 24 Oct 2023 21:07:01 GMT
+ * Generated on Fri, 27 Oct 2023 09:40:39 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 24 Oct 2023 21:07:01 GMT
+ * Generated on Fri, 27 Oct 2023 09:40:39 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 24 Oct 2023 21:07:01 GMT
+ * Generated on Fri, 27 Oct 2023 09:40:39 GMT
  */
 
 export const BLACK = "#000";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 24 Oct 2023 21:07:01 GMT
+// Generated on Fri, 27 Oct 2023 09:40:39 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 24 Oct 2023 21:07:01 GMT
+// Generated on Fri, 27 Oct 2023 09:40:39 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "66.36.1",
+  "version": "67.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/filtered_search/filtered_search.vue

@@ -1,8 +1,7 @@
 <script>
 import isEqual from 'lodash/isEqual';
 import cloneDeep from 'lodash/cloneDeep';
-import PortalVue from 'portal-vue';
-import Vue from 'vue';
+import { PortalTarget } from 'portal-vue';
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlIcon from '../icon/icon.vue';
 import GlSearchBoxByClick from '../search_box_by_click/search_box_by_click.vue';
@@ -18,8 +17,6 @@ import {
   termTokenDefinition,
 } from './filtered_search_utils';
 
-Vue.use(PortalVue);
-
 let portalUuid = 0;
 
 function initialState() {
@@ -31,6 +28,7 @@ export default {
   components: {
     GlSearchBoxByClick,
     GlIcon,
+    PortalTarget,
   },
   directives: { GlTooltip: GlTooltipDirective },
   provide() {

package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.spec.js

@@ -15,6 +15,7 @@ describe('DuoChatMessage', () => {
   const findContent = () => wrapper.findComponent({ ref: 'content' });
   const findDocumentSources = () => wrapper.findComponent(DocumentationSources);
   const findUserFeedback = () => wrapper.findComponent(GlDuoUserFeedback);
+  const findCopyCodeButton = () => wrapper.find('copy-code');
   const mockMarkdownContent = 'foo **bar**';
 
   let renderMarkdown;
@@ -106,6 +107,10 @@ describe('DuoChatMessage', () => {
       findUserFeedback().vm.$emit('feedback', 'foo');
       expect(wrapper.emitted('track-feedback')).toEqual([['foo']]);
     });
+
+    it('does not strip out the <copy-code/> element from HTML output', () => {
+      expect(findCopyCodeButton().exists()).toBe(true);
+    });
   });
 
   describe('message output', () => {

package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.vue

@@ -15,6 +15,9 @@ const concatIndicesUntilEmpty = (arr) => {
 
 export default {
   name: 'GlDuoChatMessage',
+  safeHtmlConfigExtension: {
+    ADD_TAGS: ['copy-code'],
+  },
   components: {
     DocumentationSources,
     GlDuoUserFeedback,
@@ -102,7 +105,7 @@ export default {
         isAssistantMessage,
     }"
   >
-    <div ref="content" v-safe-html="messageContent"></div>
+    <div ref="content" v-safe-html:[$options.safeHtmlConfigExtension]="messageContent"></div>
 
     <template v-if="isAssistantMessage">
       <documentation-sources v-if="sources" :sources="sources" />

package/src/directives/safe_html/constants.js

@@ -10,3 +10,5 @@ export const forbiddenDataAttrs = [
   'data-disable',
   'data-turbo',
 ];
+
+export const forbiddenTags = ['style', 'mstyle', 'form'];

package/src/directives/safe_html/safe_html.js

@@ -1,5 +1,5 @@
 import DOMPurify from 'dompurify';
-import { forbiddenDataAttrs } from './constants';
+import { forbiddenDataAttrs, forbiddenTags } from './constants';
 
 const { sanitize } = DOMPurify;
 
@@ -11,7 +11,8 @@ const { sanitize } = DOMPurify;
 const DEFAULT_CONFIG = {
   RETURN_DOM_FRAGMENT: true,
   ALLOW_UNKNOWN_PROTOCOLS: true,
-  FORBID_ATTR: [...forbiddenDataAttrs],
+  FORBID_ATTR: forbiddenDataAttrs,
+  FORBID_TAGS: forbiddenTags,
 };
 
 const transform = (el, binding) => {

package/src/directives/safe_html/safe_html.spec.js

@@ -49,6 +49,21 @@ describe('safe html directive', () => {
       expect(wrapper.html()).toEqual('<div><a>click here</a></div>');
     });
 
+    it('should remove style tags', () => {
+      createComponent({ html: '<style>p {width:50%;}</style>' });
+      expect(wrapper.html()).toEqual('<div></div>');
+    });
+
+    it('should remove mstyle tags', () => {
+      createComponent({ html: '<math><mstyle displaystyle="true"></mstyle></math>' });
+      expect(wrapper.html()).toEqual('<div><math></math></div>');
+    });
+
+    it('should remove form tags', () => {
+      createComponent({ html: '<form method="post" action="path"></form>' });
+      expect(wrapper.html()).toEqual('<div></div>');
+    });
+
     it('should remove any existing children', () => {
       createComponent({
         template: `<div v-safe-html="rawHtml">foo <i>bar</i></div>`,