freks blog

about

Shopify App Proxy Calculate a digital signature Remix TypeScript版

created: 2025-02-21
おすすめ記事: 出会ってよかったプログラマー本

ShopifyのApp Proxyを使ってみる でApp Proxyは用意しました

Display dynamic store data with app proxies
の Calculate a digital signature を Remix で作った Shopify app でやってみます

Rubyのコードを TypeScript で書き換え

import crypto from 'crypto';

// Shopify Partner Dashboard > App > Client secret から取得
const SHARED_SECRET = "abcd"; // TODO: 環境変数などに保存してコードに書かないようにする

function isValidDigitalSignature(url: URL) {
  const queryParams = Object.fromEntries(url.searchParams);

  const signature = queryParams.signature;
  delete queryParams.signature;

  const sortedParams = Object.keys(queryParams)
    .sort()
    .map((key) => `${key}=${queryParams[key]}`)
    .join("");

  const calculatedSignature = crypto
    .createHmac("sha256", SHARED_SECRET)
    .update(sortedParams)
    .digest("hex");

  return crypto.timingSafeEqual(
    Buffer.from(signature, "hex"),
    Buffer.from(calculatedSignature, "hex"),
  );
}

SHARED_SECRETは、Shopify Partner Dashboard > App > Client secret から取得します
環境変数とかにしてコードに書かないようにするのが良いです

これで不正なアクセスをはじけるようになりました

まとめ

公式ドキュメントにあったらいい内容でした

PR


Amazonのアソシエイトとして、blog.freks.jp は適格販売により収入を得ています。
This site is managed by freks