[#4380] Improve browser security warning

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
This commit is contained in:
Andrey Shovkoplyas 2018-07-30 13:13:23 +03:00
parent 0e401e6973
commit d834b6e37d
No known key found for this signature in database
GPG Key ID: EAAB7C8622D860A4
15 changed files with 102 additions and 96 deletions

View File

@ -1,3 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path fill="#6E777E" d="M5,8 L5,6.25641026 C5,4.47325715 6.32593143,3 8,3 C9.67406857,3 11,4.47325715 11,6.25641026 L11,8 L11.5,8 C12.3284271,8 13,8.67157288 13,9.5 L13,12.5 C13,13.3284271 12.3284271,14 11.5,14 L4.5,14 C3.67157288,14 3,13.3284271 3,12.5 L3,9.5 C3,8.67157288 3.67157288,8 4.5,8 L5,8 Z M6.38461538,8 L9.61538462,8 L9.61538462,6.25641026 C9.61538462,5.20733388 8.87493797,4.38461538 8,4.38461538 C7.12506203,4.38461538 6.38461538,5.20733388 6.38461538,6.25641026 L6.38461538,8 Z" id="shape"></path> <path fill="" d="M5,8 L5,6.25641026 C5,4.47325715 6.32593143,3 8,3 C9.67406857,3 11,4.47325715 11,6.25641026 L11,8 L11.5,8 C12.3284271,8 13,8.67157288 13,9.5 L13,12.5 C13,13.3284271 12.3284271,14 11.5,14 L4.5,14 C3.67157288,14 3,13.3284271 3,12.5 L3,9.5 C3,8.67157288 3.67157288,8 4.5,8 L5,8 Z M6.38461538,8 L9.61538462,8 L9.61538462,6.25641026 C9.61538462,5.20733388 8.87493797,4.38461538 8,4.38461538 C7.12506203,4.38461538 6.38461538,5.20733388 6.38461538,6.25641026 L6.38461538,8 Z" id="shape"></path>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 606 B

After

Width:  |  Height:  |  Size: 599 B

View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<g fill-rule="evenodd">
<path d="M5 8L5 6.25641026C5 4.47325715 6.32593143 3 8 3 9.67406857 3 11 4.47325715 11 6.25641026L11 8 5 8zM6.39959641 6C6.50856018 5.07632579 7.19774249 4.38461538 8 4.38461538 8.87493797 4.38461538 9.61538462 5.20733388 9.61538462 6.25641026L9.61538462 8 6.38461538 8 5 8 5 6 6.39959641 6zM5 8L11 8 11.5 8C12.3284271 8 13 8.67157288 13 9.5L13 12.5C13 13.3284271 12.3284271 14 11.5 14L4.5 14C3.67157288 14 3 13.3284271 3 12.5L3 9.5C3 8.67157288 3.67157288 8 4.5 8L5 8z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 601 B

View File

@ -2,7 +2,9 @@
(:require [status-im.data-store.browser :as browser-store] (:require [status-im.data-store.browser :as browser-store]
[status-im.data-store.dapp-permissions :as dapp-permissions] [status-im.data-store.dapp-permissions :as dapp-permissions]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[status-im.constants :as constants])) [status-im.constants :as constants]
[status-im.ui.screens.browser.default-dapps :as default-dapps]
[status-im.utils.http :as http]))
(defn get-current-url [{:keys [history history-index]}] (defn get-current-url [{:keys [history history-index]}]
(when (and history-index history) (when (and history-index history)
@ -14,8 +16,15 @@
(defn can-go-forward? [{:keys [history-index history]}] (defn can-go-forward? [{:keys [history-index history]}]
(< history-index (dec (count history)))) (< history-index (dec (count history))))
(defn check-if-dapp-in-list [{:keys [history history-index] :as browser}]
(let [history-host (http/url-host (try (nth history history-index) (catch js/Error _)))
dapp (first (filter #(= history-host (http/url-host (:dapp-url %))) (apply concat (mapv :data default-dapps/all))))]
(if dapp
(assoc browser :dapp? true :name (:name dapp))
(assoc browser :dapp? false :name (i18n/label :t/browser)))))
(defn update-browser-fx [{:keys [db now]} browser] (defn update-browser-fx [{:keys [db now]} browser]
(let [updated-browser (assoc browser :timestamp now)] (let [updated-browser (check-if-dapp-in-list (assoc browser :timestamp now))]
{:db (update-in db [:browser/browsers (:browser-id updated-browser)] {:db (update-in db [:browser/browsers (:browser-id updated-browser)]
merge updated-browser) merge updated-browser)
:data-store/tx [(browser-store/save-browser-tx updated-browser)]})) :data-store/tx [(browser-store/save-browser-tx updated-browser)]}))

View File

@ -700,7 +700,8 @@
:dapp "ÐApp" :dapp "ÐApp"
:selected "Selected" :selected "Selected"
:selected-dapps "Selected ÐApps" :selected-dapps "Selected ÐApps"
:browser-warning "Connection is not proven secure. Make sure you trust this site before signing transactions or entering personal data." :browser-secure "Connection is secure. Make sure you really trust this site before signing transactions or entering personal data."
:browser-not-secure "Connection is not secure! Do not sign transactions or send personal data on this site."
:make-sure-you-trust-dapp "Make sure that you trust this DApp" :make-sure-you-trust-dapp "Make sure that you trust this DApp"
:would-like-to-access "Would like to Access" :would-like-to-access "Would like to Access"
:your-contact-code "Your Contact Code"}) :your-contact-code "Your Contact Code"})

View File

@ -126,6 +126,7 @@
:icons/hidden (components.svg/slurp-svg "./resources/icons/hidden.svg") :icons/hidden (components.svg/slurp-svg "./resources/icons/hidden.svg")
:icons/in-contacts (components.svg/slurp-svg "./resources/icons/in_contacts.svg") :icons/in-contacts (components.svg/slurp-svg "./resources/icons/in_contacts.svg")
:icons/lock (components.svg/slurp-svg "./resources/icons/lock.svg") :icons/lock (components.svg/slurp-svg "./resources/icons/lock.svg")
:icons/lock-opened (components.svg/slurp-svg "./resources/icons/lock_opened.svg")
:icons/mic (components.svg/slurp-svg "./resources/icons/mic.svg") :icons/mic (components.svg/slurp-svg "./resources/icons/mic.svg")
:icons/ok (components.svg/slurp-svg "./resources/icons/ok.svg") :icons/ok (components.svg/slurp-svg "./resources/icons/ok.svg")
:icons/public (components.svg/slurp-svg "./resources/icons/public.svg") :icons/public (components.svg/slurp-svg "./resources/icons/public.svg")

View File

@ -18,12 +18,10 @@
[react/text {:style (styles/tooltip-text font-size)} label]] [react/text {:style (styles/tooltip-text font-size)} label]]
[vector-icons/icon :icons/tooltip-triangle {:color color :style styles/tooltip-triangle}]]])) [vector-icons/icon :icons/tooltip-triangle {:color color :style styles/tooltip-triangle}]]]))
(views/defview bottom-tooltip-info [label] (views/defview bottom-tooltip-info [label on-close]
(views/letsubs [opened? (reagent/atom true) (views/letsubs [bottom-anim-value (animation/create-value -150)
bottom-anim-value (animation/create-value -150)
opacity-value (animation/create-value 0)] opacity-value (animation/create-value 0)]
{:component-did-mount (animations/animate-tooltip -150 bottom-anim-value opacity-value -10)} {:component-did-mount (animations/animate-tooltip -150 bottom-anim-value opacity-value -10)}
(when @opened?
[react/view styles/bottom-tooltip-container [react/view styles/bottom-tooltip-container
[react/animated-view {:style (styles/tooltip-animated bottom-anim-value opacity-value)} [react/animated-view {:style (styles/tooltip-animated bottom-anim-value opacity-value)}
[vector-icons/icon :icons/tooltip-triangle {:color colors/gray-notifications [vector-icons/icon :icons/tooltip-triangle {:color colors/gray-notifications
@ -31,6 +29,6 @@
:container-style {:transform [{:rotate "180deg"}]}}] :container-style {:transform [{:rotate "180deg"}]}}]
[react/view styles/bottom-tooltip-text-container [react/view styles/bottom-tooltip-text-container
[react/text {:style styles/bottom-tooltip-text} label] [react/text {:style styles/bottom-tooltip-text} label]
[react/touchable-highlight {:on-press #(reset! opened? false) [react/touchable-highlight {:on-press on-close
:style styles/close-icon} :style styles/close-icon}
[vector-icons/icon :icons/close {:color colors/white}]]]]]))) [vector-icons/icon :icons/close {:color colors/white}]]]]]))

View File

@ -64,7 +64,7 @@
:accessibility-label :open-dapp-button :accessibility-label :open-dapp-button
:on-press #(do :on-press #(do
(re-frame/dispatch [:navigate-to-clean :home]) (re-frame/dispatch [:navigate-to-clean :home])
(re-frame/dispatch [:open-dapp-in-browser dapp]))}] (re-frame/dispatch [:open-url-in-browser dapp-url]))}]
[components/separator {:margin-left 72}]] [components/separator {:margin-left 72}]]
[react/view styles/description-container [react/view styles/description-container
[react/i18n-text {:style styles/gray-label :key :description}] [react/i18n-text {:style styles/gray-label :key :description}]

View File

@ -10,11 +10,15 @@
(spec/def :browser/history (spec/nilable vector?)) (spec/def :browser/history (spec/nilable vector?))
(spec/def :browser/history-index (spec/nilable int?)) (spec/def :browser/history-index (spec/nilable int?))
(spec/def :browser/loading? (spec/nilable boolean?)) (spec/def :browser/loading? (spec/nilable boolean?))
(spec/def :browser/url-editing? (spec/nilable boolean?))
(spec/def :browser/show-tooltip (spec/nilable keyword?))
(spec/def :browser/options (spec/def :browser/options
(allowed-keys (allowed-keys
:opt-un [:browser/browser-id :opt-un [:browser/browser-id
:browser/loading? :browser/loading?
:browser/url-editing?
:browser/show-tooltip
:browser/error?])) :browser/error?]))
(spec/def :browser/browser (spec/def :browser/browser

View File

@ -1,4 +1,4 @@
(ns status-im.ui.screens.contacts.default-dapps) (ns status-im.ui.screens.browser.default-dapps)
(def all (def all
[{:title "Exchanges" [{:title "Exchanges"
@ -94,11 +94,11 @@
:description "The Beautiful (card) Game"}]} :description "The Beautiful (card) Game"}]}
{:title "Social Networks" {:title "Social Networks"
:data [{:name "Cent" :data [{:name "Cent"
:dapp-url "https://beta.cent.co" :dapp-url "https://beta.cent.co/"
:photo-path "contacts://cent" :photo-path "contacts://cent"
:description "Get wisdom, get money"} :description "Get wisdom, get money"}
{:name "Peepeth" {:name "Peepeth"
:dapp-url "http://peepeth.com/" :dapp-url "https://peepeth.com/"
:photo-path "contacts://peepeth" :photo-path "contacts://peepeth"
:description "Blockchain-powered microblogging"} :description "Blockchain-powered microblogging"}
{:name "Purrbook" {:name "Purrbook"
@ -124,6 +124,6 @@
:developer? true}]} :developer? true}]}
{:title "Other: Media" {:title "Other: Media"
:data [{:name "LivePeer" :data [{:name "LivePeer"
:dapp-url "http://livepeer.tv" :dapp-url "https://media.livepeer.org/"
:photo-path "contacts://livepeer" :photo-path "contacts://livepeer"
:description "Decentralized video broadcasting"}]}]) :description "Decentralized video broadcasting"}]}])

View File

@ -58,29 +58,14 @@
(fn [_ [_ link]] (fn [_ [_ link]]
{:browse link})) {:browse link}))
(handlers/register-handler-fx
:open-dapp-in-browser
[re-frame/trim-v]
(fn [cofx [{:keys [name dapp-url]}]]
(let [browser {:browser-id name
:name name
:dapp? true
:history-index 0
:history [(http/normalize-and-decode-url dapp-url)]}]
(model/update-browser-and-navigate cofx browser))))
(handlers/register-handler-fx (handlers/register-handler-fx
:open-url-in-browser :open-url-in-browser
[re-frame/trim-v] [re-frame/trim-v]
(fn [cofx [url]] (fn [cofx [url]]
(let [normalized-url (http/normalize-and-decode-url url) (let [normalized-url (http/normalize-and-decode-url url)]
browser {:browser-id (or (http/url-host normalized-url) (model/update-browser-and-navigate cofx {:browser-id (or (http/url-host normalized-url) (random/id))
;; purely as a fallback should url not parse...
(random/id))
:name (i18n/label :t/browser)
:history-index 0 :history-index 0
:history [normalized-url]}] :history [normalized-url]}))))
(model/update-browser-and-navigate cofx browser))))
(handlers/register-handler-fx (handlers/register-handler-fx
:open-browser :open-browser

View File

@ -65,18 +65,20 @@
:height 36 :height 36
:background-color colors/gray-lighter :background-color colors/gray-lighter
:padding-horizontal 12 :padding-horizontal 12
:android {:align-items :flex-start :margin-right 5
:margin-left (if show-actions 66 20) :align-items :center
:padding-bottom 6} :android {:margin-left (if show-actions 66 20)}
:ios {:align-items :center :ios {:margin-left 20}})
:margin-horizontal 15}})
(defstyle url-input (defstyle url-input
{:flex 1 {:flex 1
:font-size 14 :font-size 14
:letter-spacing -0.2 :letter-spacing -0.2
:margin-horizontal 5
:android {:padding 0}}) :android {:padding 0}})
(def toolbar-content-dapp (def url-text
{:flex-direction :row {:font-size 14
:margin-horizontal 15}) :letter-spacing -0.2
:margin-horizontal 5})

View File

@ -11,7 +11,6 @@
[status-im.utils.js-resources :as js-res] [status-im.utils.js-resources :as js-res]
[status-im.ui.components.react :as components] [status-im.ui.components.react :as components]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.ui.components.chat-icon.screen :as chat-icon.screen]
[status-im.ui.components.icons.vector-icons :as icons] [status-im.ui.components.icons.vector-icons :as icons]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[status-im.utils.ethereum.core :as ethereum] [status-im.utils.ethereum.core :as ethereum]
@ -19,39 +18,42 @@
[status-im.ui.components.tooltip.views :as tooltip] [status-im.ui.components.tooltip.views :as tooltip]
[status-im.models.browser :as model] [status-im.models.browser :as model]
[status-im.utils.http :as http] [status-im.utils.http :as http]
[status-im.ui.components.styles :as components.styles])) [status-im.ui.components.styles :as components.styles]
[status-im.ui.components.colors :as colors]
(views/defview toolbar-content-dapp [name] [clojure.string :as string]))
(views/letsubs [dapp [:get-dapp-by-name name]]
[react/view
[react/view styles/toolbar-content-dapp
[chat-icon.screen/dapp-icon-browser dapp 36]
[react/view styles/dapp-name
[react/text {:style styles/dapp-name-text
:number-of-lines 1
:font :toolbar-title
:accessibility-label :dapp-name-text}
name]
[react/i18n-text {:style styles/dapp-text :key :dapp}]]]]))
(def browser-config (def browser-config
(reader/read-string (slurp "./src/status_im/utils/browser_config.edn"))) (reader/read-string (slurp "./src/status_im/utils/browser_config.edn")))
(defn toolbar-content [url browser] (defn toolbar-content [url {:keys [dapp? history history-index] :as browser} error? url-editing?]
(let [url-text (atom url)] (let [url-text (atom url)
history-url (try (nth history history-index) (catch js/Error _))
secure? (or dapp? (and (not error?) (string/starts-with? history-url "https://")))]
[react/view [react/view
[react/view (styles/toolbar-content false) [react/view (styles/toolbar-content false)
[react/touchable-highlight {:on-press #(re-frame/dispatch [:update-browser-options
{:show-tooltip (if secure? :secure :not-secure)}])}
(if secure?
[icons/icon :icons/lock {:color colors/green}]
[icons/icon :icons/lock-opened])]
(if url-editing?
[react/text-input {:on-change-text #(reset! url-text %) [react/text-input {:on-change-text #(reset! url-text %)
:on-submit-editing #(re-frame/dispatch [:update-browser-on-nav-change :on-blur #(re-frame/dispatch [:update-browser-options {:url-editing? false}])
:on-submit-editing #(do
(re-frame/dispatch [:update-browser-options {:url-editing? false}])
(re-frame/dispatch [:update-browser-on-nav-change
browser browser
(http/normalize-and-decode-url @url-text) (http/normalize-and-decode-url @url-text)
false]) false]))
:auto-focus (not url)
:placeholder (i18n/label :t/enter-url) :placeholder (i18n/label :t/enter-url)
:auto-capitalize :none :auto-capitalize :none
:auto-correct false :auto-correct false
:auto-focus true
:default-value url :default-value url
:style styles/url-input}]]])) :ellipsize :end
:style styles/url-input}]
[react/touchable-highlight {:style {:flex 1} :on-press #(re-frame/dispatch [:update-browser-options {:url-editing? true}])}
[react/text {:style styles/url-text} (http/url-host url)]])]]))
(defn- web-view-error [_ code desc] (defn- web-view-error [_ code desc]
(reagent/as-element (reagent/as-element
@ -75,8 +77,8 @@
(views/defview browser [] (views/defview browser []
(views/letsubs [webview (atom nil) (views/letsubs [webview (atom nil)
{:keys [address]} [:get-current-account] {:keys [address]} [:get-current-account]
{:keys [dapp? browser-id name] :as browser} [:get-current-browser] {:keys [browser-id] :as browser} [:get-current-browser]
{:keys [error? loading?]} [:get :browser/options] {:keys [error? loading? url-editing? show-tooltip]} [:get :browser/options]
rpc-url [:get :rpc-url] rpc-url [:get :rpc-url]
network-id [:get-network-id]] network-id [:get-network-id]]
(let [can-go-back? (model/can-go-back? browser) (let [can-go-back? (model/can-go-back? browser)
@ -92,9 +94,7 @@
(re-frame/dispatch [:navigate-back]) (re-frame/dispatch [:navigate-back])
(when error? (when error?
(re-frame/dispatch [:remove-browser browser-id]))))] (re-frame/dispatch [:remove-browser browser-id]))))]
(if dapp? [toolbar-content url browser error? url-editing?]
[toolbar-content-dapp name]
[toolbar-content url browser])
[toolbar.view/actions [{:icon :icons/wallet [toolbar.view/actions [{:icon :icons/wallet
:icon-opts {:color :black} :icon-opts {:color :black}
:handler #(re-frame/dispatch [:navigate-to-modal :wallet-modal])}]]] :handler #(re-frame/dispatch [:navigate-to-modal :wallet-modal])}]]]
@ -142,6 +142,9 @@
[react/view {:flex 1}] [react/view {:flex 1}]
[react/touchable-highlight {:on-press #(.reload @webview)} [react/touchable-highlight {:on-press #(.reload @webview)}
[icons/icon :icons/refresh]]] [icons/icon :icons/refresh]]]
(when-not dapp? (when show-tooltip
[tooltip/bottom-tooltip-info [tooltip/bottom-tooltip-info
(i18n/label :t/browser-warning)])]))) (if (= show-tooltip :secure)
(i18n/label :t/browser-secure)
(i18n/label :t/browser-not-secure))
#(re-frame/dispatch [:update-browser-options {:show-tooltip nil}])])])))

View File

@ -2,7 +2,7 @@
(:require [re-frame.core :as re-frame] (:require [re-frame.core :as re-frame]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[status-im.ui.screens.add-new.new-chat.db :as new-chat.db] [status-im.ui.screens.add-new.new-chat.db :as new-chat.db]
[status-im.ui.screens.contacts.default-dapps :as default-dapps] [status-im.ui.screens.browser.default-dapps :as default-dapps]
[status-im.utils.handlers :as handlers] [status-im.utils.handlers :as handlers]
[status-im.utils.handlers-macro :as handlers-macro] [status-im.utils.handlers-macro :as handlers-macro]
[status-im.utils.js-resources :as js-res] [status-im.utils.js-resources :as js-res]

View File

@ -71,7 +71,7 @@
(try (try
(when-let [host (.getDomain (goog.Uri. url))] (when-let [host (.getDomain (goog.Uri. url))]
(when-not (string/blank? host) (when-not (string/blank? host)
host)) (string/replace host #"www." "")))
(catch :default _ nil))) (catch :default _ nil)))
(defn parse-payload [o] (defn parse-payload [o]

View File

@ -43,16 +43,14 @@
(re-frame/dispatch [:initialize-browsers]) (re-frame/dispatch [:initialize-browsers])
(let [browsers (re-frame/subscribe [:browsers]) (let [browsers (re-frame/subscribe [:browsers])
dapp1-url "test.com" dapp1-url "cryptokitties.co"
dapp2-url "http://test2.com"] dapp2-url "http://test2.com"]
(testing "open and remove dapps" (testing "open and remove dapps"
(is (zero? (count @browsers))) (is (zero? (count @browsers)))
(re-frame/dispatch [:open-dapp-in-browser {:name "Test Dapp" (re-frame/dispatch [:open-url-in-browser dapp1-url])
:dapp-url dapp1-url
:description "Test description"}])
(is (= 1 (count @browsers))) (is (= 1 (count @browsers)))
@ -69,7 +67,7 @@
(is (and (= [(str "http://" dapp1-url) (:history browser1)]) (is (and (= [(str "http://" dapp1-url) (:history browser1)])
(= [dapp2-url] (:history browser2))))) (= [dapp2-url] (:history browser2)))))
(re-frame/dispatch [:remove-browser "Test Dapp"]) (re-frame/dispatch [:remove-browser dapp1-url])
(is (= 1 (count @browsers)))) (is (= 1 (count @browsers))))