在沙盒iframe环境中使用Google javascript API

贝诺瓦·帕特拉

我有一个使用Google javascript API的HTML5应用我最近发现,该应用需要在iframe沙盒环境中运行。我知道,这看起来像是在解决沙盒环境的目标。但是,iframe仍然允许使用某些功能(请参阅下面的约束),这使我认为存在一些希望。

我在身份验证过程中遇到了问题:加载时,google javascript api在原始页面上添加了一个iFrame(在我的情况下已经是一个iframe),并使用postMessage机制在窗口之间进行通信。我想将Google api用于OAuth2.0身份验证过程以及查询API。

这是一个复制案例;我使用的是google提供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)输入凭据,从而更加安全。如果您有想法,可以在最近的浏览器中使用,请随时提交。

谢谢

贝诺瓦·帕特拉

我找到了一个解决方案,其基本思想是在不会继承沙箱跨源安全限制的弹出窗口中进行身份验证流程。实际上,沙盒具有以下属性sandbox =“ allow-scripts allow-forms allow-same-origin ms-allow-popups allow-popups”

我写了一个小博客文章,详细解释了解决方案。

编辑(2016年9月):

Keluro,我们发布了一个开放源代码示例,以利用登录技术。它更多地用于连接到Azure AD / Office 365,但是使用dialogApi和作为后退弹出窗口的客户端可以重复使用。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Google Directory API是否有沙盒

来自分类Dev

使用沙盒帐户的 API 错误

来自分类Dev

检测JavaScript是否在沙盒Iframe中执行?

来自分类Dev

在Cordova / Phonegap中使用Google API javascript

来自分类Dev

在JavaScript中使用Google Contact API添加联系人

来自分类Dev

在JavaScript中使用Google Index API时出现错误请求

来自分类Dev

通过API找不到沙盒用户

来自分类Dev

Google云端硬盘/ Dropbox API / RemoteStorage应用的目录沙盒访问?

来自分类Dev

Google跟踪代码管理器自定义模板沙盒Javascript问题

来自分类Dev

Paypal REST API:在沙盒模式下使用哪些凭据来批准付款?

来自分类Dev

Google Maps API的JavaScript框架

来自分类Dev

Google API:授权的JavaScript来源

来自分类Dev

Google Map javascript API密钥

来自分类Dev

Google javascript API返回404

来自分类Dev

流星Google Maps JavaScript API

来自分类Dev

使用Javascript查询Google Distance Matrix API

来自分类Dev

使用Javascript查询Google Distance Matrix API

来自分类Dev

使用JavaScript的Twitter登录API

来自分类Dev

使用JavaScript的Twitter登录API

来自分类Dev

Lua为什么“要求”在沙盒环境中使用不安全?

来自分类Dev

使用Google Maps Javascript API在外部函数中使用内部函数变量

来自分类Dev

在JavaScript中使用API v3检索Google日历事件

来自分类Dev

如何在不设置环境变量的情况下使用Javascript向Google Sheets API进行身份验证?

来自分类Dev

使用JavaScript更改要在JSON API中使用的XML

来自分类Dev

Google Maps Javascript API与Google Maps Embed API

来自分类Dev

如何在Javascript中使用Wordnik API获得随机单词?

来自分类Dev

在AWS Amplify REST API(Javascript)中使用路径参数

来自分类Dev

在JavaScript中使用Computer Vision Thumbnails API响应数据

来自分类Dev

在 Javascript 中使用 fetch API 接收和处理 JSON

Related 相关文章

  1. 1

    Google Directory API是否有沙盒

  2. 2

    使用沙盒帐户的 API 错误

  3. 3

    检测JavaScript是否在沙盒Iframe中执行?

  4. 4

    在Cordova / Phonegap中使用Google API javascript

  5. 5

    在JavaScript中使用Google Contact API添加联系人

  6. 6

    在JavaScript中使用Google Index API时出现错误请求

  7. 7

    通过API找不到沙盒用户

  8. 8

    Google云端硬盘/ Dropbox API / RemoteStorage应用的目录沙盒访问?

  9. 9

    Google跟踪代码管理器自定义模板沙盒Javascript问题

  10. 10

    Paypal REST API:在沙盒模式下使用哪些凭据来批准付款?

  11. 11

    Google Maps API的JavaScript框架

  12. 12

    Google API:授权的JavaScript来源

  13. 13

    Google Map javascript API密钥

  14. 14

    Google javascript API返回404

  15. 15

    流星Google Maps JavaScript API

  16. 16

    使用Javascript查询Google Distance Matrix API

  17. 17

    使用Javascript查询Google Distance Matrix API

  18. 18

    使用JavaScript的Twitter登录API

  19. 19

    使用JavaScript的Twitter登录API

  20. 20

    Lua为什么“要求”在沙盒环境中使用不安全?

  21. 21

    使用Google Maps Javascript API在外部函数中使用内部函数变量

  22. 22

    在JavaScript中使用API v3检索Google日历事件

  23. 23

    如何在不设置环境变量的情况下使用Javascript向Google Sheets API进行身份验证?

  24. 24

    使用JavaScript更改要在JSON API中使用的XML

  25. 25

    Google Maps Javascript API与Google Maps Embed API

  26. 26

    如何在Javascript中使用Wordnik API获得随机单词?

  27. 27

    在AWS Amplify REST API(Javascript)中使用路径参数

  28. 28

    在JavaScript中使用Computer Vision Thumbnails API响应数据

  29. 29

    在 Javascript 中使用 fetch API 接收和处理 JSON

热门标签

归档