Add latest changes from gitlab-org/gitlab@master

2 files changed, 14 insertions, 8 deletions

diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue b/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue
index 5aae1812de3..4a78cbacec0 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue
@@ -35,16 +35,20 @@ export default {
     },
     highlightedContent() {
       let highlightedContent;
+      let { language } = this;
 
       if (this.hljs) {
-        if (!this.language) {
-          highlightedContent = this.hljs.highlightAuto(this.content).value;
+        if (!language) {
+          const hljsHighlightAuto = this.hljs.highlightAuto(this.content);
+
+          highlightedContent = hljsHighlightAuto.value;
+          language = hljsHighlightAuto.language;
         } else if (this.languageDefinition) {
           highlightedContent = this.hljs.highlight(this.content, { language: this.language }).value;
         }
       }
 
-      return wrapLines(highlightedContent);
+      return wrapLines(highlightedContent, language);
     },
   },
   watch: {
@@ -110,7 +114,7 @@ export default {
     data-qa-selector="blob_viewer_file_content"
   >
     <line-numbers :lines="lineNumbers" />
-    <pre class="code gl-pb-0!"><code v-safe-html="highlightedContent"></code>
+    <pre class="code highlight gl-pb-0!"><code v-safe-html="highlightedContent"></code>
     </pre>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/utils.js b/app/assets/javascripts/vue_shared/components/source_viewer/utils.js
index e64e564bf61..d726a8a55ff 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/utils.js
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/utils.js
@@ -1,11 +1,13 @@
-export const wrapLines = (content) => {
+export const wrapLines = (content, language) => {
+  const isValidLanguage = /^[a-z\d\-_]+$/.test(language); // To prevent the possibility of a vulnerability we only allow languages that contain alphanumeric characters ([a-z\d), dashes (-) or underscores (_).
+
   return (
     content &&
     content
       .split('\n')
       .map((line, i) => {
         let formattedLine;
-        const idAttribute = `id="LC${i + 1}"`;
+        const attributes = `id="LC${i + 1}" lang="${isValidLanguage ? language : ''}"`;
 
         if (line.includes('<span class="hljs') && !line.includes('</span>')) {
           /**
@@ -14,9 +16,9 @@ export const wrapLines = (content) => {
            * example (before):  <span class="hljs-code">```bash
            * example (after):   <span id="LC67" class="hljs-code">```bash
            */
-          formattedLine = line.replace(/(?=class="hljs)/, `${idAttribute} `);
+          formattedLine = line.replace(/(?=class="hljs)/, `${attributes} `);
         } else {
-          formattedLine = `<span ${idAttribute} class="line">${line}</span>`;
+          formattedLine = `<span ${attributes} class="line">${line}</span>`;
         }
 
         return formattedLine;