本記事は不確かな情報が多く含まれる可能性がある 本職はフロントエンドエンジニアで、基本的に取得した情報に色をつけ表示させることで会社内での居場所を維持してきた。 ただ最近個人開発でバックエンドに触れることが増えセキュリティにも興味が出てきた。 ただ、まだまだ浅い理解しかない。 何が言いたいかというと、この記事は不確かな情報を含んでいる可能性があるということ。 浅く理解したくなったきっかけ 最近、個人開発ということでNestJSでAPIを作成した、 作成したAPIをLambdaに乗せ、カスタムドメインを設定せずに使用している。 そのため、CORSのクロスオリジンを指定する必要があった。 NestJSは一行ですべてのドメインに対しCORSを許可することができる。 開発環境ではそれでいいが、本番で運営するにあたり、許可するドメインを指定する必要がありそうだということを調べて知った。 しかし、なぜ？ という疑問が生じた。 いくら絞ったところでcurlコマンドで叩けるので別に絞る必要がないのでは？ という疑問を解決するために調べてみた。 CORSを指定しないことで考えられるセキュリティリスク クロスサイトリクエストフォージェリ（CSRF）攻撃 CSRFは悪意のある攻撃サイトにユーザーが訪問した際、意図しないリクエストがCSRFの脆弱性のあるウェブアプリケーションに投げられ、設定の変更や、強制投稿が行われるということ。 CSRF(Cross-Site Request Forgery)攻撃について このサイトが非常に参考になった。 CORSで防げる このサイトにあげられている下記のようなポイントのうち、 対象のWebサイトのユーザが、正規の手順でログイン済であることを前提とする 対象のWebサイトが、設計上意図しない更新操作を受け付けてしまうことで攻撃が成立する 「対象のWebサイトが、設計上意図しない更新操作を受け付けてしまうことで攻撃が成立する」をCORSの設定で防ぐことができる。 悪意のあるサイトのドメインがCORSで許可されていなければ、いくらリクエストが飛ばされたところで問題ない。 そのため、CORSのドメインは信頼されたドメインに絞り込む必要がある。 そういうこと。

Row（行） 横方向を表す。 つまり、テーブルや行列などで、水平方向に並んでいる要素の集まり。 Col（列） 縦方向を表す。 つまり、テーブルや行列などで、垂直方向に並んでいる要素の集まり。 疑問 要素の集まりというのが肝な気がする。 それを考えると色々しっくりきた。 どうしっくりきたかの言語化はできない。 ので、以前の疑問を解消する形で言語化に近づけてみる。 4列シート 夜行バスの４列シートは横並びに４つシートが並んでいるという意味なので、４行シートではないのかという疑問が浮かんだ。 ただ１番前から見た時、垂直方向に並んでいる要素の集まりが４つある、つまり４列になる。 rowSpan これはHTMLのTableに関する属性で垂直方向のセルを結合する。いや垂直方向に結合するならColSpanではという疑問が浮かんだが、横並びの集まりを垂直方向に結合するのでRowSpanで正しい。 覚え方 ぱっと思い浮かばないので、 Row Gyo Yoko 🤙 というラップっぽく覚えることにした。

過去にドメイン関係のトラブルに見舞われたことがある。 ドメイン関係のトラブルはクリティカルなので非常にそわそわする。 そんな時エックスサーバーのサポートが手厚く、以来、レンタルサーバー・ドメインはエックスサーバーにお世話になっている。 そのため、今回新たに作成したWebサービスもエックスドメインで借りたドメインのサブドメインに紐づけることにした。 サーバーはVercelに浮気した。 エックスサーバーでサブドメインを作成する 前述したとおり、エックスサーバーは非常にサポートが充実している。 なので、サブドメインの作成を改めてここに書く必要なんてない。 公式が最も正しく、詳しい。 サブドメイン設定を参考にサブドメインを作成する。 Vercelに紐づける 大前提としてVercelにプロジェクトが既にあるという体で進めていく。 Vercel管理画面 SettingsタブをクリックしProject Settingsページに遷移する。 サイドナビのDomainsをクリックし、inputに作成したサブドメインを入力しAddボタンをクリックする。 https://は不要なので注意。 Invalid Configurationという警告がでるが、Vercelに認識はしてもらった。 エックスサーバー管理画面 DNSレコード設定をクリックしDNSレコード一覧から対象ドメインを選択し変更ボタンをクリックする。 ここでDNSレコードが設定できるので、下記のように設定する。 項目 値 ホスト名 [サブドメイン名] 種別 CNAME 内容 cname.vercel-dns.com 優先度 上記設定を追加し、しばらく待つ。 Vercelサービスに割り当てられるドメイン サービスを作成すると独自に、割り当てられるドメインがある。 service-name.vercel.app のようなやつ。 独自ドメインを設定した暁には、このドメインをリダイレクトするのがいいと思われる。 先ほど設定したドメインの下にこのドメインがあると思うので、Editボタンをクリックすると、Redirect toというセレクトボックスがある。 そこに先ほど設定したドメインが表示されると思うので、選択し、Saveすればリダイレクトが完了する。 もしこの設定を行わないとGoogleのクローラーはどのように判断するのだろうか。 コピーサイトと間違われることもありそうなので、リダイレクトはしたほうがいい。 ただサブドメインを使用する場合は、友人に共有したいけどメインドメインがばれるのが嫌という人も多いだろう。 その場合はシェア用に取っておくのも有りかもしれない。 Vercel管理画面にて、Valid Configuration・Assigned to main 5分くらいでValid Configurationが上記のような表記に変更された。 実際に設定したドメインを訪れると作成したサービスにアクセスすることができた。 キャッシュを消さないと見れないかもしれないので注意が必要。

POSTメソッドを叩いたらエラーが出た NestJSで作成したAPIをLambdaに乗せ、API Gatewayでエンドポイントを作成した。 フロントエンドはNextJSで作成し、Vercelにデプロイした。 で、無事画面表示とGetが成功し、得たいデータが表示された。 ただPOST APIを叩いた時 Access to fetch at 'https://xxxxxx.amazonaws.com/api/v1/login' from origin 'https://xxxxxxx.vercel.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status. というエラーがでた。 CORSは有効にしている 上のエラーを読む限り、CORSに関するエラーということがわかる。 ただNestJSの方でCORSは有効にしている。 該当のソースは下記の通り。 const app = await NestFactory.create(AppModule); await app.init(); app.useGlobalPipes(new ValidationPipe()); app.useGlobalFilters(new HttpExceptionFilter()); // CORSの有効化 app.enableCors(); const expressApp = app.getHttpAdapter().getInstance(); return serverlessExpress({ app: expressApp }); Getはできているし、CORSもきっと有効に出来ているに違いない。 じゃあ、なんでPOSTはできないの？ 沼に落ちた。 解決方法 ちなみに同じ状況に陥った人のために先に解決方法を載せておくと、下記のようにawait app....

awsのRDSにEC2を踏み台サーバーとしてアクセスしようとしたけど、うまくいかなかったので、RDSを一時的にパブリックサブネットにしたうえでアクセスしてみる。 aws知識0だがパブリックサブネットに変更するのは問題がありそうな気がするけど、テスト環境なのでやってみる。 パブリックアクセスを有効にする RDS > データベース > 該当DB名に行き、変更ボタンをクリックする。 接続の追加設定を選択し、パブリックアクセス可能にチェックを入れるて保存する。 セキュリティグループの変更 ポート3306の解放 接続とセキュリティ > VPC セキュリティグループをクリックする。 インバウンドルール > インバウンドのルールを編集をクリックする。 タイプでMYSQL/Auroraを選択する。 ソース でMyIPを選択すると今使用しているパソコンのIPアドレスでの接続に制限できる。 接続してみる 接続できない。 セキュリティグループを追加してみる 全部公開できそうなセキュリティグループを作成し、そちらを適用させる。 インバウンドグループ IP バージョン タイプ プロトコル ポート範囲 ソース IPv4 すべてのトラフィック すべて すべて 0.0.0.0/0 アウトバウンドルール IP バージョン タイプ プロトコル ポート範囲 送信先 IPv4 すべてのトラフィック すべて すべて 0.0.0.0/0 接続してみる これでクライアントツールでRDSにアクセスすることができた。 これでとりあえずテーブルの中身を見たいという課題は解決できた。 次は踏み台サーバーを設置し、正規の流れでアクセスできるようにしたい。