級別： ★★☆☆☆
標籤：「HTML程式碼注入」「WKScriptMessageHandler」「iOS與JS互動」
作者： chouheiwa
審校： QiShare團隊
有個朋友問了我一個問題:
他們通過WKWebView，訪問了一個其他的頁面，然後希望原生獲得使用者的輸入資訊。
其實，我之前接觸WKWebView並不多，但是這個問題我覺得很有意思。這篇文章便是我解決這個問題的全部思路，與最終的解決辦法。
思路分析 與 程式碼實踐
這個問題其實很具象了，就是希望原生獲得H5的使用者輸入內容(這樣子感覺有些不地道-_-)
接下來我們就需要分析這個需求了。
首先我們先需要抓住兩個點，1個是H5，1個是原生。
所以這個問題現在被我拆分出了1個額外的問題
HTML能否和原生互動?如何進行?
這個問題其實是一個很關鍵的問題，因為我們只有實現了原生和HTML的互動，才能獲得相關資訊(這裡我們假定網頁是我們自己寫的，完全受操縱於我們自己)
於是便搜尋資料，發現WKWebView提供了一個很方便的互動渠道WKScriptMessageHandler，我們通過對WKWebView進行相關的定製操作便可以解決。
我們先建立一個工程，這裡我把整個工程命名為InjectHTML
為了防止迴圈引用，我們先構建一箇中間層ScriptHandler
import Foundation
import WebKit
// 這裡我們使用一箇中間層來解除迴圈WebView和Controller間的迴圈引用問題
class ScriptHandler: NSObject, WKScriptMessageHandler {
weak var delegate: WKScriptMessageHandler?
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
delegate?.userContentController(userContentController, didReceive: message)
}
init(delegate: WKScriptMessageHandler? = nil) {
self.delegate = delegate
}
}
複製程式碼在ViewController中的程式碼
import UIKit
import WebKit
class ViewController: UIViewController {
var webview: WKWebView!
static let scriptKey = "InjectHTML"
override func viewDidLoad() {
super.viewDidLoad()
//初始化 Configuration
let configuration = WKWebViewConfiguration()
configuration.userContentController = WKUserContentController()
// 給Configuration 增加一個js script處理器
// 採用了中間層的因素，避免迴圈引用導致無法釋放問題
configuration.userContentController.add(ScriptHandler(delegate: self), name: ViewController.scriptKey)
webview = WKWebView(frame: view.bounds, configuration: configuration)
view.addSubview(webview)
// 設定導航處理器
webview.navigationDelegate = self
// 我們先從本地讀網頁方便自我改動測試
let fileURL = Bundle.main.url(forResource: "index", withExtension: "html")
// 載入網頁
webview.loadFileURL(fileURL!, allowingReadAccessTo: fileURL!)
}
}
extension ViewController: WKScriptMessageHandler {
// 遵守協議
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
// 因html可能傳遞多種型別名稱，我們這裡須指定key
if message.name == ViewController.scriptKey {
guard let dic = message.body as? [String: String] else {
return
}
// 交給真實處理解析函式
receiveInputValue(para: dic)
}
}
// 解析函式可以負責更具體的內容，因為demo，故此只是列印
func receiveInputValue(para: [String: String]) {
let title = para["title"] ?? "無值"
let message = para["message"] ?? "無值"
let `id` = para["id"] ?? "無值"
print("title: \(title)")
print("message: \(message)")
print("id: \(id)")
}
}
// 遵循導航協議，方便我們知道何時網頁載入完成
extension ViewController: WKNavigationDelegate {
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
}
}
複製程式碼這樣子我們的ViewController就構建完成，訪問了一個本地index.html的網頁。
我們在專案中新建一個html檔案(從外界拖入也可)
html頁面只用於測試，因此我們也就不做類似自適應之類的css樣式了
html程式碼如下:
<html>
<head>
<title>注入測試網頁</title>
</head>
<body bgcolor="#FFFFFF">
<h1>Test for inject js</h1>
<!--新增一個button按鈕用以測試點選事件-->
<button onclick="onClickTest()">Test Button</button>
</body>
<script type="text/javascript">
function onClickTest() {
// 注意，這裡是需要注意的是我們在ViewController中定義的Script Name需要作為messageHandler的一個屬性
window.webkit.messageHandlers.InjectHTML.postMessage({title: 'test title', message:'test message', id: 'test id'})
// 若我們未註冊此名稱，則無法觸發對應回撥，postMessage中的引數可傳為任意的，但我們在原生中定義為字典了，則我們在這裡需要傳入字典
window.webkit.messageHandlers.InjectHTMLS.postMessage({title: 'test title', message:'test message', id: 'test id'})
}
</script>
</html>
複製程式碼其中對應部分均已加上註釋，接下來我們來跑一遍測試結果:
title: test title
message: test message
id: test id
當我們點選WebView上的按鈕時候，我們可以列印出來對應的js端返回結果，說明成功了。
所以，這個需求我們可以說解析了3分之1了。
接下來我們需要繼續分析了，這個需求需要我們能監控所有的輸入控制元件。
所以我們需要從網頁端剖析了，問題迴歸HTML端。
我們繼續拆解問題，我們既然要監控所有的輸入控制元件，那麼我們首先就得知道，我們能否獲得所有的輸入控制元件(甚至說，我們能否獲得頁面的所有控制元件，然後進行遍歷過濾也可以)
HTML如何獲取指定元素
這個問題，通過搜尋與詢問前端朋友得知:
HTML提供了對應的API，直接獲取指定標籤的內容，因為我們是要獲得輸入框，輸入框在HTML中的標籤是input。所以我們獲得頁面中所有輸入框元素的方法就已經出來了
// 獲得所有input陣列
var inputs = document.getElementsByTagName("input")
複製程式碼那麼問題就迎刃而解了，然後我們還是需要測試一下，畢竟萬一這個方法不好用怎麼辦？
這裡就不在手機端進行測試，因為模擬器還是比較費事的，並且我們如果想列印console日誌的話，看起來也不那麼容易，因此我們將接下來的測試網頁步驟，直接挪到Google Chrome上。
這裡還是給出對應的html測試程式碼
<html>
<head>
<title>注入測試網頁</title>
</head>
<body bgcolor="#FFFFFF">
<h1>Test for inject js</h1>
<!--新增一個button按鈕用以測試點選事件-->
<button onclick="onClickTest()">Test Button</button>
<input type="text" placeholder="Test Input1">
<input type="text" placeholder="Test Input2">
</body>
<script type="text/javascript">
// 獲得所有input陣列
var inputs = document.getElementsByTagName("input");
// 列印input陣列
console.log(inputs)
</script>
</html>
複製程式碼然後使用瀏覽器(下文瀏覽器均為Google Chrome)開啟。
我們按Command+Shift+c即可開啟頁面審查和網頁控制檯，在這裡我們看見了我們執行網頁的log，列印結果如下
說明我們獲取input成功了
接下來我們只需要進行過濾即可獲得我們需要的頁面元素了(如過濾checkbox之類的)
然後接下來新的問題來了
JS程式碼如何動態新增事件
我們已經通過js程式碼獲得input了，所以問題就變到了如何新增點選事件。畢竟原生的輸入框還有至少監聽輸入事件，或者監聽輸入完成類的，那麼JS端理應也存在。
這裡感謝菜鳥教程，查詢到了一個函式addEventListener
這個函式的功能就是給HTTP的DOM元素增加對應的事件，也就是說我們可以通過這個方法額外的增加點選事件。
同時，新增加的事件並不會覆蓋原有事件，一個元素可以擁有多個同樣的事件(如一個按鈕可以同時出發兩個onClick事件)
這個函式給了我們新的天地啊。因此我們可以給input增加事件，這裡我選擇了兩個事件，一個是input事件(輸入框文字發生變化)，一個是change事件(輸入框失去焦點)
我們修改上文的html程式碼，修改結果如下:
<html>
<head>
<title>注入測試網頁</title>
</head>
<body bgcolor="#FFFFFF">
<h1>Test for inject js</h1>
<!--新增一個button按鈕用以測試點選事件-->
<button onclick="onClickTest()">Test Button</button>
<!--這裡給input增加一些回撥-->
<input type="text" placeholder="Test Input1" onchange="onChange()" oninput="onInput()">
<input type="text" placeholder="Test Input2" onchange="onChange()" oninput="onInput()">
</body>
<script type="text/javascript">
// 這裡是為了測試原有對應事件是否會被覆蓋
function onChange(input) {
console.log("原有 失去焦點");
console.log(input);
}
// 這裡是為了測試原有對應事件是否會被覆蓋
function onInput(input) {
console.log("原有 鍵盤輸入");
console.log(input);
}
</script>
<script type="text/javascript">
function demoOnchange(input) {
console.log("失去焦點");
console.log(input);
}
function demoOnInput(input) {
console.log("鍵盤輸入");
console.log(input);
}
function demoSet() {
var inputs=document.getElementsByTagName("input");
for(var i=0;i < inputs.length;i++) {
var input = inputs[i];
// 這裡我們增加一些過濾條件，因為我們有時並不需要所有的input，這裡我只是允許了text(文字輸入框)
if(input.type=="text") {
input.addEventListener('change', demoOnchange);
input.addEventListener('input', demoOnInput)
}
}
}
demoSet();
</script>
</html>
複製程式碼繼續進入瀏覽器測試網址，我們可以看到，當我們輸入的時候，同時觸發了兩個回撥，說明後期注入有效。
接下來我們需要繼續考慮，我們需要能讓原生接收到對應事件。
原生如何收到對應事件？
我們在上文中已經知道了js如何呼叫原生，那麼這一步我們就可以直接實現了。
這一步還是更改html程式碼：
<html>
<head>
<!--HTML頁面內容需告知為utf8，否則會出現亂碼問題-->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>注入測試網頁</title>
</head>
<body bgcolor="#FFFFFF">
<h1>Test for inject js</h1>
<!--新增一個button按鈕用以測試點選事件-->
<button onclick="onClickTest()">Test Button</button>
<!--這裡給input增加一些回撥-->
<input type="text" placeholder="Test Input1" onchange="onChange()" oninput="onInput()">
<input type="text" placeholder="Test Input2" onchange="onChange()" oninput="onInput()">
</body>
<script type="text/javascript">
// 這裡是為了測試原有對應事件是否會被覆蓋
function onChange(input) {
console.log("原有 失去焦點");
console.log(input);
}
// 這裡是為了測試原有對應事件是否會被覆蓋
function onInput(input) {
console.log("原有 鍵盤輸入");
console.log(input);
}
</script>
<script type="text/javascript">
function demoOnchange(input) {
// 這裡，input是一個點選事件，target才是真正的input元素，我們可以通過此任意獲取input的相關資訊，如class，id以及其他的一些資訊等等
window.webkit.messageHandlers.InjectHTML.postMessage({title: '輸入框失去焦點', message:input.target.value, id: input.target.id});
}
function demoOnInput(input) {
window.webkit.messageHandlers.InjectHTML.postMessage({title: "輸入框正在輸入", message:input.target.value, id: input.target.id});
}
function demoSet() {
var inputs=document.getElementsByTagName("input");
for(var i=0;i < inputs.length;i++) {
var input = inputs[i];
// 這裡我們增加一些過濾條件，因為我們有時並不需要所有的input，這裡我只是允許了text(文字輸入框)
if(input.type=="text") {
input.addEventListener('change', demoOnchange);
input.addEventListener('input', demoOnInput)
}
}
}
demoSet();
</script>
</html>
複製程式碼重新啟動剛才的專案App，在輸入框中輸入，可以看到控制檯中返回了資料：
title: 輸入框正在輸入
message: 1
id:
title: 輸入框失去焦點
message: 1
id:
我們的列印出來了。到這裡我們自有網頁的測試全部通過，那麼就剩下最後一步了，如何在三方網頁上執行?
JS程式碼注入
WKWebView既然能讓js呼叫OC，那麼OC能否呼叫js程式碼呢?
答案是可以的，WKWebView提供給我們原生的方法可以動態的執行js程式碼
webview.evaluateJavaScript(someTest, completionHandler: closure)
複製程式碼這個方法可以讓我們動態的執行由原生生成的js程式碼。
那麼我們需要執行什麼方法呢?
自然就是我們上述研究出來的獲取HTML的元素並增加事件回撥的事情啊。
這裡我們在專案中新建一個js檔案，方便我們以後修改js程式碼，名稱就叫Inject.js
從專案中的html檔案中把如下方法複製進來
function demoOnchange(input) {
window.webkit.messageHandlers.InjectHTML.postMessage({title: "輸入框失去焦點", message:input.target.value, id: input.target.id});
}
function demoOnInput(input) {
window.webkit.messageHandlers.InjectHTML.postMessage({title: "輸入框正在輸入", message:input.target.value, id: input.target.id});
}
function demoSet() {
var inputs=document.getElementsByTagName("input");
for(var i=0;i < inputs.length;i++) {
var input = inputs[i];
if(input.type=="text") {
input.addEventListener('change', demoOnchange);
input.addEventListener('input', demoOnInput)
}
}
}
demoSet();
複製程式碼然後我們決定採用直接從專案中讀取檔案的形式將js檔案轉成字串，我們在ViewController中的
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!)
函式中加入js程式碼注入，使我們每次載入成功網頁都注入對應的js程式碼
完整函式如下:
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
guard let jsString = try? String(contentsOfFile: Bundle.main.path(forResource: "Inject", ofType: "js") ?? "") else {
// 沒有讀取出來則不執行注入
return
}
// 注入語句
webView.evaluateJavaScript(jsString, completionHandler: { _, _ in
print("程式碼注入成功")
})
}
複製程式碼我們將應用程式中的index.html網頁中對應的js程式碼刪除。使這個網頁更像是一個三方網頁(不會主動支援該功能)。這裡，就不再詳述HTML程式碼了。
我們執行測試後發現，測試網頁回撥成功
三方網頁整合測試
當我們以三方網頁測試的時候，便會發現這樣或者那樣的問題。
我們以 掘金 為例，試試我們的自有指令碼。我們的js程式碼在掘金網上的登入竟然失效了。
但是作為程式，函式是具有冪等性的（在相同情況下進行無限次的操作，結果一定相同）。那麼只能是我們的環境出現了問題，而不是我們的js程式碼失敗了。
所以我們需要觀察環境究竟哪裡出現問題了。
首先在我們的自有測試網站上，輸入框是直接就存在的。但是在掘金上卻不是，它需要我們點選登入按鈕後作為彈框出現。而我們的js程式碼注入是在網頁渲染完成，因此我們接下來嘗試給我們的頁面增加一個按鈕。點選的時候再進行js程式碼注入
為了簡化程式碼，我們給ViewController加入了一個導航欄，並在導航欄右上角增加一個注入按鈕。(導航控制器通過StoryBoard增加)
我們在ViewController的viewDidLoad中增加如下程式碼:
self.navigationItem.rightBarButtonItem = UIBarButtonItem(title: "注入", style: .plain, target: self, action: #selector(injectJS))
複製程式碼同時在類中增加如下方法
@objc func injectJS() {
guard let jsString = try? String(contentsOfFile: Bundle.main.path(forResource: "Inject", ofType: "js") ?? "") else {
// 沒有讀取出來則不執行注入
return
}
// 注入語句
webview.evaluateJavaScript(jsString, completionHandler: { _, _ in
print("程式碼注入成功")
})
}
複製程式碼重新執行程式碼
這陣我們點選網頁上的登入按鈕，隨後點選導航欄上注入
然後再進行輸入，我們就可以看見控制檯列印出我們正在輸入的賬戶名和密碼了-_-
如果你問我怎麼自動注入？我給的思路就是獲取到登入的元素，然後再多做一步回撥，我們可以先注入一次js再為我們的目標註入js。
總結
其實這篇文章的主要目的介紹如何分析具體的需求，並將其轉換為程式碼。根本在於從一個相對於具象的需求中，我們一步一步抽離問題，組成更細小的問題的組合，然後逐步的去實驗小問題的可行性，最終完成複雜問題
所有的需求均可以如此實現，只是有的我們可以實現，有的問題分析到最後發現，細節無法實現或實現起來成本過高(比如平安銀行的自動識別手機殼顏色)。
當我寫完這篇文章的demo的時候發現，我們的使用者資訊實在是太容易洩漏了，比如我的掘金賬戶和密碼，如果在別人app上的內嵌網頁登入的話，不是直接就洩漏了嗎(手動滑稽)。
ps:這篇文章可以有個別名:震驚！！！你還敢在你的手機上登入賬戶麼
本文所述demo連結:
結尾
本文純屬娛樂寫出，三方網站也只是以有指令碼為例注入測試。並無任何破解成分。
另外大家如果有什麼更好的建議或意見，也可以評論指出。
推廣一波個人的公眾號與部落格
小編微信：可加並拉入《QiShare技術交流群》。
關注我們的途徑有：
QiShare(簡書)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公眾號)
推薦文章：
iOS 常用除錯方法：LLDB命令
iOS 常用除錯方法：斷點
iOS 常用除錯方法：靜態分析
iOS訊息轉發
iOS 自定義拖拽式控制元件：QiDragView
iOS 自定義卡片式控制元件：QiCardView
iOS Wireshark抓包
iOS Charles抓包
奇舞週刊