From d79df7baf7426ca865958b9a5fecb0690a6a6ba3 Mon Sep 17 00:00:00 2001 From: Mike Greiling Date: Thu, 1 Mar 2018 18:13:50 +0000 Subject: Remove u2f webpack bundle --- app/assets/javascripts/u2f/authenticate.js | 26 ++++++------ app/assets/javascripts/u2f/register.js | 27 ++++++------ app/assets/javascripts/u2f/util.js | 42 ++++++++++++++++++- app/helpers/u2f_helper.rb | 5 --- app/views/devise/sessions/two_factor.html.haml | 4 -- app/views/profiles/two_factor_auths/show.html.haml | 2 - config/webpack.config.js | 1 - lib/gitlab/gon_helper.rb | 1 + spec/features/u2f_spec.rb | 4 -- spec/helpers/u2f_helper_spec.rb | 49 ---------------------- spec/javascripts/test_bundle.js | 1 + spec/javascripts/u2f/authenticate_spec.js | 6 +-- spec/javascripts/u2f/register_spec.js | 4 +- spec/javascripts/u2f/util_spec.js | 45 ++++++++++++++++++++ 14 files changed, 118 insertions(+), 99 deletions(-) delete mode 100644 app/helpers/u2f_helper.rb delete mode 100644 spec/helpers/u2f_helper_spec.rb create mode 100644 spec/javascripts/u2f/util_spec.js diff --git a/app/assets/javascripts/u2f/authenticate.js b/app/assets/javascripts/u2f/authenticate.js index a3cc04e35fe..fd42f9c3baa 100644 --- a/app/assets/javascripts/u2f/authenticate.js +++ b/app/assets/javascripts/u2f/authenticate.js @@ -1,7 +1,5 @@ -/* eslint-disable func-names, wrap-iife */ -/* global u2f */ import _ from 'underscore'; -import isU2FSupported from './util'; +import importU2FLibrary from './util'; import U2FError from './error'; // Authenticate U2F (universal 2nd factor) devices for users to authenticate with. @@ -10,6 +8,7 @@ import U2FError from './error'; // State Flow #2: setup -> in_progress -> error -> setup export default class U2FAuthenticate { constructor(container, form, u2fParams, fallbackButton, fallbackUI) { + this.u2fUtils = null; this.container = container; this.renderNotSupported = this.renderNotSupported.bind(this); this.renderAuthenticated = this.renderAuthenticated.bind(this); @@ -50,22 +49,23 @@ export default class U2FAuthenticate { } start() { - if (isU2FSupported()) { - return this.renderInProgress(); - } - return this.renderNotSupported(); + return importU2FLibrary() + .then((utils) => { + this.u2fUtils = utils; + this.renderInProgress(); + }) + .catch(() => this.renderNotSupported()); } authenticate() { - return u2f.sign(this.appId, this.challenge, this.signRequests, (function (_this) { - return function (response) { + return this.u2fUtils.sign(this.appId, this.challenge, this.signRequests, + (response) => { if (response.errorCode) { const error = new U2FError(response.errorCode, 'authenticate'); - return _this.renderError(error); + return this.renderError(error); } - return _this.renderAuthenticated(JSON.stringify(response)); - }; - })(this), 10); + return this.renderAuthenticated(JSON.stringify(response)); + }, 10); } renderTemplate(name, params) { diff --git a/app/assets/javascripts/u2f/register.js b/app/assets/javascripts/u2f/register.js index cc3f02e75f6..869fac658e8 100644 --- a/app/assets/javascripts/u2f/register.js +++ b/app/assets/javascripts/u2f/register.js @@ -1,8 +1,5 @@ -/* eslint-disable func-names, wrap-iife */ -/* global u2f */ - import _ from 'underscore'; -import isU2FSupported from './util'; +import importU2FLibrary from './util'; import U2FError from './error'; // Register U2F (universal 2nd factor) devices for users to authenticate with. @@ -11,6 +8,7 @@ import U2FError from './error'; // State Flow #2: setup -> in_progress -> error -> setup export default class U2FRegister { constructor(container, u2fParams) { + this.u2fUtils = null; this.container = container; this.renderNotSupported = this.renderNotSupported.bind(this); this.renderRegistered = this.renderRegistered.bind(this); @@ -34,22 +32,23 @@ export default class U2FRegister { } start() { - if (isU2FSupported()) { - return this.renderSetup(); - } - return this.renderNotSupported(); + return importU2FLibrary() + .then((utils) => { + this.u2fUtils = utils; + this.renderSetup(); + }) + .catch(() => this.renderNotSupported()); } register() { - return u2f.register(this.appId, this.registerRequests, this.signRequests, (function (_this) { - return function (response) { + return this.u2fUtils.register(this.appId, this.registerRequests, this.signRequests, + (response) => { if (response.errorCode) { const error = new U2FError(response.errorCode, 'register'); - return _this.renderError(error); + return this.renderError(error); } - return _this.renderRegistered(JSON.stringify(response)); - }; - })(this), 10); + return this.renderRegistered(JSON.stringify(response)); + }, 10); } renderTemplate(name, params) { diff --git a/app/assets/javascripts/u2f/util.js b/app/assets/javascripts/u2f/util.js index 9771ff935c2..5778f00332d 100644 --- a/app/assets/javascripts/u2f/util.js +++ b/app/assets/javascripts/u2f/util.js @@ -1,3 +1,41 @@ -export default function isU2FSupported() { - return window.u2f; +function isOpera(userAgent) { + return userAgent.indexOf('Opera') >= 0 || userAgent.indexOf('OPR') >= 0; +} + +function getOperaVersion(userAgent) { + const match = userAgent.match(/OPR[^0-9]*([0-9]+)[^0-9]+/); + return match ? parseInt(match[1], 10) : false; +} + +function isChrome(userAgent) { + return userAgent.indexOf('Chrom') >= 0 && !isOpera(userAgent); +} + +function getChromeVersion(userAgent) { + const match = userAgent.match(/Chrom(?:e|ium)\/([0-9]+)\./); + return match ? parseInt(match[1], 10) : false; +} + +export function canInjectU2fApi(userAgent) { + const isSupportedChrome = isChrome(userAgent) && getChromeVersion(userAgent) >= 41; + const isSupportedOpera = isOpera(userAgent) && getOperaVersion(userAgent) >= 40; + const isMobile = ( + userAgent.indexOf('droid') >= 0 || + userAgent.indexOf('CriOS') >= 0 || + /\b(iPad|iPhone|iPod)(?=;)/.test(userAgent) + ); + return (isSupportedChrome || isSupportedOpera) && !isMobile; +} + +export default function importU2FLibrary() { + if (window.u2f) { + return Promise.resolve(window.u2f); + } + + const userAgent = typeof navigator !== 'undefined' ? navigator.userAgent : ''; + if (canInjectU2fApi(userAgent) || (gon && gon.test_env)) { + return import(/* webpackMode: "eager" */ 'vendor/u2f').then(() => window.u2f); + } + + return Promise.reject(); } diff --git a/app/helpers/u2f_helper.rb b/app/helpers/u2f_helper.rb deleted file mode 100644 index 81bfe5d4eeb..00000000000 --- a/app/helpers/u2f_helper.rb +++ /dev/null @@ -1,5 +0,0 @@ -module U2fHelper - def inject_u2f_api? - ((browser.chrome? && browser.version.to_i >= 41) || (browser.opera? && browser.version.to_i >= 40)) && !browser.device.mobile? - end -end diff --git a/app/views/devise/sessions/two_factor.html.haml b/app/views/devise/sessions/two_factor.html.haml index 56ec1b3db0d..6e54b9b5645 100644 --- a/app/views/devise/sessions/two_factor.html.haml +++ b/app/views/devise/sessions/two_factor.html.haml @@ -1,7 +1,3 @@ -- if inject_u2f_api? - - content_for :page_specific_javascripts do - = webpack_bundle_tag('u2f') - %div = render 'devise/shared/tab_single', tab_title: 'Two-Factor Authentication' .login-box diff --git a/app/views/profiles/two_factor_auths/show.html.haml b/app/views/profiles/two_factor_auths/show.html.haml index 8707af36e2e..329bf16895f 100644 --- a/app/views/profiles/two_factor_auths/show.html.haml +++ b/app/views/profiles/two_factor_auths/show.html.haml @@ -4,8 +4,6 @@ - content_for :page_specific_javascripts do - - if inject_u2f_api? - = webpack_bundle_tag('u2f') = webpack_bundle_tag('two_factor_auth') .js-two-factor-auth{ 'data-two-factor-skippable' => "#{two_factor_skippable?}", 'data-two_factor_skip_url' => skip_profile_two_factor_auth_path } diff --git a/config/webpack.config.js b/config/webpack.config.js index cd7fec48c31..fd0bfb59e65 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -57,7 +57,6 @@ function generateEntries() { ide: './ide/index.js', raven: './raven/index.js', test: './test.js', - u2f: ['vendor/u2f'], webpack_runtime: './webpack.js', }; diff --git a/lib/gitlab/gon_helper.rb b/lib/gitlab/gon_helper.rb index ba04387022d..92f0e0402a8 100644 --- a/lib/gitlab/gon_helper.rb +++ b/lib/gitlab/gon_helper.rb @@ -19,6 +19,7 @@ module Gitlab gon.gitlab_logo = ActionController::Base.helpers.asset_path('gitlab_logo.png') gon.sprite_icons = IconsHelper.sprite_icon_path gon.sprite_file_icons = IconsHelper.sprite_file_icons_path + gon.test_env = Rails.env.test? if current_user gon.current_user_id = current_user.id diff --git a/spec/features/u2f_spec.rb b/spec/features/u2f_spec.rb index 50ee1656e10..fb65b570dd6 100644 --- a/spec/features/u2f_spec.rb +++ b/spec/features/u2f_spec.rb @@ -1,10 +1,6 @@ require 'spec_helper' feature 'Using U2F (Universal 2nd Factor) Devices for Authentication', :js do - before do - allow_any_instance_of(U2fHelper).to receive(:inject_u2f_api?).and_return(true) - end - def manage_two_factor_authentication click_on 'Manage two-factor authentication' expect(page).to have_content("Setup new U2F device") diff --git a/spec/helpers/u2f_helper_spec.rb b/spec/helpers/u2f_helper_spec.rb deleted file mode 100644 index 0d65b4fe0b8..00000000000 --- a/spec/helpers/u2f_helper_spec.rb +++ /dev/null @@ -1,49 +0,0 @@ -require 'spec_helper' - -describe U2fHelper do - describe 'when not on mobile' do - it 'does not inject u2f on chrome 40' do - device = double(mobile?: false) - browser = double(chrome?: true, opera?: false, version: 40, device: device) - allow(helper).to receive(:browser).and_return(browser) - expect(helper.inject_u2f_api?).to eq false - end - - it 'injects u2f on chrome 41' do - device = double(mobile?: false) - browser = double(chrome?: true, opera?: false, version: 41, device: device) - allow(helper).to receive(:browser).and_return(browser) - expect(helper.inject_u2f_api?).to eq true - end - - it 'does not inject u2f on opera 39' do - device = double(mobile?: false) - browser = double(chrome?: false, opera?: true, version: 39, device: device) - allow(helper).to receive(:browser).and_return(browser) - expect(helper.inject_u2f_api?).to eq false - end - - it 'injects u2f on opera 40' do - device = double(mobile?: false) - browser = double(chrome?: false, opera?: true, version: 40, device: device) - allow(helper).to receive(:browser).and_return(browser) - expect(helper.inject_u2f_api?).to eq true - end - end - - describe 'when on mobile' do - it 'does not inject u2f on chrome 41' do - device = double(mobile?: true) - browser = double(chrome?: true, opera?: false, version: 41, device: device) - allow(helper).to receive(:browser).and_return(browser) - expect(helper.inject_u2f_api?).to eq false - end - - it 'does not inject u2f on opera 40' do - device = double(mobile?: true) - browser = double(chrome?: false, opera?: true, version: 40, device: device) - allow(helper).to receive(:browser).and_return(browser) - expect(helper.inject_u2f_api?).to eq false - end - end -end diff --git a/spec/javascripts/test_bundle.js b/spec/javascripts/test_bundle.js index fb4946aeeea..1bcfdfe72b6 100644 --- a/spec/javascripts/test_bundle.js +++ b/spec/javascripts/test_bundle.js @@ -37,6 +37,7 @@ window.$ = window.jQuery = $; window.gl = window.gl || {}; window.gl.TEST_HOST = 'http://test.host'; window.gon = window.gon || {}; +window.gon.test_env = true; let hasUnhandledPromiseRejections = false; diff --git a/spec/javascripts/u2f/authenticate_spec.js b/spec/javascripts/u2f/authenticate_spec.js index 29b15f3a782..4d15bcc4956 100644 --- a/spec/javascripts/u2f/authenticate_spec.js +++ b/spec/javascripts/u2f/authenticate_spec.js @@ -5,7 +5,7 @@ import MockU2FDevice from './mock_u2f_device'; describe('U2FAuthenticate', () => { preloadFixtures('u2f/authenticate.html.raw'); - beforeEach(() => { + beforeEach((done) => { loadFixtures('u2f/authenticate.html.raw'); this.u2fDevice = new MockU2FDevice(); this.container = $('#js-authenticate-u2f'); @@ -22,7 +22,7 @@ describe('U2FAuthenticate', () => { // bypass automatic form submission within renderAuthenticated spyOn(this.component, 'renderAuthenticated').and.returnValue(true); - return this.component.start(); + this.component.start().then(done).catch(done.fail); }); it('allows authenticating via a U2F device', () => { @@ -34,7 +34,7 @@ describe('U2FAuthenticate', () => { expect(this.component.renderAuthenticated).toHaveBeenCalledWith('{"deviceData":"this is data from the device"}'); }); - return describe('errors', () => { + describe('errors', () => { it('displays an error message', () => { const setupButton = this.container.find('#js-login-u2f-device'); setupButton.trigger('click'); diff --git a/spec/javascripts/u2f/register_spec.js b/spec/javascripts/u2f/register_spec.js index b0051f11362..dbe89c2923c 100644 --- a/spec/javascripts/u2f/register_spec.js +++ b/spec/javascripts/u2f/register_spec.js @@ -5,12 +5,12 @@ import MockU2FDevice from './mock_u2f_device'; describe('U2FRegister', () => { preloadFixtures('u2f/register.html.raw'); - beforeEach(() => { + beforeEach((done) => { loadFixtures('u2f/register.html.raw'); this.u2fDevice = new MockU2FDevice(); this.container = $('#js-register-u2f'); this.component = new U2FRegister(this.container, $('#js-register-u2f-templates'), {}, 'token'); - return this.component.start(); + this.component.start().then(done).catch(done.fail); }); it('allows registering a U2F device', () => { diff --git a/spec/javascripts/u2f/util_spec.js b/spec/javascripts/u2f/util_spec.js new file mode 100644 index 00000000000..4187183236f --- /dev/null +++ b/spec/javascripts/u2f/util_spec.js @@ -0,0 +1,45 @@ +import { canInjectU2fApi } from '~/u2f/util'; + +describe('U2F Utils', () => { + describe('canInjectU2fApi', () => { + it('returns false for Chrome < 41', () => { + const userAgent = 'Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.28 Safari/537.36'; + expect(canInjectU2fApi(userAgent)).toBe(false); + }); + + it('returns true for Chrome >= 41', () => { + const userAgent = 'Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36'; + expect(canInjectU2fApi(userAgent)).toBe(true); + }); + + it('returns false for Opera < 40', () => { + const userAgent = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.85 Safari/537.36 OPR/32.0.1948.25'; + expect(canInjectU2fApi(userAgent)).toBe(false); + }); + + it('returns true for Opera >= 40', () => { + const userAgent = 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36 OPR/43.0.2442.991'; + expect(canInjectU2fApi(userAgent)).toBe(true); + }); + + it('returns false for Safari', () => { + const userAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/603.2.4 (KHTML, like Gecko) Version/10.1.1 Safari/603.2.4'; + expect(canInjectU2fApi(userAgent)).toBe(false); + }); + + it('returns false for Chrome on Android', () => { + const userAgent = 'Mozilla/5.0 (Linux; Android 7.0; VS988 Build/NRD90U) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3145.0 Mobile Safari/537.36'; + expect(canInjectU2fApi(userAgent)).toBe(false); + }); + + it('returns false for Chrome on iOS', () => { + const userAgent = 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X) AppleWebKit/602.1.50 (KHTML, like Gecko) CriOS/56.0.2924.75 Mobile/14E5239e Safari/602.1'; + expect(canInjectU2fApi(userAgent)).toBe(false); + }); + + it('returns false for Safari on iOS', () => { + const userAgent = 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A356 Safari/604.1'; + expect(canInjectU2fApi(userAgent)).toBe(false); + }); + }); +}); -- cgit v1.2.1