cors

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

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....