Merge branch '241874-use-v-safe-html-in-integrations-form' into 'master'

Use v-safe-html for field help texts in integration form

See merge request gitlab-org/gitlab!67890

app/assets/javascripts/integrations/edit/components/dynamic_field.vue

 <script>
-/* eslint-disable vue/no-v-html */
-import { GlFormGroup, GlFormCheckbox, GlFormInput, GlFormSelect, GlFormTextarea } from '@gitlab/ui';
+import {
+  GlFormGroup,
+  GlFormCheckbox,
+  GlFormInput,
+  GlFormSelect,
+  GlFormTextarea,
+  GlSafeHtmlDirective as SafeHtml,
+} from '@gitlab/ui';
 import { capitalize, lowerCase, isEmpty } from 'lodash';
 import { mapGetters } from 'vuex';
 import eventHub from '../event_hub';
@@ -14,6 +20,9 @@ export default {
     GlFormSelect,
     GlFormTextarea,
   },
+  directives: {
+    SafeHtml,
+  },
   props: {
     choices: {
       type: Array,
@@ -122,6 +131,9 @@ export default {
       this.validated = true;
     },
   },
+  helpHtmlConfig: {
+    ADD_ATTR: ['target'], // allow external links, can be removed after https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1427 is implemented
+  },
 };
 </script>
 
@@ -133,7 +145,7 @@ export default {
     :state="valid"
   >
     <template #description>
-      <span v-html="help"></span>
+      <span v-safe-html:[$options.helpHtmlConfig]="help"></span>
     </template>
 
     <template v-if="isCheckbox">

app/assets/javascripts/integrations/edit/components/integration_form.vue

@@ -86,6 +86,7 @@ export default {
     },
   },
   helpHtmlConfig: {
+    ADD_ATTR: ['target'], // allow external links, can be removed after https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1427 is implemented
     ADD_TAGS: ['use'], // to support icon SVGs
     FORBID_ATTR: [], // This is trusted input so we can override the default config to allow data-* attributes
   },

app/models/integrations/microsoft_teams.rb

@@ -15,7 +15,7 @@ module Integrations
     end
 
     def help
-      '<p>Use this service to send notifications about events in GitLab projects to your Microsoft Teams channels. <a href="https://docs.gitlab.com/ee/user/project/integrations/microsoft_teams.html">How do I configure this integration?</a></p>'
+      '<p>Use this service to send notifications about events in GitLab projects to your Microsoft Teams channels. <a href="https://docs.gitlab.com/ee/user/project/integrations/microsoft_teams.html" target="_blank" rel="noopener noreferrer">How do I configure this integration?</a></p>'
     end
 
     def webhook_placeholder

app/models/integrations/unify_circuit.rb

@@ -18,7 +18,7 @@ module Integrations
       'This service sends notifications about projects events to a Unify Circuit conversation.<br />
       To set up this service:
       <ol>
-        <li><a href="https://www.circuit.com/unifyportalfaqdetail?articleId=164448">Set up an incoming webhook for your conversation</a>. All notifications will come to this conversation.</li>
+        <li><a href="https://www.circuit.com/unifyportalfaqdetail?articleId=164448" target="_blank" rel="noopener noreferrer">Set up an incoming webhook for your conversation</a>. All notifications will come to this conversation.</li>
         <li>Paste the <strong>Webhook URL</strong> into the field below.</li>
         <li>Select events below to enable notifications.</li>
       </ol>'

spec/frontend/integrations/edit/components/dynamic_field_spec.js

@@ -182,6 +182,19 @@ describe('DynamicField', () => {
 
         expect(findGlFormGroup().find('small').html()).toContain(helpHTML);
       });
+
+      it('strips unsafe HTML from the help text', () => {
+        const helpHTML =
+          '[<code>1</code> <iframe>2</iframe> <a href="javascript:alert(document.cookie)">3</a> <a href="foo" target="_blank">4</a>]';
+
+        createComponent({
+          help: helpHTML,
+        });
+
+        expect(findGlFormGroup().find('small').html()).toContain(
+          '[<code>1</code>  <a>3</a> <a target="_blank" href="foo">4</a>]',
+        );
+      });
     });
 
     describe('label text', () => {