【React/Next.js】署名バージョン4でIAM認証を突破!


Reactで署名バージョン4(Signature V4)を作成してIAM認証を突破したいんだけど、やり方がわからないんだよね…
こんな疑問にお答えします。
- 本記事の執筆者
本記事を書いている僕はエンジニア歴7年です。
Reactは業務経験があるので、かなり有益な情報を発信できるかと思います。
結論、署名バージョン4でIAM認証を突破するのは非常に簡単です。


本記事を読んでもらえれば、Reactで署名バージョン4を作成してIAM認証を突破する方法が理解できるので、早速見ていきましょう!



すぐ読み終わるので、是非最後まで読んでみてください。
\ 年収が2倍に?! /
署名バージョン4でIAM認証を突破する方法
早速ですが、署名バージョン4でIAM認証を突破する方法を解説します。
前提
前提は以下になります。
- 一時クレデンシャル情報はCognitoのIDプールから取得する
- IAM認証付きのAPIがある ※API Gatewayを利用
CognitoのIDプールとAPI Gatewayの作成については「【Python】ID PoolでAPI GatewayのIAM認証を突破する方法」で解説しています。


React/Next.jsのソースコード
React/Next.jsのソースコードは下記になります。
import axios from "../axios";
import Head from 'next/head'
import Image from 'next/image'
import React, { useState, useEffect } from 'react'
import styles from '../styles/Home.module.css'
import {
CognitoIdentityClient,
GetCredentialsForIdentityCommand,
GetCredentialsForIdentityCommandInput,
GetIdCommand,
GetIdInput,
} from "@aws-sdk/client-cognito-identity";
import { HttpRequest } from '@aws-sdk/protocol-http';
import { Sha256 } from '@aws-crypto/sha256-universal';
import { SignatureV4 } from '@aws-sdk/signature-v4';
export default function Auth() {
const [response, setResponse] = useState('');
useEffect(() => {
auth();
});
const auth = async (): Promise<void> => {
const apiUrl = new URL('https://*****.execute-api.ap-northeast-1.amazonaws.com/api/authorizer/');
const client = new CognitoIdentityClient({ region: 'ap-northeast-1' });
// IDプールからidentityIdを取得する
const idInput: GetIdInput = {
IdentityPoolId: 'ap-northeast-1:*****',
};
const id = await client.send(new GetIdCommand(idInput));
// identityIdを元に、クレデンシャル情報を取得する
const credentialsForIdentityCommandInput: GetCredentialsForIdentityCommandInput = {
IdentityId: id.IdentityId,
};
const credentialsForIdentity = await client.send(new GetCredentialsForIdentityCommand(credentialsForIdentityCommandInput));
// 署名V4を作成する
const signatureV4 = new SignatureV4({
service: 'execute-api',
region: 'ap-northeast-1',
credentials: {
accessKeyId: credentialsForIdentity.Credentials?.AccessKeyId!,
secretAccessKey: credentialsForIdentity.Credentials?.SecretKey!,
sessionToken: credentialsForIdentity.Credentials?.SessionToken!
},
sha256: Sha256,
});
// HTTPリクエストを作成する
const httpRequest = new HttpRequest({
headers: {
host: apiUrl.hostname,
},
hostname: apiUrl.hostname,
method: 'GET',
path: apiUrl.pathname,
});
// 署名リクエストを作成する
const signedRequest = await signatureV4.sign(httpRequest);
// APIを実行する
axios.get('https://*****.execute-api.ap-northeast-1.amazonaws.com/api/authorizer/', {
headers: {
authorization: signedRequest.headers.authorization,
'x-amz-content-sha256': signedRequest.headers['x-amz-content-sha256'],
'x-amz-date': signedRequest.headers['x-amz-date'],
'x-amz-security-token': signedRequest.headers['x-amz-security-token'],
}
})
.then((response) => {
setResponse(JSON.stringify(response.data));
})
.catch((error) => {
console.log(error)
});
};
return (
<div>
{ response }
</div>
)
}



↑のコードを使えばIAM認証を突破できます。
色々ハマって1日かかりました。。
よくある質問|署名バージョン4でIAM認証を突破する方法
- 署名バージョン4の公式ドキュメントはありますか?
-
下記になります。
公式サイト署名バージョン 4 を使用した AWS リクエストへの署名 – AWS 全般のリファレンス 認証 (署名) 情報を の HTTP または HTTPS リクエストに追加しますAWS
まとめ|署名バージョン4でIAM認証を突破するのは簡単
今回は、Reactで署名バージョン4を作成してIAM認証を突破する方法について解説しました。
以下が本記事のまとめになります。
- IDプールを使うことで一時的な権限を払い出せる。
- AWSのライブラリを使えば署名処理は簡単。
この記事があなたのお役に立てば幸いです。
サイト内には、他にも初心者向けの記事を多く投稿していますので良ければ参考にしてみてください。
最後までお読みいただきありがとうございました!
最後に
僕が個人的におすすめするReactエンジニア向けのフリーランスエージェントをご紹介します。



エンジニアで実務経験のある方(目安は3年)はフリーランスも視野に入れましょう。
僕自身、フリーランスになって収入が2倍(年収+280万)になりました。
あなたの貴重なスキルを安売りしないようにしましょうね!
初めてのフリーランスなら「レバテックフリーランス」
- 国内最大級のフリーランスエージェント
- 案件数は約40,000件(国内最多)
- 高単価案件が豊富
- マージン率は10〜20%
レバテックフリーランスは国内最大級のフリーランスエージェントです。
高単価案件が豊富で、初めてフリーランスになる方におすすめのエージェントです。



僕も最初はレバテックを利用しましたが、おかげさまで収入が約1.5倍になりました(笑)。
正社員並みの保証なら「Midworks(ミッドワークス)」
- 正社員並みの手厚い保証
- 給与保証あり
- 非公開案件が豊富
- マージン率は一律20%
Midworksは正社員並みの手厚い保証を受けたい方におすすめのエージェントです。
非公開案件が豊富で給与保証も付いているので、安心してフリーランスにチャレンジできますよ!



ちなみに僕はMidworks経由でフルリモート案件に参画できました!
営業担当の方も真摯に対応してくれて非常に助かりました。