Question

我有一个使用google javascript API的HTML5应用。我最近发现这个应用程序需要在iframe沙盒环境中运行。我知道它似乎试图解决沙盒环境的目标;但是iframe仍然允许一些功能（参见下面的约束），这让我觉得有一些希望。

我在验证过程中遇到问题：加载后，google javascript api会在原始页面上添加一个iFrame（在我的情况下已经是iframe）并使用postMessage机制在windows之间进行通信。我想使用google api进行OAuth2.0身份验证过程以及查询API。

这是一个复制案例;我使用的是谷歌提供的authSample.html页面的简化版本。

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>original auth page</title>
</head>
<body>
    <button id="authorize-button">Authorize</button>
    <div id="content">Not authentified</div>
    <script type="text/javascript">
        var clientId = '<use yours>';
        var apiKey = '<use yours>';
        var scopes = 'https://www.googleapis.com/auth/analytics.readonly';
        var authorizeButton = document.getElementById('authorize-button');
        var resultDiv = document.getElementById('content');
        function handleClientLoad() {
            gapi.client.setApiKey(apiKey);
            authorizeButton.onclick = handleAuthClick;
        }

        function handleAuthResult(authResult) {
            if (authResult && !authResult.error) {
                makeApiCall();
            } else {
                resultDiv.innerHTML = "handleAuthResult Failed";
            }
        }

        function handleAuthClick(event) {
            gapi.auth.authorize({ client_id: clientId, scope: scopes, immediate: false }, handleAuthResult);
            return false;
        }

        function makeApiCall() {
            gapi.client.load('analytics', 'v3', function () {
                resultDiv.innerHTML = "api call successful";
            });
        }
    </script>
    <script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
</body>
</html>

最终用户将使用的包含页面如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>iframed page</title>
</head>
<body>
    <iframe id="8D681BA3DED5" width="400px" height="400px" 
            frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin ms-allow-popups allow-popups" marginheight="0" marginwidth="0" 
            name="MyTest" src="https://localhost:4000/AuthSample.html"></iframe>
</body>
</html>

显然，您必须在服务器authSample.html网址替换iframe的实际src后执行此页面。

如果您在不同的浏览器上运行它，您会注意到失败的不同行为。我试图利用弹出窗口被允许的事实，但似乎浏览器实现了不同的事实，即打开的窗口也应该在沙盒环境中打开。

我想避免编写自己的web服务进行身份验证。此外，我相信用户使用常用的Google网页（使用url accounts.google.com）更安全地输入凭据。如果您有想法，可以使用最近的浏览器，请随时提交。

谢谢

Answer 1

我找到了解决方案，基本思想是在弹出窗口中执行auth流程，该弹出窗口不会继承沙箱交叉源安全限制。实际上，沙箱具有以下属性 sandbox =“allow-scripts allow-forms allow-same-origin ms-allow-popups allow-popups”

我写了small blog post详细解释了解决方案。

编辑（2016年9月）：

在Keluro，我们发布了open source code sample以利用登录技术细节。它更多地用于连接到Azure AD / Office 365，但客户端使用 dialogApi ，弹出窗口作为后备可以重复使用。

Answer 2

自己验证用户并不困难，不必依赖api作为拐杖。通过几个php mysqli_connect调用以及通过phpmyadmin或其他东西访问数据库，您可以直接验证客户端。从那里，您可以轻松查询数据库以查找用户及其相关信息。

使用表单中的相同POST / GET方法，您将能够使用action="<?php echo $_SERVER["PHP_SELF"];?>"

在表单中创建php变量

然后在你的php源码中，

$userid = mysqli_real_escape_string($con,$_POST['FORMID'])

其中$ con是通过mysqli_connect

的连接字符串

在沙盒iframe环境中使用google javascript api

2 个答案: