status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[#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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/icons/lock.svg
View File

@ -1,3 +1,3 @@
<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>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 606 B

After

Width:  |  Height:  |  Size: 599 B

5
resources/icons/lock_opened.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 601 B

13
src/status_im/models/browser.cljs
View File

@ -2,7 +2,9 @@
(:require [status-im.data-store.browser :as browser-store]
[status-im.data-store.dapp-permissions :as dapp-permissions]
[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]}]
(when (and history-index history)
@ -14,8 +16,15 @@
(defn can-go-forward? [{:keys [history-index 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]
(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)]
merge updated-browser)
:data-store/tx [(browser-store/save-browser-tx updated-browser)]}))

3
src/status_im/translations/en.cljs
View File

@ -700,7 +700,8 @@
:dapp "ÐApp"
:selected "Selected"
: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"
:would-like-to-access "Would like to Access"
:your-contact-code "Your Contact Code"})

1
src/status_im/ui/components/icons/vector_icons.cljs
View File

@ -126,6 +126,7 @@
:icons/hidden (components.svg/slurp-svg "./resources/icons/hidden.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-opened (components.svg/slurp-svg "./resources/icons/lock_opened.svg")
:icons/mic (components.svg/slurp-svg "./resources/icons/mic.svg")
:icons/ok (components.svg/slurp-svg "./resources/icons/ok.svg")
:icons/public (components.svg/slurp-svg "./resources/icons/public.svg")

26
src/status_im/ui/components/tooltip/views.cljs
View File

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

2
src/status_im/ui/screens/add_new/open_dapp/views.cljs
View File

@ -64,7 +64,7 @@
:accessibility-label :open-dapp-button
:on-press #(do
(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}]]
[react/view styles/description-container
[react/i18n-text {:style styles/gray-label :key :description}]

4
src/status_im/ui/screens/browser/db.cljs
View File

@ -10,11 +10,15 @@
(spec/def :browser/history (spec/nilable vector?))
(spec/def :browser/history-index (spec/nilable int?))
(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
(allowed-keys
:opt-un [:browser/browser-id
:browser/loading?
:browser/url-editing?
:browser/show-tooltip
:browser/error?]))
(spec/def :browser/browser

8
src/status_im/ui/screens/contacts/default_dapps.cljs → src/status_im/ui/screens/browser/default_dapps.cljs
View File

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

23
src/status_im/ui/screens/browser/events.cljs
View File

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

26
src/status_im/ui/screens/browser/styles.cljs
View File

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

73
src/status_im/ui/screens/browser/views.cljs
View File

@ -11,7 +11,6 @@
[status-im.utils.js-resources :as js-res]
[status-im.ui.components.react :as components]
[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.i18n :as i18n]
[status-im.utils.ethereum.core :as ethereum]
@ -19,39 +18,42 @@
[status-im.ui.components.tooltip.views :as tooltip]
[status-im.models.browser :as model]
[status-im.utils.http :as http]
[status-im.ui.components.styles :as components.styles]))
(views/defview toolbar-content-dapp [name]
(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}]]]]))
[status-im.ui.components.styles :as components.styles]
[status-im.ui.components.colors :as colors]
[clojure.string :as string]))
(def browser-config
(reader/read-string (slurp "./src/status_im/utils/browser_config.edn")))
(defn toolbar-content [url browser]
(let [url-text (atom url)]
(defn toolbar-content [url {:keys [dapp? history history-index] :as browser} error? url-editing?]
(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 (styles/toolbar-content false)
[react/text-input {:on-change-text #(reset! url-text %)
:on-submit-editing #(re-frame/dispatch [:update-browser-on-nav-change
browser
(http/normalize-and-decode-url @url-text)
false])
:auto-focus (not url)
:placeholder (i18n/label :t/enter-url)
:auto-capitalize :none
:auto-correct false
:default-value url
:style styles/url-input}]]]))
[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 %)
: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
(http/normalize-and-decode-url @url-text)
false]))
:placeholder (i18n/label :t/enter-url)
:auto-capitalize :none
:auto-correct false
:auto-focus true
:default-value url
: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]
(reagent/as-element
@ -75,8 +77,8 @@
(views/defview browser []
(views/letsubs [webview (atom nil)
{:keys [address]} [:get-current-account]
{:keys [dapp? browser-id name] :as browser} [:get-current-browser]
{:keys [error? loading?]} [:get :browser/options]
{:keys [browser-id] :as browser} [:get-current-browser]
{:keys [error? loading? url-editing? show-tooltip]} [:get :browser/options]
rpc-url [:get :rpc-url]
network-id [:get-network-id]]
(let [can-go-back? (model/can-go-back? browser)
@ -92,9 +94,7 @@
(re-frame/dispatch [:navigate-back])
(when error?
(re-frame/dispatch [:remove-browser browser-id]))))]
(if dapp?
[toolbar-content-dapp name]
[toolbar-content url browser])
[toolbar-content url browser error? url-editing?]
[toolbar.view/actions [{:icon :icons/wallet
:icon-opts {:color :black}
:handler #(re-frame/dispatch [:navigate-to-modal :wallet-modal])}]]]
@ -142,6 +142,9 @@
[react/view {:flex 1}]
[react/touchable-highlight {:on-press #(.reload @webview)}
[icons/icon :icons/refresh]]]
(when-not dapp?
(when show-tooltip
[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}])])])))

2
src/status_im/ui/screens/contacts/events.cljs
View File

@ -2,7 +2,7 @@
(:require [re-frame.core :as re-frame]
[status-im.i18n :as i18n]
[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-macro :as handlers-macro]
[status-im.utils.js-resources :as js-res]

2
src/status_im/utils/http.cljs
View File

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

8
test/cljs/status_im/test/browser/events.cljs
View File

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