9 files changed, 124 insertions, 38 deletions
diff --git a/app/assets/javascripts/blob/openapi/index.js b/app/assets/javascripts/blob/openapi/index.js
index 44b75cc3e68..943001b7ec4 100644
--- a/app/assets/javascripts/blob/openapi/index.js
+++ b/app/assets/javascripts/blob/openapi/index.js
@@ -1,23 +1,29 @@
-import { SwaggerUIBundle } from 'swagger-ui-dist';
-import { createAlert } from '~/flash';
-import { __ } from '~/locale';
+import { setAttributes } from '~/lib/utils/dom_utils';
+import axios from '~/lib/utils/axios_utils';
 
-export default () => {
-  const el = document.getElementById('js-openapi-viewer');
+const createSandbox = () => {
+  const iframeEl = document.createElement('iframe');
+  setAttributes(iframeEl, {
+    src: '/-/sandbox/swagger',
+    sandbox: 'allow-scripts',
+    frameBorder: 0,
+    width: '100%',
+    // The height will be adjusted dynamically.
+    // Follow-up issue: https://gitlab.com/gitlab-org/gitlab/-/issues/377969
+    height: '1000',
+  });
+  return iframeEl;
+};
+
+export default async () => {
+  const wrapperEl = document.getElementById('js-openapi-viewer');
+  const sandboxEl = createSandbox();
+
+  const { data } = await axios.get(wrapperEl.dataset.endpoint);
+
+  wrapperEl.appendChild(sandboxEl);
 
-  Promise.all([import(/* webpackChunkName: 'openapi' */ 'swagger-ui-dist/swagger-ui.css')])
-    .then(() => {
-      SwaggerUIBundle({
-        url: el.dataset.endpoint,
-        dom_id: '#js-openapi-viewer',
-        deepLinking: true,
-        displayOperationId: true,
-      });
-    })
-    .catch((error) => {
-      createAlert({
-        message: __('Something went wrong while initializing the OpenAPI viewer'),
-      });
-      throw error;
-    });
+  sandboxEl.addEventListener('load', () => {
+    sandboxEl.contentWindow.postMessage(data, '*');
+  });
 };
diff --git a/app/assets/javascripts/lib/swagger.js b/app/assets/javascripts/lib/swagger.js
new file mode 100644
index 00000000000..ed646176604
--- /dev/null
+++ b/app/assets/javascripts/lib/swagger.js
@@ -0,0 +1,43 @@
+import { SwaggerUIBundle } from 'swagger-ui-dist';
+import { safeLoad } from 'js-yaml';
+import { isObject } from '~/lib/utils/type_utility';
+
+const renderSwaggerUI = (value) => {
+  /* SwaggerUIBundle accepts openapi definition
+   * in only JSON format, so we convert the YAML
+   * config to JSON if it's not JSON value
+   */
+  let spec = value;
+  if (!isObject(spec)) {
+    spec = safeLoad(spec, { json: true });
+  }
+
+  Promise.all([import(/* webpackChunkName: 'openapi' */ 'swagger-ui-dist/swagger-ui.css')])
+    .then(() => {
+      SwaggerUIBundle({
+        spec,
+        dom_id: '#swagger-ui',
+        deepLinking: true,
+        displayOperationId: true,
+      });
+    })
+    .catch((error) => {
+      throw error;
+    });
+};
+
+const addInitHook = () => {
+  window.addEventListener(
+    'message',
+    (event) => {
+      if (event.origin !== window.location.origin) {
+        return;
+      }
+      renderSwaggerUI(event.data);
+    },
+    false,
+  );
+};
+
+addInitHook();
+export default {};
diff --git a/app/controllers/projects/artifacts_controller.rb b/app/controllers/projects/artifacts_controller.rb
index 997d321ac24..40e89a06b46 100644
--- a/app/controllers/projects/artifacts_controller.rb
+++ b/app/controllers/projects/artifacts_controller.rb
@@ -14,7 +14,7 @@ class Projects::ArtifactsController < Projects::ApplicationController
   before_action :authorize_destroy_artifacts!, only: [:destroy]
   before_action :extract_ref_name_and_path
   before_action :validate_artifacts!, except: [:index, :download, :raw, :destroy]
-  before_action :entry, only: [:file]
+  before_action :entry, only: [:external_file, :file]
 
   MAX_PER_PAGE = 20
 
@@ -58,12 +58,19 @@ class Projects::ArtifactsController < Projects::ApplicationController
     render_404 unless @entry.exists?
   end
 
+  # External files are redirected to Gitlab Pages and might have unsecure content
+  # To warn the user about the possible unsecure content, we show a warning page
+  # before redirecting the user.
+  def external_file
+    @blob = @entry.blob
+  end
+
   def file
     blob = @entry.blob
     conditionally_expand_blob(blob)
 
     if blob.external_link?(build)
-      redirect_to blob.external_url(@project, build)
+      redirect_to external_file_project_job_artifacts_path(@project, @build, path: params[:path])
     else
       respond_to do |format|
         format.html do
diff --git a/app/controllers/sandbox_controller.rb b/app/controllers/sandbox_controller.rb
index a48b2b8a314..dffe6797831 100644
--- a/app/controllers/sandbox_controller.rb
+++ b/app/controllers/sandbox_controller.rb
@@ -8,4 +8,8 @@ class SandboxController < ApplicationController # rubocop:disable Gitlab/Namespa
   def mermaid
     render layout: false
   end
+
+  def swagger
+    render layout: false
+  end
 end
diff --git a/app/views/projects/artifacts/_file_navigation.html.haml b/app/views/projects/artifacts/_file_navigation.html.haml
new file mode 100644
index 00000000000..e9109451a69
--- /dev/null
+++ b/app/views/projects/artifacts/_file_navigation.html.haml
@@ -0,0 +1,12 @@
+.nav-block
+  %ul.breadcrumb.repo-breadcrumb
+    %li.breadcrumb-item
+      = link_to _('Artifacts'), browse_project_job_artifacts_path(project, build)
+    - path_breadcrumbs do |title, breadcrumb|
+      - title = truncate(title, length: 40)
+      %li.breadcrumb-item
+        - if path == breadcrumb
+          = link_to file_project_job_artifacts_path(project, build, breadcrumb) do
+            %strong= title
+        - else
+          = link_to title, browse_project_job_artifacts_path(project, build, breadcrumb)
diff --git a/app/views/projects/artifacts/_tree_file.html.haml b/app/views/projects/artifacts/_tree_file.html.haml
index 03d35c1c989..e120975a8f9 100644
--- a/app/views/projects/artifacts/_tree_file.html.haml
+++ b/app/views/projects/artifacts/_tree_file.html.haml
@@ -1,13 +1,15 @@
 - blob = file.blob
-- path_to_file = file_project_job_artifacts_path(@project, @build, path: file.path)
 - external_link = blob.external_link?(@build)
+- if external_link
+  - path_to_file = external_file_project_job_artifacts_path(@project, @build, path: file.path)
+- else
+  - path_to_file = file_project_job_artifacts_path(@project, @build, path: file.path)
 
 %tr.tree-item.js-artifact-tree-row{ data: { link: path_to_file, external_link: "#{external_link}" } }
   %td.tree-item-file-name
     = tree_icon('file', blob.mode, blob.name)
     - if external_link
-      = link_to path_to_file, class: 'tree-item-file-external-link js-artifact-tree-tooltip str-truncated',
-          target: '_blank', rel: 'noopener noreferrer', title: _('Opens in a new window') do
+      = link_to path_to_file, class: 'tree-item-file-external-link js-artifact-tree-tooltip str-truncated' do
         %span>= blob.name
       = sprite_icon('external-link', css_class: 'js-artifact-tree-external-icon')
     - else
diff --git a/app/views/projects/artifacts/external_file.html.haml b/app/views/projects/artifacts/external_file.html.haml
new file mode 100644
index 00000000000..a014d134e31
--- /dev/null
+++ b/app/views/projects/artifacts/external_file.html.haml
@@ -0,0 +1,15 @@
+- page_title @path, _('Artifacts'), "#{@build.name} (##{@build.id})", _('Jobs')
+
+= render "projects/jobs/header"
+
+.tree-holder
+  = render 'projects/artifacts/file_navigation', project: @project, build: @build, path: @path
+
+  %h2= _("You are being redirected away from GitLab")
+  %p= _("This page is hosted on GitLab pages but contains user-generated content and may contain malicious code. Do not accept unless you trust the author and source.")
+
+  = link_to @blob.external_url(@project, @build),
+      @blob.external_url(@project, @build),
+      target: '_blank',
+      title: _('Opens in a new window'),
+      rel: 'noopener noreferrer'
diff --git a/app/views/projects/artifacts/file.html.haml b/app/views/projects/artifacts/file.html.haml
index e16e3ef266d..5b9e5ad584f 100644
--- a/app/views/projects/artifacts/file.html.haml
+++ b/app/views/projects/artifacts/file.html.haml
@@ -4,19 +4,7 @@
 = render "projects/jobs/header"
 
 .tree-holder
-  .nav-block
-    %ul.breadcrumb.repo-breadcrumb
-      %li.breadcrumb-item
-        = link_to 'Artifacts', browse_project_job_artifacts_path(@project, @build)
-      - path_breadcrumbs do |title, path|
-        - title = truncate(title, length: 40)
-        %li.breadcrumb-item
-          - if path == @path
-            = link_to file_project_job_artifacts_path(@project, @build, path) do
-              %strong= title
-          - else
-            = link_to title, browse_project_job_artifacts_path(@project, @build, path)
-
+  = render 'projects/artifacts/file_navigation', project: @project, build: @build, path: @path
 
   %article.file-holder
     - blob = @entry.blob
diff --git a/app/views/sandbox/swagger.html.erb b/app/views/sandbox/swagger.html.erb
new file mode 100644
index 00000000000..ab3c36e5f4a
--- /dev/null
+++ b/app/views/sandbox/swagger.html.erb
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+  <%= webpack_bundle_tag("sandboxed_swagger") %>
+  </head>
+  <body>
+    <div id="swagger-ui"></div>
+  </body>
+</html>