iOS 分析一次有意思的需求——HTML程式碼注入

QiShare發表於2019-03-14
iOSHTML

級別： ★★☆☆☆
標籤：「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，列印結果如下

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連結:

github.com/chouheiwa/I…

結尾

本文純屬娛樂寫出，三方網站也只是以有指令碼為例注入測試。並無任何破解成分。

另外大家如果有什麼更好的建議或意見，也可以評論指出。

推廣一波個人的公眾號與部落格

公眾號

小編微信：可加並拉入《QiShare技術交流群》。

iOS 分析一次有意思的需求——HTML程式碼注入

關注我們的途徑有：
QiShare(簡書)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公眾號)

推薦文章：
iOS 常用除錯方法：LLDB命令
iOS 常用除錯方法：斷點
iOS 常用除錯方法：靜態分析
iOS訊息轉發
iOS 自定義拖拽式控制元件：QiDragView
iOS 自定義卡片式控制元件：QiCardView
iOS Wireshark抓包
iOS Charles抓包
奇舞週刊

相關文章