開発環境にCloudflare Accessを導入した話
これは SMat Advent Calendar 2024 の12/12分の記事です。 株式会社エスマットでエンジニアをしている potix2です。 私たちの開発環境はこれまでIPアドレスによるアクセス制限を採用していましたが、よりセキュアかつ柔軟なアクセス管理を実現するため、Cloudflare Accessの導入を決定しました。この記事では、その移行プロセス、遭遇した課題、および解決策について詳しく説明します。 なぜCloudflare Accessを導入したのか 従来のIPアドレスに基づくアクセス制限は、その単純さから選ばれていましたが、最近のオフィス移転に伴い、固定IPアドレスの利用が不可能になりました。この変化は、セキュリティとアクセシビリティのバランスを再考させる重要な要因となりました。特に以下のような課題がありました。 固定IPアドレスの喪失：オフィス移転により、以前に利用し
とほほのOpenID Connect入門 - とほほのWWW入門
OpenID Connectとは 用語 OpenID Connectを試してみる OP側の準備 - AWS Cognito ユーザープールと最初のクライアントを作成する 作成されたパラメータを確認する ディスカバリ ユーザープールにユーザを追加する RP側の準備 - Pythonアプリ 実施 認証の流れ ログインする トークンをリフレッシュする トークンを失効させる ログアウトする IDトークンの形式 リンク OpenID Connectとは SSO(シングルサインオン)を実現するプロトコルのひとつです。 例えば、食べログ に Google アカウントでログインすることができますが、ここでも OpenID Connect が使用されています。 OIDC と略されることもあります。 類似の仕様に OpenID 2.0 がありましたが、OpenID 2.0 の進化系が OpenID Conne
Blobとは何か理解していない方へ
はじめに 昨日ファイルを扱う実装をしている際、github copilotが以下のサジェストをしました const config = { headers: { "content-type": "multipart/form-data" }, responseType: "blob", }; try { const res = await this.axios.post( "/api/export_file", formData, config ); const url = window.URL.createObjectURL(new Blob([res.data])); このサジェストは、バイナリデータを扱う際のJavaScriptの機能を活用するものでした。せっかくCopilotが提案してくれたのに、これらが何を機能するものなのか、その詳細を理解していなかったため、ここでそれらについて調
HonoでAPI付き雑React SPA最小
laisoさんが書いてたのほぼなんだけど Honoは文字列でもStreamでもなんでも返せるからサーバーサイドもReactで書けるし、tsconfig.jsonで適切に設定すればJSXなんでもいけるし、Viteのdev-serverがあるから、サーバーもクライントも同時に開発、ビルドできて、もちろんAPIを生やすのが得意で、雑React SPA環境（API付き！）作るのに向いてるよ。 作り方解説します。めんどい人はここにプロジェクト作ってるからclone、ダウンロードしてください。 まず、create-honoして、cloudflare-pagesのテンプレートを選ぶ。bunをパッケージマネージャーに使ってる。
HonoでAPIだけ作って素のReact DOMでSPAを書くアーキテクチャ
という構成を手軽に作れるようになっていて便利でした これを軸に素のReact APIを触って遊ぶ環境が作れそうです(Server APIもworkerdで動く範囲なら使えるかも?) とりあえず以下のソースコードでデプロイまでできるかを試しました プロジェクトのベースはnpm create hono@latestで作りました DEMO: https://hono-spa-react.pages.dev/ react react-dom @vitejs/plugin-react-swc をnpm installしています デバッグ しかしこの構成だと@hono/vite-dev-serverによるvite devは実行時エラーになり動きません(!) react-dom_client.js?v=f8955f15:11222 Uncaught Error: Objects are not vali
WebサイトのログインにPasskeyを追加できる新サービス「Passwordless.dev」、Bitwardenが正式公開。月間1万ユーザーまで無料
オープンソースのパスワードマネージャ「Bitwarden」などを提供しているBitwarden,Inc.は、Webサイトのログイン機能にPasskeyを簡単に追加できる新サービス「Passwordless.dev」の正式公開を発表しました。 WebサイトをPasskey対応にすることで、ユーザーはパスワードを覚えておく必要がなくなると同時に、指紋認証などの手軽な手段でWebサイトにログイン可能になります。さらに、サーバ側でのパスワード流出や、ユーザー側での偽サイトに誘導されるフィッシングなどのリスクがほとんどなくなるというセキュリティ面での大きなメリットもあります。 一方で、WebサイトをPasskey対応にするには、ログインに関わる認証のロジックを従来のIDとパスワードの組み合わせに加えて、Passkey対応を追加しなければなりません。 今回正式公開されたPasswordless.dev
[書評] ハッキングAPI ―Web APIを攻撃から守るためのテスト技法
サマリ ハッキングAPI―Web APIを攻撃から守るためのテスト技法（2023年3月27日発売）を読んだ。本書は、Web APIに対するセキュリティテストの全体像と具体的なテスト方法を記載している。ペンテスターは、APIの検出、APIエンドポイントの分析、攻撃（テスト）を行う必要があり、そのために必要な情報がすべて記載されている。また、実習のためのツールと「やられサイト」を複数紹介し、具体的なトレーニング方法を解説している。単にツールやサイトの使い方の説明にとどまらず、本格的なペネトレーションテストの考え方を説明している。 本書の想定読者はAPIのペネトレーションテストを実施するペンテスター及びペンテスターを目指す人であるが、API開発者やウェブアプリケーション脆弱性診断員にとっても有益な内容を多く含む。 重要事項説明 本書の監修者の一人（洲崎俊氏）と評者は知人関係にある 評者が読んだ書
お知らせ：民間事業者向けの業界横断的なデジタル本人確認のガイドラインが公開されました
2022 年 5 月に KYC ワーキンググループ内に設置された「本人確認ガイドラインタスクフォース」が作成した「民間事業者向けデジタル本人確認ガイドライン」が公開されました。 「本人確認ガイドラインタスクフォース」は、会員企業 10 社とデジタル庁、有識者から構成され、官民が連携して議論・検討を重ね、本ガイドラインを策定したものです。 本人確認ガイドラインタスクフォースのメンバー リーダー 株式会社TRUSTDOCK サブリーダー 株式会社NTTドコモ 構成員（50音順） 伊藤忠テクノソリューションズ株式会社 KDDI株式会社 株式会社ジェーシービー セコム株式会社 ソフトバンク株式会社 デロイト トーマツ サイバー合同会社 トッパン・フォームズ株式会社 株式会社Liquid オブザーバー（50音順） 落合孝文弁護士 OpenIDファウンデーション・ジャパン デジタル庁（吉田泰己、林達也
「WebAPI 設計のベストプラクティス」に対する所感 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 「翻訳: WebAPI 設計のベストプラクティス」を読んで色々と思うところがあったので書きました。 上記の記事は訳文でありますので、正しくは「Best Practices for Designing a Pragmatic RESTful API」に対する所感と述べた方が良いのかもしれませんが、日本語で通して読めるよう Qiita に投稿された訳文に対する所感として書いています。 以下では「翻訳: WebAPI 設計のベストプラクティス」並びに「Best Practices for Designing a Pragmatic RESTf
Web APIを手作りする時代は終わった？
::: message info これは[フィヨルドブートキャンプ Advent Calendar 2022 Part.1](https://adventar.org/calendars/7760)の25日目の記事です。 昨日の記事は:@shujiwatanabe:shujiwatanabeさんの[質問しながら出来るようにしていく](https://shu91327.hatenablog.com/entry/2022/12/24/091025)と:@saeyama:saeyamaさんの[Rails/Vue 編集時に画像をD&Dで入れ替えした時のActive Storageの保存方法](https://saeyama.hatenablog.com/entry/2022/12/24/000123)でした。 ::: ↓こういうのを職人が丹精込めて一つ一つ手作りする時代は終わりました。 ```sh
最近のフロントエンドフレームワークに対する認識とお気持ちの整理 - console.lealog();
久しぶりに、いわゆるポエムを。 新規・運用ヘルプを問わず、受託や副業でよくフロントエンドをやってるWeb屋の見解、そして手札のお悩み。 この先、また技術選定する際なんかにも参考になるかと思ったので。 React 「いまフロントエンドやるなら最初に覚えるべき！」は、もう過去の話かなーと個人的には思ってる。 Reactは`UI = fn(state)`なのが良い！とか言われるけど、あなたが必要としてるのは`UI = Component(props)`かもよって。 一昔前までは、たしかにあらゆる面で頭一つ抜けてる印象はあったけど、今はそうでもないか、その差はだいぶ埋まってきてると思ってる。（もちろん先行者利益みたいなところで、エコシステムはまだまだ優位な差があるかもしれんけど、それもあまり実感できたことはないし、いまからはじめる人はそんなんで困らんやろうし） 原初の時代からReactな案件をそれ
webサーバのログの分析2022 8月分 | ITオムライス
公開している web サーバのログから通常のアクセスではない通信について分析しました。 多かったリクエスト ルータ等のログイン画面があるかの調査 login.cgi .envの調査 /.env Hikvision製ネットワークカメラの脆弱性（CVE-2021-36260） Hikvision製ネットワークカメラの脆弱性を利用するリクエスト Miraiベースのボットネットに利用されている脆弱性のようです。 Miraiベースのボットネット：MoobotがHikvisionの脆弱性を標的に /SDK/webLanguage PHPUnitのevalをリモート実行 PHPのユニットテストツールのPHPUnitの脆弱性を利用してのeval()を実行しようとする通信 Webサイト攻撃にあったログを見る。eval()を使うPHPファイルは狙われている。 | ただ屋ぁのブログ /vendor/phpuni
The OAuth 2.0 Authorization Framework: Bearer Token Usage（日本語）
The OAuth 2.0 Authorization Framework: Bearer Token Usage（日本語） Abstract この仕様書は, OAuth 2.0の保護リソースへアクセスするために, 署名無しトークンをHTTPリクエスト中でどのように利用するか記述したものである. 署名無しトークンを所有する任意のパーティ (持参人) は, 関連づけられたリソースへアクセスするために署名無しトークンを利用できる (暗号鍵の所有を示す必要はない). 誤った利用を避けるために, 署名無しトークンは保存場所や流通経路での値の露見から守られる必要がある. Status of This Memo This is an Internet Standards Track document. This document is a product of the Internet Enginee
JP Contents Hub
AWS 日本語ハンズオン Amazon Web Services(AWS) の 日本語ハンズオンやワークショップを、カテゴリごとにまとめています。 右側の目次や、ヘッダー部分の検索ボックスから、各コンテンツにたどり着けます。 また、Ctrl + F や command + F を使ったページ内検索もご活用いただけます。 料金について ハンズオンで作成した AWS リソースは通常の料金が発生します。作成したリソースの削除を忘れずにお願いします。 もし忘れてしまうと、想定外の料金が発生する可能性があります。 画面の差異について ハンズオンで紹介されている手順と、実際の操作方法に差異がある場合があります。 AWS は随時アップデートされており、タイミングによってはハンズオンコンテンツが追いついていない事もあります。 差異がある場合、AWS Document などを活用しながら進めて頂けますと幸い
MSW で加速するフロントエンド開発
みなさん、フロントエンド開発時のモックサーバーは何を使っていますか？モックサーバーといっても様々なアプローチがあると思いますが、最近活用している MSW が便利だったので紹介します。MSW（Mock Service Worker）はブラウザリクエストを Service Worker がインターセプトし、任意のレスポンスを返すことが出来るライブラリです。 次の様な Express 風ハンドラーで、モックレスポンスを表現することができます。なんとこのコードがブラウザで動いてしまいます。 import { setupWorker, rest } from "msw"; const worker = setupWorker( rest.get("https://myapi.dev/csr", (req, res, ctx) => { return res( ctx.json({ title: "C
「ドメインをモデリングして PHP コードに落とし込む」を発表しました / PHP カンファレンス 2021 - Shin x Blog
2021/10/02, 03 にオンラインで開催された PHP カンファレンス 2021 にて「ドメインをモデリングして PHP コードに落とし込む」を発表しました。 発表資料 Sample code: https://github.com/shin1x1/domain-modeling-with-php Togetter: https://togetter.com/li/1783062 joind.in: https://joind.in/talk/650b0 ドメインモデルという共通概念をモデリングし、それをコードに反映するという内容です。 去年は事前に録画して自分で再生した のですが、今年はライブでやりました。やっぱりライブは良いですね。話し出しはモニタに向かって話す違和感がありましたけど、途中から調子が掴めてきました。 Discord をチラ見していたのですが、リアルタイムでどんど
2021年のまとめ・反省 - mizchi's blog
年内に間に合わなかった… 2021年に主にお世話になった言語・ライブラリ TypeScript React chakra-ui dnd-kit Node Vite esbuild Docker(=> lima) とりあえず挙げてみたが、なにか特定のライブラリを使う、という感じではなく、レイヤーが一つ下にいった感じがあり、実際にはなんかもうちょっと下のミドルウェアみたいなものを作っていることが多かった気がする。ASTをいじるコンパイラ周辺ツールを作っていることが多かった。 サクッとなにか作る場合、 React + TypeScript + Vite(esbuild) が鉄板という感じで、 esbuild が異次元に速すぎて、typescript の変換もバンドルも、もはやこれ一本でいい気がしてる。 microsoft/typescript はもはや言語仕様の定義と型検査がメインであって、コン
［速報］AWS、ローコードでWebのフロントエンドを開発できる「AWS Amplify Studio」発表。バックエンド管理機能も統合。AWS re:Invent 2021
Amazon Web Services（AWS）は、Webアプリケーションのフロントエンドを短時間で容易に開発できる機能と、バックエンドのクラウドサービスの運用管理などを統合した新ツール「AWS Amplify Studio」を発表しました。 AWSは以前から、Webアプリケーションやモバイルアプリケーションのバックエンドの迅速な構築と運用をするフレームワーク「AWS Amplify」を提供していました。 AWS Amplifyによって開発者は簡単にAWSのサービス群を組み合わせてスケーラブルなバックエンドを構築できます。 そしてAWS Amplifyに含まれているクライアントライブラリを利用することで、そのバックエンドに接続するフロントエンドの開発に注力することが可能でした。 今回発表された「AWS Amplify Studio」は、このAWS Amplifyに対応したフロントエンドをロ
管理人の死去によりchakuwikiのドメインが失われてしまった件
chakuwikiはご当地の話題に特化したwikiサービスです。 数日前より、chakuwikiのドメインに接続できない現象が発生していましたが、管理人の訃報が判明しました。 現在、存続方針については未定です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
あなたのネット老人度は？ CPIが25周年記念で「ネット老人会クイズ Web制作編」を公開中【やじうまWatch】
