@gitlab/ui 66.37.0 → 67.1.0

package/package.json

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

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>`,

package/src/scss/utilities.scss

@@ -2448,6 +2448,14 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   color: $black-normal !important;
 }
 
+.gl-text-gray-100 {
+  color: $gray-100;
+}
+
+.gl-text-gray-100\! {
+  color: $gray-100 !important;
+}
+
 .gl-text-gray-200 {
   color: $gray-200;
 }

package/src/scss/utility-mixins/color.scss

@@ -41,6 +41,10 @@
   color: $black-normal;
 }
 
+@mixin gl-text-gray-100 {
+  color: $gray-100;
+}
+
 @mixin gl-text-gray-200 {
   color: $gray-200;
 }