JavaScript
処理開始前にデータをエンコーディング
HTML、JavaScript、URL文字列などのFORM内に出力する前に、Amazonから受け取ったデータをエンコードすることを推奨します。出力エンコーディングに悪意のあるスクリプトやWebサイトで実行可能なスクリプトを除外することを確実にします。
Open Web Application Security Project(OWASP) APIであるESAPIは、無償で提供され、オープンソースのアプリケーションセキュリティコントロールライブラリです。これを利用することでローリスクなアプリケーションを素早く記述できます。この標準ライブラリをアウトプットエンコードに利用してください。
次のサンプルコードは、最も汎用タイプのデータエンコード方法です。
- HTML：
String safe = ESAPI.encoder().encodeForHTML( request.getParameter( "input" ) ); - widthやnameなどのHTML属性の値：
String safe = ESAPI.encoder().encodeForHTMLAttribute( request.getParameter( "input" ) ); - URLパラメータ値：
String safe = ESAPI.encoder().encodeForURL( request.getParameter( "input" ) ); - JavaScriptデータ値：
String safe = ESAPI.encoder().encodeForJavaScript( request.getParameter( "input" ) );
Webページにcallbackとwidgets.jsコードを追加
Webサイトに埋め込まれたウィジェットを正しく表示するためには、onAmazonLoginReadyコールバックのハンドラーを提供し、Amazon PayのJavaScriptファイルであるWidgets.jsのリファレンスをWebページのソースコードに追加しなければなりません。Amazon Payウィジェットを表示したいWebページにてこれを実行しなければなりません。
Amazonから提供されているJavaScriptのコンテンツをローカルコピーや変更しないことにしてください。これはウィジェットのレンダリングや機能的エラーなど意図しない結果を引き起こします。
非同期JavaScript
Amazon Payはもっと速くWebページでレンダリングするために、非同期ローディングJavaScriptを限定的に提供しております。非同期ローディングの利用を選択する場合では、スクリプトタグ内の非同期属性だけサポートしています。
非同期でAmazon Payボタンをロードするためには、次の通りにします。
- ページのhead部にあるonAmazonLoginReadyコールバックにclientIdをセットします。
- ページのbody部に、ボタンまたはウィジェットをレンダリングするJavaScriptの前に LoginWithAmazonの<div>を配置します。
- window.onAmazonPaymentsReady機能を定義します。この関数の中にJavaScriptのリファレンスを移動します。
- window.onAmazonPaymentsReady関数の次にasync属性をWidgets.jsのスクリプトタグに追加します。
タイミングの問題を防止するために、スクリプトタグは上記の順番に配置する必要があります。
次のサンプルコードは、非同期のAmazon Payボタンをロードする方法です。
<div id="PaymentsWidget"></div>
<script>
window.onAmazonLoginReady = function(){
amazon.Login.setClientId('YOUR_CLIENT_ID');
};
window.onAmazonPaymentsReady = function() {
// Render the button here.
};
</script>
<script async='async' type='text/javascript'
src='https://static-fe.payments-amazon.com/OffAmazonPayments/jp/sandbox/lpa/js/Widgets.js'>
</script>
上記のサンプルはSANDBOX環境です。本番環境にコードを移行する場合は、適宜URLを変更してください。
注意 ：
- ボタンまたはウィジェットをレンダリングする前に対応するdiv要素を配置してください。ボタンとウィジェットはonAmazonPaymentsReadyコールバック内でレンダリングして、widgets.jsがロードされてから呼び出されます。
- widgets.jsのローディングは一度だけ発生し、widgets.jsがロードされた<script>タグ内のasync属性が必要です。
非同期属性のスクリプトタグの詳しい情報はを Mozilla Developer Network Script Tag Summary を参照してください。