リクエスト署名を検証するAPIをContentfulアプリから呼び出してブログの下書きをチェックしてみた

AWSTemplateFormatVersion: '2010-09-09'
Transform: AWS::Serverless-2016-10-31
Description: >
  contentful-backend-api
Globals:
  Function:
    Timeout: 3
    Runtime: nodejs20.x
    Tracing: Active
  Api:
    TracingEnabled: true
Parameters:
  ContentfulRequestSignSecret:
    Type: String
Resources:
  Api:
    Type: AWS::Serverless::Api
    Properties:
      StageName: prd
      DefinitionBody:
        Fn::Transform:
          Name: AWS::Include
          Parameters:
            Location: oas.yaml
      Auth:
        Authorizers:
          authorizer:
            FunctionArn: !GetAtt AuthorizerFunction.Arn
            FunctionPayloadType: REQUEST
            Identity:
              ReauthorizeEvery: 0
              Headers:
                - X-Contentful-Signature
  AuthorizerFunction:
    Type: AWS::Serverless::Function
    Properties:
      CodeUri: authorizer/
      Handler: app.lambdaHandler
      Architectures:
      - arm64
      Environment:
        Variables:
          CONTENTFUL_REQUEST_SIGN_SECRET: !Ref ContentfulRequestSignSecret
    Metadata:
      BuildMethod: esbuild
      BuildProperties:
        Minify: true
        Target: es2020
        Sourcemap: true
        EntryPoints:
        - app.ts

openapi: 3.0.1
info:
  title:
    Blog Review API
  version: '1.0'
paths:
  /:
    post:
      responses:
        "200":
          description: "200 response"
          headers:
            Access-Control-Allow-Origin:
              schema:
                type: "string"          
          content:
            application/json:
              schema:
                type: object
                properties:
                  typo:
                    type: string
                    example: タイポ警察だ！                    
                  mediaPolicy:
                    type: string
                    example: 特に問題ありません
      security:
        - authorizer: []      
      x-amazon-apigateway-integration:
        responses:
          default:
            statusCode: "200"
            responseParameters:
              method.response.header.Access-Control-Allow-Origin: "'*'"            
            responseTemplates:
              application/json: |
                {
                  "typo": "タイポ警察だ！",
                  "mediaPolicy": "特に問題ありません"
                }
        requestTemplates:
          application/json: "{\"statusCode\": 200}"
        passthroughBehavior: "when_no_match"
        type: "mock"
    options:
      responses:
        "200":
          description: "200 response"
          headers:
            Access-Control-Allow-Origin:
              schema:
                type: "string"
            Access-Control-Allow-Methods:
              schema:
                type: "string"
            Access-Control-Allow-Headers:
              schema:
                type: "string"
          content:
            application/json:
              schema:
                type: object
      x-amazon-apigateway-integration:
        type: "mock"
        responses:
          default:
            statusCode: "200"
            responseParameters:
              method.response.header.Access-Control-Allow-Methods: "'POST'"
              method.response.header.Access-Control-Allow-Headers:
                "'Content-Type,X-Contentful-Space-Id,X-Contentful-Environment-Id,X-Contentful-User-Id,X-Contentful-Signed-Headers,X-Contentful-Signature,X-Contentful-Timestamp,X-Contentful-Crn'"
              method.response.header.Access-Control-Allow-Origin: "'*'"
        requestTemplates:
          application/json: "{\"statusCode\": 200}"
        passthroughBehavior: "when_no_match"
components: 
  securitySchemes:
    authorizer:
      type: "apiKey"
      name: "X-Contentful-Signature"
      in: "header"
      x-amazon-apigateway-authtype: "custom"
      x-amazon-apigateway-authorizer:
        authorizerUri:
          Fn::Sub: "arn:aws:apigateway:${AWS::Region}:lambda:path/2015-03-31/functions/${AuthorizerFunction.Arn}/invocations"
        authorizerResultTtlInSeconds: 300
        identitySource: "method.request.header.X-Contentful-Signature"
        type: "request"

import { APIGatewayRequestAuthorizerEvent, APIGatewayAuthorizerResult } from 'aws-lambda';
import { verifyRequest } from '@contentful/node-apps-toolkit';

const secret = process.env.CONTENTFUL_REQUEST_SIGN_SECRET?? '';

type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS';

export const lambdaHandler = async (event: APIGatewayRequestAuthorizerEvent): Promise<APIGatewayAuthorizerResult> => {

    const { headers  } = event;
    const canonicalRequest = {
        path: event.requestContext.path,
        headers: headers as Record<string, string>,
        method: event.httpMethod as HttpMethod,
    };
    let isValid = false;

    try {
        isValid = verifyRequest(secret, canonicalRequest);
    } catch (e: unknown) {
        console.log(e);
    }    

    let principalId = '';
    if (headers != null) {
        principalId = headers['x-contentful-user-id'] ?? '';
    }

    const createPolicy = (effect: 'Deny' | 'Allow') => {
        return {
            principalId,
            policyDocument: {
                Version: '2012-10-17',
                Statement: [
                    {
                        Action: 'execute-api:Invoke',
                        Effect: effect,
                        Resource: event.methodArn,
                    },
                ],
            }
        }
    }
    if(isValid === false) {
        return createPolicy('Deny');
    }
    return createPolicy('Allow');
};

const canonicalRequest = {
    path: event.requestContext.path,
    headers: headers as Record<string, string>,
    method: event.httpMethod as HttpMethod,
};

npx create-contentful-app アプリ名

import React, { useState } from 'react';
import { Button, Heading, Paragraph } from '@contentful/f36-components';
import { EditorAppSDK } from '@contentful/app-sdk';
import { useSDK } from '@contentful/react-apps-toolkit';

const Entry = () => {
  const sdk = useSDK<EditorAppSDK>();
  const [reviewResult, setReviewResult] = useState({
    typo: '',
    mediaPolicy: '',
  });
  const review = async () => {
    const contentsField = sdk.entry.fields['<ContentfulのContent modelに定義したフィールドのID>'];
    const contents = contentsField.getValue().content[0].content[0].value;
    const req = {
      method: 'POST',
      url: 'https://<バックエンドAPIのエンドポイント>/prd/',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ article: contents }),
    } as const;

    const { additionalHeaders } = await sdk.cma.appSignedRequest.create({
      appDefinitionId: sdk.ids.app?? '',
    }, {
      method: req.method,
      headers: req.headers,
      // Lambda Authorizerはbodyを受け取れないので署名に含めない
      // body: req.body,
      path: new URL(req.url).pathname,
    });
    Object.assign(req.headers, additionalHeaders);
    const res = await fetch(req.url, req);
    const reviewResult = await res.json();
    setReviewResult(reviewResult)
  }

  return <>
    <Heading>タイポチェックの結果</Heading>
    <Paragraph>{reviewResult.typo}</Paragraph>
    <Heading>メディアポリシー準拠チェックの結果</Heading>
    <Paragraph>{reviewResult.mediaPolicy}</Paragraph>
    <Button onClick={review}>レビュー</Button>
</>
};

export default Entry;

const { additionalHeaders } = await sdk.cma.appSignedRequest.create({
  appDefinitionId: sdk.ids.app?? '',
}, {
  method: req.method,
  headers: req.headers,
  // Lambda Authorizerはbodyを受け取れないので署名に含めない
  // body: req.body,
  path: new URL(req.url).pathname,
});
Object.assign(req.headers, additionalHeaders);

❯ curl 'https://<APIのエンドポイント>/prd/' \
∙   -H 'accept: */*' \
∙   -H 'accept-language: ja,en-US;q=0.9,en;q=0.8' \
∙   -H 'content-type: application/json' \
∙   -H 'origin: http://localhost:3000' \
∙   -H 'priority: u=1, i' \
∙   -H 'referer: http://localhost:3000/' \
∙   -H 'sec-ch-ua: "Google Chrome";v="129", "Not=A?Brand";v="8", "Chromium";v="129"' \
∙   -H 'sec-ch-ua-mobile: ?0' \
∙   -H 'sec-ch-ua-platform: "macOS"' \
∙   -H 'sec-fetch-dest: empty' \
∙   -H 'sec-fetch-mode: cors' \
∙   -H 'sec-fetch-site: cross-site' \
∙   -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36' \
∙   -H 'x-contentful-crn: crn:contentful:::extensibility:spaces/...略' \
∙   -H 'x-contentful-environment-id: master' \
∙   -H 'x-contentful-signature: ...略' \
∙   -H 'x-contentful-signed-headers: content-type,x-contentful-crn,x-contentful-environment-id,x-contentful-signed-headers,x-contentful-space-id,x-contentful-timestamp,x-contentful-user-id' \
∙   -H 'x-contentful-space-id: ...略' \
∙   -H 'x-contentful-timestamp: 1729153084089' \
∙   -H 'x-contentful-user-id: ...略' \
∙   --data-raw '{"article":"これはテストです"}'

{"Message":"User is not authorized to access this resource with an explicit deny"}