HTML5+jQuery+phonegap 移动应用安全

Posted 2023-03-08

技术标签:

【中文标题】HTML5+jQuery+phonegap 移动应用安全【英文标题】：HTML5+jQuery+phonegap mobile app security 【发布时间】：2012-08-23 16:01:06 【问题描述】：

我是这个领域的新手，我正在开发一个html5 移动应用程序，它调用一个宁静的网络服务 api 并交换 JSON 对象。

我想对客户端进行一次身份验证，并提供一个密钥/令牌，之后可以使用该密钥/令牌，直到预定义的到期日期。我有 4 个问题：

如何保护服务器端 Web 服务 api？有什么工具吗？我可以使用本地存储来存储密钥/令牌吗？我可以在客户端使用哪些 phonegap 安全工具？在这种情况下如何使用 OAUTH？

【问题讨论】：

【参考方案1】：

如何保护服务器端 webservices api？有什么工具吗？ 取决于编写 Web 服务的语言，php 具有用于创建 Web 服务 / nusoap 等的 zend 框架。因此所有语言都提供了有关如何保护 Web 服务的信息。

我可以使用本地存储来存储密钥/令牌吗？ 是的，您可以使用本地存储查看 phonegap documentation

我可以在客户端使用哪些 phonegap 安全工具？ 我认为没有，但您可以搜索一些插件或创建自己的插件。取决于您要实现哪种安全性。

在这种情况下如何使用 OAUTH？ 这是OAuth 的库，这似乎很有帮助。您可以创建一个电话间隙插件来与库交互或使用 javascript oauth library（它也带有示例）。

【讨论】：

谢谢你，后端是用Java写的【参考方案2】：

如何保护服务器端 webservices api？有什么工具吗？

OAuth 可能对您的需求来说太过分了，请确认您确实需要使用如此强大（且复杂）的标准。

您可能使用的 PHP 服务器端软件的两个示例：

Solberg-OAuth SimpleSAMLphp

我可以使用本地存储来存储密钥/令牌吗？

是的！请注意，您必须使用 OAuth 2.0 隐式授权流程才能在客户端获取令牌。

我可以在客户端使用哪些 phonegap 安全工具？

ChildBrowser 是一个插件，用于为身份验证过程打开单独的浏览器窗口。

我编写了一个可以为您执行 OAuth 2.0 的 JavaScript 库 JSO。其他库也存在。

https://github.com/andreassolberg/jso

在这种情况下如何使用 OAUTH？

将 JSO 与 Phonegap 和 ChildBrowser 结合使用

在混合环境下移动设备上运行的WebApps中使用JSO进行OAuth 2.0授权是JSO的一个重要部署场景。

这里是关于使用 Phonegap for ios 设置 JSO 以及使用 Google 配置 OAuth 2.0 的详细说明。您也可以将它与 Facebook 或其他 OAuth 提供商一起使用。

准备工作

从 App Store 和 iOS 开发工具包安装 XCode 安装Phonegap 2.0, Cordova 2.0

设置应用

创建一个新的应用程序

./create  /Users/andreas/Sites/cordovatest no.erlang.test "CordovaJSOTest"

安装子浏览器

原始的 ChildBrowser 插件可在此处获得。

https://github.com/purplecabbage/phonegap-plugins/tree/master/iPhone/ChildBrowser

但是，它不与 Cordova 2.0 兼容。相反，您可以使用应该与 Cordova 2.0 一起使用的 ChildBrowser 的这个分支：

https://github.com/Shereef/ChildBrowserOnCordova200

你需要做的是复制这些文件：

https://github.com/Shereef/ChildBrowserOnCordova200/tree/master/ChildBrowserOnCordova200/Plugins

通过拖放到 XCode 中的 Plugins 文件夹中，进入您的 WebApp 项目区域。

现在您需要编辑在您的 WebApp 项目区域中找到的 Resources/Cordova.plist 中的文件。

在此文件中，您需要在 ExternalHosts 中添加一个带有“*”的数组条目，在 Plugins 中添加两个条目：

ChildBrowser -> ChildBrowser.js ChildBrowserCommand -> ChildBrowserCommand

如屏幕截图所示。

_{（来源：erlang.no）}

使用 ChildBrowser 设置您的 WebApp

我建议在继续使用 OAuth 之前测试并验证您是否让 ChildBrowser 正常工作。

在您的 index.html 文件中尝试此操作，并使用模拟器进行验证。

<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8" src="ChildBrowser.js"></script>
<script type="text/javascript">

    var deviceready = function() 
        if(window.plugins.childBrowser == null) 
            ChildBrowser.install();
        
        window.plugins.childBrowser.showWebPage("http://google.com");
    ;

    document.addEventListener('deviceready', this.deviceready, false);

</script>

设置 JSO

下载最新版本的JSO：

https://github.com/andreassolberg/jso

那里也有关于 JSO 的文档。

回调 URL 需要指向某个地方，一种方法是将回调 HTML 页面放在某个地方，尽管是您信任的主机，但在哪里并不重要。并在那里放一个漂亮的空白页：

<!doctype html>
<html>
    <head>
        <title>OAuth Callback endpoint</title>
        <meta charset="utf-8" />
    </head>
    <body>
        Processing OAuth response...
    </body>
</html>

现在，设置您的应用程序索引页面。这是一个工作示例：

<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8" src="ChildBrowser.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="jso/jso.js"></script>
<script type="text/javascript">

    var deviceready = function() 

        var debug = true;

        /*
         * Setup and install the ChildBrowser plugin to Phongap/Cordova.
         */
        if(window.plugins.childBrowser == null) 
            ChildBrowser.install();
        

        // Use ChildBrowser instead of redirecting the main page.
        jso_registerRedirectHandler(window.plugins.childBrowser.showWebPage);

        /*
         * Register a handler on the childbrowser that detects redirects and
         * lets JSO to detect incomming OAuth responses and deal with the content.
         */
        window.plugins.childBrowser.onLocationChange = function(url)
            url = decodeURIComponent(url);
            console.log("Checking location: " + url);
            jso_checkfortoken('facebook', url, function() 
                console.log("Closing child browser, because a valid response was detected.");
                window.plugins.childBrowser.close();
            );
        ;

        /*
         * Configure the OAuth providers to use.
         */
        jso_configure(
            "facebook": 
                client_id: "myclientid",
                redirect_uri: "https://myhost.org/callback.html",
                authorization: "https://www.facebook.com/dialog/oauth",
                presenttoken: "qs"
            
        , "debug": debug);

        // For debugging purposes you can wipe existing cached tokens...
        // jso_wipe();

        // jso_dump displays a list of cached tokens using console.log if debugging is enabled.
        jso_dump();

        // Perform the protected OAuth calls.
        $.oajax(
            url: "https://graph.facebook.com/me/home",
            jso_provider: "facebook",
            jso_scopes: ["read_stream"],
            jso_allowia: true,
            dataType: 'json',
            success: function(data) 
                console.log("Response (facebook):");
                console.log(data);
            
        );

    ;

    document.addEventListener('deviceready', this.deviceready, false);

</script>

【讨论】：

感谢您的快速回复，包括代码和链接... Web 服务 api 和后端是 java。我试图使用 wso2 api manager 来发布服务，但仍在检查可行性。有什么想法吗？

以上是关于HTML5+jQuery+phonegap 移动应用安全的主要内容，如果未能解决你的问题，请参考以下文章

使用 jQuery Mobile、Django 和 Phonegap 构建移动应用程序

GPS 追踪器与 jQuery 移动、PhoneGap 和谷歌地图

关于DreamWeaver CS6.0 + PhoneGap 之移动开发环境搭建

使用html5开发移动端应用采用啥框架

Javascript / HTML5 - 用于网络桌面/移动应用程序的音频流录制

HTML5移动开发之路（24）—— PhoneGap Android开发环境搭建