Google JavaScript APIを使用する HTML5 アプリがあります。最近、このアプリは iframe サンドボックス環境で実行する必要があることを発見しました。サンドボックス環境のまさに目標を回避しようとしているように見えることはわかっています。ただし、一部の機能は iframe で引き続き許可されているため (以下の制約を参照)、希望があると思います。
認証プロセス中に問題に直面しています。読み込まれると、Google JavaScript API は元のページ (私の場合は既に iframe です) に iFrame を追加し、postMessage メカニズムを使用してウィンドウ間で通信します。OAuth2.0 認証プロセスと API のクエリに Google 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>
明らかに、iframe の実際の src をサーバーの authSample.html URL に置き換えた後、このページを実行する必要があります。
さまざまなブラウザーで実行すると、失敗のさまざまな動作に気付くでしょう。ポップアップが許可されているという事実を悪用しようとしましたが、開いたウィンドウもサンドボックス環境で開く必要があるという事実をブラウザーが異なる方法で実装しているようです。
認証用に独自の Web サービスを作成することは避けたいと思います。さらに、ユーザーは通常の Google Web ページ (URL は accounts.google.com) を使用して資格情報を入力する方が安全だと思います。最近のブラウザで動作する可能性のあるアイデアがあれば、遠慮なく提出してください。
ありがとうございました