Setup codesandbox url and CSP in BE

- Adds codesandbox url to settings
- Adds to codesandbox url to ide_data
- Adds CSP for codesandbox url

app/controllers/concerns/clientside_preview_csp.rb

+# frozen_string_literal: true
+
+module ClientsidePreviewCSP
+  extend ActiveSupport::Concern
+
+  included do
+    content_security_policy do |p|
+      next if p.directives.blank?
+      next unless Gitlab::CurrentSettings.web_ide_clientside_preview_enabled?
+
+      default_frame_src = p.directives['frame-src'] || p.directives['default-src']
+      frame_src_values = Array.wrap(default_frame_src) | [Gitlab::CurrentSettings.web_ide_clientside_preview_bundler_url].compact
+
+      p.frame_src(*frame_src_values)
+    end
+  end
+end

app/controllers/ide_controller.rb

@@ -3,6 +3,7 @@
 class IdeController < ApplicationController
   layout 'fullscreen'
 
+  include ClientsidePreviewCSP
   include StaticObjectExternalStorageCSP
 
   def index

app/helpers/ide_helper.rb

@@ -10,8 +10,9 @@ module IdeHelper
       "promotion-svg-path": image_path('illustrations/web-ide_promotion.svg'),
       "ci-help-page-path" => help_page_path('ci/quick_start/README'),
       "web-ide-help-page-path" => help_page_path('user/project/web_ide/index.html'),
-      "clientside-preview-enabled": Gitlab::CurrentSettings.current_application_settings.web_ide_clientside_preview_enabled.to_s,
-      "render-whitespace-in-code": current_user.render_whitespace_in_code.to_s
+      "clientside-preview-enabled": Gitlab::CurrentSettings.web_ide_clientside_preview_enabled?.to_s,
+      "render-whitespace-in-code": current_user.render_whitespace_in_code.to_s,
+      "codesandbox-bundler-url": Gitlab::CurrentSettings.web_ide_clientside_preview_bundler_url
     }
   end
 end

app/models/application_setting_implementation.rb

@@ -351,6 +351,12 @@ module ApplicationSettingImplementation
     static_objects_external_storage_url.present?
   end
 
+  # This will eventually be configurable
+  # https://gitlab.com/gitlab-org/gitlab/issues/208161
+  def web_ide_clientside_preview_bundler_url
+    'https://sandbox-prod.gitlab-static.net'
+  end
+
   private
 
   def separate_whitelists(string_array)

spec/features/ide/clientside_preview_csp_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe 'IDE Clientside Preview CSP' do
+  let_it_be(:user) { create(:user) }
+
+  shared_context 'disable feature' do
+    before do
+      allow_next_instance_of(ApplicationSetting) do |instance|
+        allow(instance).to receive(:web_ide_clientside_preview_enabled?).and_return(false)
+      end
+    end
+  end
+
+  it_behaves_like 'setting CSP', 'frame-src' do
+    let(:whitelisted_url) { 'https://sandbox.gitlab-static.test' }
+    let(:extended_controller_class) { IdeController }
+
+    subject do
+      visit ide_path
+
+      response_headers['Content-Security-Policy']
+    end
+
+    before do
+      allow_next_instance_of(ApplicationSetting) do |instance|
+        allow(instance).to receive(:web_ide_clientside_preview_enabled?).and_return(true)
+        allow(instance).to receive(:web_ide_clientside_preview_bundler_url).and_return(whitelisted_url)
+      end
+
+      sign_in(user)
+    end
+  end
+end

spec/features/ide/static_object_external_storage_csp_spec.rb

@@ -11,7 +11,7 @@ describe 'Static Object External Storage Content Security Policy' do
     end
   end
 
-  it_behaves_like 'setting CSP connect-src' do
+  it_behaves_like 'setting CSP', 'connect-src' do
     let_it_be(:whitelisted_url) { 'https://static-objects.test' }
     let_it_be(:extended_controller_class) { IdeController }
 

spec/features/projects/sourcegraph_csp_spec.rb

@@ -12,7 +12,7 @@ describe 'Sourcegraph Content Security Policy' do
     end
   end
 
-  it_behaves_like 'setting CSP connect-src' do
+  it_behaves_like 'setting CSP', 'connect-src' do
     let_it_be(:whitelisted_url) { 'https://sourcegraph.test' }
     let_it_be(:extended_controller_class) { Projects::BlobController }
 

spec/support/shared_examples/csp.rb

 # frozen_string_literal: true
 
-RSpec.shared_examples 'setting CSP connect-src' do
+RSpec.shared_examples 'setting CSP' do |rule_name|
   let_it_be(:default_csp_values) { "'self' https://some-cdn.test" }
 
   shared_context 'csp config' do |csp_rule|
@@ -10,7 +10,7 @@ RSpec.shared_examples 'setting CSP connect-src' do
       end
 
       expect_next_instance_of(extended_controller_class) do |controller|
-        expect(controller).to receive(:current_content_security_policy).and_return(csp)
+        expect(controller).to receive(:current_content_security_policy).at_least(:once).and_return(csp)
       end
     end
   end
@@ -23,55 +23,55 @@ RSpec.shared_examples 'setting CSP connect-src' do
     end
   end
 
-  describe 'when a CSP config exists for connect-src' do
-    include_context 'csp config', :connect_src
+  describe "when a CSP config exists for #{rule_name}" do
+    include_context 'csp config', rule_name.parameterize.underscore.to_sym
 
     context 'when feature is enabled' do
-      it 'appends to connect-src' do
-        is_expected.to eql("connect-src #{default_csp_values} #{whitelisted_url}")
+      it "appends to #{rule_name}" do
+        is_expected.to eql("#{rule_name} #{default_csp_values} #{whitelisted_url}")
       end
     end
 
     context 'when feature is disabled' do
       include_context 'disable feature'
 
-      it 'keeps original connect-src' do
-        is_expected.to eql("connect-src #{default_csp_values}")
+      it "keeps original #{rule_name}" do
+        is_expected.to eql("#{rule_name} #{default_csp_values}")
       end
     end
   end
 
-  describe 'when a CSP config exists for default-src but not connect-src' do
+  describe "when a CSP config exists for default-src but not #{rule_name}" do
     include_context 'csp config', :default_src
 
     context 'when feature is enabled' do
-      it 'uses default-src values in connect-src' do
-        is_expected.to eql("default-src #{default_csp_values}; connect-src #{default_csp_values} #{whitelisted_url}")
+      it "uses default-src values in #{rule_name}" do
+        is_expected.to eql("default-src #{default_csp_values}; #{rule_name} #{default_csp_values} #{whitelisted_url}")
       end
     end
 
     context 'when feature is disabled' do
       include_context 'disable feature'
 
-      it 'does not add connect-src' do
+      it "does not add #{rule_name}" do
         is_expected.to eql("default-src #{default_csp_values}")
       end
     end
   end
 
-  describe 'when a CSP config exists for font-src but not connect-src' do
+  describe "when a CSP config exists for font-src but not #{rule_name}" do
     include_context 'csp config', :font_src
 
     context 'when feature is enabled' do
-      it 'uses default-src values in connect-src' do
-        is_expected.to eql("font-src #{default_csp_values}; connect-src #{whitelisted_url}")
+      it "uses default-src values in #{rule_name}" do
+        is_expected.to eql("font-src #{default_csp_values}; #{rule_name} #{whitelisted_url}")
       end
     end
 
     context 'when feature is disabled' do
       include_context 'disable feature'
 
-      it 'does not add connect-src' do
+      it "does not add #{rule_name}" do
         is_expected.to eql("font-src #{default_csp_values}")
       end
     end