#
153
2024/10/11
今日のトレンド

Next.js セキュリティと Server など

こんにちは、マイクです!今日は2024年10月12日、土曜日です。お元気ですか?さて、今日はZennでトレンドの記事をいくつかご紹介していきますよ!

それでは、さっそく今日の内容に入っていきましょう!まずは、前回紹介した記事についてですが、今は特にお伝えすることはありませんので、今日の内容に進みますね。

今日ご紹介する記事は全部で5本です。それでは、さっそく最初の記事からいきましょう!

1つ目の記事は「Next.jsで簡単なCRUDアプリを作りながら気になったセキュリティ: Railsの視点から」です。この文章では、著者がNext.jsを使ってCRUDアプリの開発を行い、セキュリティに関する懸念点と対策を考察しています。データ漏洩のリスクや、Server ComponentからClient Componentへのデータ送信時に敏感な情報が漏れる可能性について触れています。公式の対策としてData Access Layerの利用が挙げられていますが、手間がかかるため、著者はlodashの`pick()`メソッドを使用して必要なデータのみを絞り込む方法を選んでいます。

次に、古くから知られるMass Assignmentの脆弱性についても言及されています。特にブラウザから送られる`formData`をそのままデータベースにアップデートすることは、意図しないフィールドが更新されるリスクがあるため、必要なフィールドだけを取り出すか、バリデーションライブラリ(例: Zod)を使用することが推奨されています。

また、Open Redirectの脆弱性についても触れています。Next.jsの`redirect()`関数が外部からのパラメータに対する安全性を保証しないため、独自の`isSafeRedirect()`関数を作成し、安全性を確認する必要があります。著者は、Next.jsがセキュリティ対策を開発者に委ねている点に注意が必要だと強調しています。特に、フレームワークが自動的にセキュリティを保護するとは限らないので、エンジニア自身が意識を持つことが重要です。

。...。

2つ目の記事は「"use server";を勘違いして使うと危ない」です。このドキュメントでは、Next.jsのServer Actionsにおいて、`"use server";`を誤用するとセキュリティリスクを引き起こす可能性があることが説明されています。具体的には、あるフォームのデータフローにおいて、`submitForm()`関数がフロントエンドでバリデーションを行い、`insertRecord()`関数がサーバーでデータベースに保存する処理を担当しています。実装者が`insertRecord()`関数に`"use server";`を追加した結果、サーバー側での処理が行われることになりましたが、フロントエンドのバリデーションはそのまま残ってしまい、クライアント側で改変される危険性が生じました。

このような誤解を避けるためには、`"use server";`を適切に使用し、どのコードがサーバーで実行されるかを常に意識することが重要です。特に、`submitForm()`関数のファイルに`"use server";`を付けることで、バリデーションコードが改変されることなく、データベース操作の関数が外部に露出することを防げます。また、両方のファイルに`"use server";`を付けた場合、外部公開はされないことも理解しておく必要があります。Server Actionsの正しい運用によって、フロントエンドとバックエンドの境界を明確にし、セキュリティを確保することが求められます。

。...。

3つ目の記事は「Tailwindでなめらかなレスポンシブを実現できる「Fluid for Tailwind CSS」を試してみた」です。このプラグインは、Tailwind CSSを使った場合に、メディアクエリなしでスムーズなレスポンシブデザインを実現します。従来のTailwind CSSでは、画面サイズに応じてレイアウトが急に変わるため、利用者は「ガクッ」とした印象を受けることがありましたが、このプラグインを使うことで、CSSの`clamp()`関数を用いて要素が滑らかに変化し、より自然なデザインが可能になります。

このプラグインの主要な機能は、レスポンシブなプロパティを簡単に設定できる点で、特にフォントサイズやマージン、パディングなどに効果を発揮します。具体的には、最小値と最大値を指定し、画面の幅に応じてその値がスムーズに変化するように設定できます。これにより、異なるデバイスサイズでの表示が一貫して美しくなります。

FluidはTailwindのクラスと連携して動作し、既存のTailwindプロジェクトに容易に組み込むことができます。インストールはnpmを利用し、設定もシンプルで、特別な知識がなくてもすぐに使い始められるのが魅力です。さらに、Fluidの導入により、従来のメディアクエリの煩雑さから解放され、開発効率の向上が期待できます。

。...。

4つ目の記事は「2023 年10月以降の Mozc に対する主な変更」です。2023年10月以降のMozcの主な変更点がまとめられており、現在のバージョンは2.30.5618です。主な変更点としては、バージョンの更新や、プルリクエストの受け入れ範囲の拡大、誤変換報告方法の簡略化、変換用データの更新などがあります。

誤変換の報告方法がGitHub IssuesからGoogle Formに移行され、利便性が向上しました。また、郵便番号データや辞書データの更新が行われ、元号と西暦の変換機能も改善されています。さらに、ユーザー辞書のインポート機能やダークモード対応のGUIも追加されています。

Linux関連では、Ibusでの入力方法の改善やHiDPIディスプレイへの対応が強化され、Windowsでは、インストール直後の変換問題やMS-Wordとの互換性改善が行われました。macOSではGUIアイコンの高解像度化が進められています。今後の予定としては、GYPのビルドルールの削除や変換データの拡充が挙げられています。これらの変更により、Mozcはさらに使いやすくなり、開発者やユーザーからのフィードバックを歓迎しています。

。...。

5つ目の記事は「神話のプログラム言語 Odin(これであなたも厨二病)」です。`Odin`は最近注目を集めているプログラミング言語で、C言語の代替として現代的な機能を備えています。開発者はスウェーデンのgingerBill氏で、名前は北欧神話の神に由来しています。`Odin`は、C言語よりもシンプルでありながら、楽しいコーディング体験を提供します。

`Odin`の特徴としては、手動メモリ管理や例外処理なし、クラスなし、ポインタ対応、FFIでC言語利用、ジェネリクスなどがあります。設計理念は必要最低限の機能を提供し、シンプルさを重視しています。特に、メモリ管理に関しては、集中管理が可能です。

`Odin`の環境構築はWindowsを例にとると、Microsoft Visual C++をインストールし、Odinをダウンロード、環境変数設定を行うことで動作が可能となります。VSCodeでは、Odin用の拡張機能をインストールすることで開発が進められます。

このように、`Odin`は2017年から開発が続けられていますが、未だBeta版であり、資金不足が開発の遅れの原因とされています。今後、メモリーアロケーターに関する記事も予定されており、さらに情報が提供される見込みです。

それでは、今日お伝えした記事を簡単におさらいしましょう!まず、Next.jsのセキュリティ対策や`"use server";`の適切な使い方、次にTailwind CSSのレスポンシブデザインプラグイン、Mozcの主な変更点、そしてプログラミング言語Odinについてお話ししました。

次回お会いできるのを楽しみにしていますよ!詳しい内容はショーノートに書いてありますので、ぜひチェックしてください。また、番組の感想もぜひお待ちしています!それでは、またね!

Related episodes

内容の近いエピソードを推薦しています