From cb266eb942789dc60e6b61ec9c7f2e35e43de0ce Mon Sep 17 00:00:00 2001 From: Alex Moon Date: Wed, 6 Sep 2017 13:23:14 -0700 Subject: [PATCH] [PLT-959] Browser Compatibility (#6945) * Error page implimentation * Update Browser Compatibility check to check Chrome, FF, IE, Edge, and Safai * Update strings with proper edge version * undo uneeded changes and move to go template. * more unneeded additions * eliminate js and add local triangle * fix typo * Correct debug logging of browser version * Modify Browser Check to pass user_agent object only and write test. * Fix chrome version typo and correct testing change that broke chrome UA chack * simplity browser version detection by using maps instead of string splitting --- i18n/en.json | 56 ++++----- templates/unsupported_browser.html | 178 +++++++++++++++++++++++++++++ web/web.go | 36 ++++-- web/web_test.go | 29 +++++ webapp/i18n/en.json | 5 +- webapp/images/warning.png | Bin 0 -> 1046 bytes webapp/webpack.config.js | 3 +- 7 files changed, 265 insertions(+), 42 deletions(-) create mode 100644 templates/unsupported_browser.html create mode 100644 webapp/images/warning.png diff --git a/i18n/en.json b/i18n/en.json index ef839b4fd1..7503ca8e84 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -3971,30 +3971,6 @@ "id": "ent.saml.update_saml_user.unable_error", "translation": "Unable to update existing SAML user. Allowing login anyway. err=%v" }, - { - "id": "error.generic.link_message", - "translation": "Back to Mattermost" - }, - { - "id": "error.generic.message", - "translation": "An error has occurred." - }, - { - "id": "error.generic.title", - "translation": "Error" - }, - { - "id": "error.not_found.link_message", - "translation": "Back to Mattermost" - }, - { - "id": "error.not_found.message", - "translation": "The page you were trying to reach does not exist." - }, - { - "id": "error.not_found.title", - "translation": "Page not found" - }, { "id": "jobs.request_cancellation.status.error", "translation": "Could not request cancellation for job that is not in a cancelable state." @@ -6667,10 +6643,6 @@ "id": "web.authorize_oauth.title", "translation": "Authorize Application" }, - { - "id": "web.check_browser_compatibility.app_error", - "translation": "Your current browser is not supported, please upgrade to one of the following browsers: Google Chrome 21 or higher, Internet Explorer 11 or higher, Firefox 14 or higher, Safari 9 or higher" - }, { "id": "web.claim_account.team.error", "translation": "Couldn't find team name=%v, err=%v" @@ -6715,6 +6687,34 @@ "id": "web.email_verified.title", "translation": "Email Verified" }, + { + "id": "web.error.unsupported_browser.title", + "translation": "Unsupported Browser" + }, + { + "id": "web.error.unsupported_browser.message", + "translation": "Your current browser is not supported. Please upgrade to one of the following browsers:" + }, + { + "id": "web.error.unsupported_browser.help1", + "translation": "Google Chrome 43+" + }, + { + "id": "web.error.unsupported_browser.help2", + "translation": "Mozzilla Firefox 52+" + }, + { + "id": "web.error.unsupported_browser.help3", + "translation": "Microsoft Internet Explorer 11+" + }, + { + "id": "web.error.unsupported_browser.help4", + "translation": "Microsoft Edge 40+" + }, + { + "id": "web.error.unsupported_browser.help5", + "translation": "Apple Safari 9+" + }, { "id": "web.find_team.title", "translation": "Find Team" diff --git a/templates/unsupported_browser.html b/templates/unsupported_browser.html new file mode 100644 index 0000000000..79656e10c3 --- /dev/null +++ b/templates/unsupported_browser.html @@ -0,0 +1,178 @@ +{{define "unsupported_browser"}} + + + + +
+
+
+ warning +
+

+ {{.Props.Title}} +

+
+ {{.Props.Message}} + +
+
+
+ + +{{end}} diff --git a/web/web.go b/web/web.go index e701292218..221e1dc1c9 100644 --- a/web/web.go +++ b/web/web.go @@ -5,6 +5,7 @@ package web import ( "net/http" + "strconv" "strings" "github.com/NYTimes/gziphandler" @@ -46,19 +47,28 @@ func staticHandler(handler http.Handler) http.Handler { }) } -var browsersNotSupported string = "MSIE/8;MSIE/9;MSIE/10;Internet Explorer/8;Internet Explorer/9;Internet Explorer/10;Safari/7;Safari/8" +//map should be of minimum required browser version. +//var browsersNotSupported string = "MSIE/11;Internet Explorer/11;Safari/9;Chrome/43;Edge/15;Firefox/52" +//var browserMinimumSupported = [6]string{"MSIE/11", "Internet Explorer/11", "Safari/9", "Chrome/43", "Edge/15", "Firefox/52"} +var browserMinimumSupported = map[string]int{ + "MSIE": 11, + "Internet Explorer": 11, + "Safari": 9, + "Chrome": 43, + "Edge": 15, + "Firefox": 52, +} -func CheckBrowserCompatability(c *api.Context, r *http.Request) bool { - ua := user_agent.New(r.UserAgent()) +func CheckBrowserCompatability(ua *user_agent.UserAgent) bool { bname, bversion := ua.Browser() - browsers := strings.Split(browsersNotSupported, ";") - for _, browser := range browsers { - version := strings.Split(browser, "/") + l4g.Debug("Detected Browser: %v %v", bname, bversion) - if strings.HasPrefix(bname, version[0]) && strings.HasPrefix(bversion, version[1]) { - return false - } + curVersion := strings.Split(bversion, ".") + intCurVersion, _ := strconv.Atoi(curVersion[0]) + + if version, exist := browserMinimumSupported[bname]; exist && intCurVersion < version { + return false } return true @@ -66,10 +76,12 @@ func CheckBrowserCompatability(c *api.Context, r *http.Request) bool { } func root(c *api.Context, w http.ResponseWriter, r *http.Request) { - if !CheckBrowserCompatability(c, r) { + if !CheckBrowserCompatability(user_agent.New(r.UserAgent())) { w.Header().Set("Cache-Control", "no-store") - w.WriteHeader(http.StatusBadRequest) - w.Write([]byte(c.T("web.check_browser_compatibility.app_error"))) + page := utils.NewHTMLTemplate("unsupported_browser", c.Locale) + page.Props["Title"] = c.T("web.error.unsupported_browser.title") + page.Props["Message"] = c.T("web.error.unsupported_browser.message") + page.RenderToWriter(w) return } diff --git a/web/web_test.go b/web/web_test.go index e1cdb07140..4ea7cd8ee5 100644 --- a/web/web_test.go +++ b/web/web_test.go @@ -13,6 +13,7 @@ import ( "github.com/mattermost/platform/model" "github.com/mattermost/platform/store" "github.com/mattermost/platform/utils" + "github.com/mssola/user_agent" ) var ApiClient *model.Client @@ -120,3 +121,31 @@ func TestZZWebTearDown(t *testing.T) { time.Sleep(2 * time.Second) TearDown() } + +func TestCheckBrowserCompatability(t *testing.T) { + + //test should fail browser compatibility check with Mozilla FF 40.1 + ua := "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.1" + t.Logf("Checking Mozzila 40.1 with U.A. String: \n%v", ua) + if result := CheckBrowserCompatability(user_agent.New(ua)); result == true { + t.Error("Fail: should have failed browser compatibility") + } else { + t.Log("Pass: User Agent correctly failed!") + } + + ua = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36" + t.Logf("Checking Chrome 60 with U.A. String: \n%v", ua) + if result := CheckBrowserCompatability(user_agent.New(ua)); result == false { + t.Error("Fail: should have passed browser compatibility") + } else { + t.Log("Pass: User Agent correctly passed!") + } + + ua = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.79 Safari/537.36 Edge/14.14393" + t.Logf("Checking Edge 14.14393 with U.A. String: \n%v", ua) + if result := CheckBrowserCompatability(user_agent.New(ua)); result == true { + t.Log("Warning: Edge should have failed browser compatibility. It is probably still detecting as Chrome.") + } else { + t.Log("Pass: User Agent correctly failed!") + } +} diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index 91ebd13c69..62f50e39f7 100755 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -1455,11 +1455,14 @@ "emoji_picker.recent": "Recently Used", "emoji_picker.search": "Search", "emoji_picker.symbols": "Symbols", + "error.generic.title": "Error", + "error.generic.message": "An error has occurred.", + "error.generic.link_message": "Back to Mattermost", "error.generic.link": "Back to Mattermost", "error.generic.message": "An error has occurred.", "error.local_storage.help1": "Enable cookies", "error.local_storage.help2": "Turn off private browsing", - "error.local_storage.help3": "Use a supported browser (IE 11, Chrome 43+, Firefox 38+, Safari 9, Edge)", + "error.local_storage.help3": "Use a supported browser (IE 11, Chrome 43+, Firefox 52+, Safari 9, Edge 40+)", "error.local_storage.message": "Mattermost was unable to load because a setting in your browser prevents the use of its local storage features. To allow Mattermost to load, try the following actions:", "error.not_found.link_message": "Back to Mattermost", "error.not_found.message": "The page you were trying to reach does not exist", diff --git a/webapp/images/warning.png b/webapp/images/warning.png new file mode 100644 index 0000000000000000000000000000000000000000..19e13399bafef7e80ad1cc4b3ab76cf6bc158dd6 GIT binary patch literal 1046 zcmV+x1nK*UP)qA%-$%u4h8dDEt~eEt?TubFaIB|5nEfdO|)YH>0H10x5Jt&>umoC{=| zfY`|eMI}IX0+6j+UQz&JPXMw-ihvFTvX_9^=@9k~5IYINJ_A-0666eIKLD}?k|694 zAa**K%>=SnAUPv31;`cv*_E49nhbRh$R|8dHb_o}!GpntL4m=X!GOV%L6^Z1U2SS! zXfQ6dC8-r9AcfBP1(ija=@}&ojs*odsS3{dxdo*qsYN;po_Wc7ItoSxh6W&Yps7#Ji@A;eVXF);93GcasBSCCkg2oGt- zZ!CoP#c9Sy5H^n!0|V>5|NlR$F)*-CVqo|?@&Etdi~j%ryBKKy9R`L2IRF3vYJ^n6 zu5|za010qNS#tmY3ljhU3ljkVnw%H_00K@)L_t(oh0WMKYZOr!#qnQ4eBFqs2okMC zK}3WUVj)Nx8x?{!Viyo3jUhHRf}p5isdfAS_WA)71wjNYEL5ySo1{`uiO5)NmTY$S z-nl!InaP2}!oxiG{_hSuXP==OZN`C$)?Rmw;0}Hw!zWBON|c~^ZP;!vVSkfQG3~_< z{m>Z}8sv)Vk-@+j{^3}2XoGbKe}$nlJZ+3FpeN$M9ZxmH*Qb-xfHS1c@LfWPCh6B#N(HK7D0ERr*0573ZDYs+{4^kGx z)nniOxL}>id{Y4 zhZhCcON#d*({;Cx1lE06V$HsI?>)sioX$I0&AP8A-n*fPiR(Jm7w_HBGt%R_Zmo&; z4)m~b9a1Y$A1}G?nt1R0l^ir(7tv?D?Wt|S*_F>SS~I;DiR-5PxO0NJ4FHqsWwb_d zBJaLzAZ^0&QSp~78%=-k9(LfR=5Kw9XIXuEjN_vAo1n74@+$Nl&+rQV19y8h|Ay~A QlK=n!07*qoM6N<$f~T3*r2qf` literal 0 HcmV?d00001 diff --git a/webapp/webpack.config.js b/webapp/webpack.config.js index e9de8dd82a..b779e5d85e 100644 --- a/webapp/webpack.config.js +++ b/webapp/webpack.config.js @@ -322,7 +322,8 @@ if (TEST) { {from: 'images/logo-email.png', to: 'images'}, {from: 'images/circles.png', to: 'images'}, {from: 'images/favicon', to: 'images/favicon'}, - {from: 'images/appIcons.png', to: 'images'} + {from: 'images/appIcons.png', to: 'images'}, + {from: 'images/warning.png', to: 'images'} ]) ); }