知らないとあぶない？Next.jsセキュリティの話

No video

知らないとあぶない？Next.jsセキュリティの話

Рет қаралды 5,183

Күн бұрын

#Next.js #React #セキュリティ #プログラミング
Next.jsを本格的に使い始めてはや数年…。知らないと危険なコードを書いてしまうポイントについて3つ紹介しています。Next.jsのv13から提供されているApp RouterやReact Server Componentを中心に気をつけたい内容が詰まっているのでぜひ見てください。
🛎️ 宣伝 : 本を書きました！
「コードが動かないので帰れません!」
新人プログラマーのためのエラーが怖くなくなる本です。エラーログの読み方やデバッグの考え方、デバッガを使ったブレイクポイントの活用法を解説しています。
📖 www.amazon.co....
ぜひ購入をお願いします！！！！！！！！！！！
🧵 Zennで技術ブログも書いています、見てね！
zenn.dev/p/moo...
🦜 Twitter フォローお願いします！
むー / moobugs
zaru / zaru
👨‍💻 ムーザルについて
ムーザルは、むーとzaru（ざる）の現役プログラマな二人のコンビです。
技術や物作りが好きで、楽しんで開発ができるような動画を投稿しています。
チャンネル登録やグッドボタンで応援してくれると嬉しいです。
「この技術の解説動画が見たい！」などのリクエストコメントもお待ちしております！

Пікірлер: 15

@bbieye 2 ай бұрын

いつも楽しく動画を拝見しています🥰 素人なのですが教えていただけないでしょうか。いろいろと気を付けないとNextのセキュリティは難しいということがわかりました。どうもありがとうございます😍 セキュリティを楽にできるように考えるとバックエンドを railsやLaravelでおこなって必要なデータだけフロントに出すようにしたらなど考えてしまったのですが、お二人はバックエンドもNextでやるメリットや理由というのをお伺いしたいです。

@moozaru 2 ай бұрын

コメントありがとうございます！まず、そもそもフロントエンドとバックエンドの距離がある事自体に不満がありました。従来のRailsだけ、Laravelだけで作る形式は良かったですが、そこからReactやVueが入ってきた時に２つのアプリを作っているかのような手間を感じてしまいました。そこにフロントとバックの境界線をなくしたように感じるNext.jsは個人的にはすごく良いです。セキュリティに関してはNext.jsが弱いという事はなく、どのフレームワークを使っていても同じような問題は起こり得ます。なので、あとは開発体験として自分にとってしっくりくるものを選んでもいいかなと思います。

@bbieye 2 ай бұрын

@@moozaru すぐに返信をいただいてどうもありがとうございます☺ 私はLaravlerだったのですが、今までは全部Laravelでやっていました。しかしフロントを柔軟に作りたいと思い、今バックエンドはLaravelそしてフロントはReactでやっているところです。はい。おっしゃる通り、２つのアプリを作っている感じがありますね。Authなど、認可のCROSで手間取ってしまったりしてこれが、Next.jsで全部すればこういう苦労もないのかなと動画を拝見しながら考えました。また、２つの開発サーバーを立ち上げながら、あそこを修正しないと、ああ、こっちのVSCODEじゃなかった、という感じも煩わしいなとも思いました。 Next.jsはDBを使わないちょっとしたものしか作ったものはないのですが、今後は丸ごと全部、Next.jsでやってみようと思います。どうもありがとうございました🥰

@user-ph1oq8bi4o Ай бұрын

勘違いだったらすいません… propsから情報漏洩する対策がDTOというところ、「Server->Client間の転送層としてのDTO」という独自の設計前提でお話しされてる気がしました。主にバックエンドの世界におけるDTOはサーバー内処理において不変なデータ転送であることを示すこと使うので、最初「あー、React Taint APIでDTOを転送禁止にする話かな？」と思ったんですが、どうもそうではなさそうでかつClientへの流出をDTOなら防げるような言い回しが、本来のDTOの意味に沿ってない気がして気になってしまいました。

@moozaru Ай бұрын

ちょっとわかりにくい話しですいません。話したかった意図は、ServerComponent内部で、DBから取得したデータをpropsなどで伝搬する際にDTOの考え方を適用したいということでした。Prismaで取得したオブジェクトをそのまま渡さず、DTOで明示的にフィールドを渡す。ServerからClientという意味では仰るとおりReact Taintが有効になりそうですね。