The story of web framework Hono, from the creator of Hono
The story of web framework Hono, from the creator of Hono2024-10-17 Hono is a fast, lightweight web framework that runs anywhere JavaScript does, built with Web Standards. Of course, it runs on Cloudflare Workers. It was three years ago, in December 2021. At that time, I wanted to create applications for Cloudflare Workers, but the code became verbose without using a framework, and couldn't find a
WebVM 2.0: A complete Linux Desktop Environment in the browser via WebAssembly
Back to blog WebVM 2.0: A complete Linux Desktop Environment in the browser via WebAssembly WebVM is a full Linux environment running in the browser, client-side. It is a complete virtual machine, with support for persistent data storage, networking and, as of today’s release, Xorg and complete desktop environments. In an instance of WebVM, everything executes locally within the browser sandbox. W
Docker Compose Isn't Enough
On the positive side docker-compose is far easier than raw docker commands. Each of these configurations would take dozens, if not hundreds of docker commands to reproduce. Docker-compose is a huge improvement over the existing alternatives. The Problem The problem is that docker-compose is too flexible, too detailed, and operates at the wrong layer of abstraction. Each of the applications above h
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 運用しているSPA(シングルページアプリケーション)を脆弱性診断ツールにかけたところ、CSRFに対する指摘を受けました。 SPAに対するCSRF対策の知識が薄かったので、改めてSPAでのCSRFリスク評価や対策の考え方を調査・検討した時の備忘録を残しておきます。 Cookie(Session)認証の場合 (MPAで広く採用) まず前提として、広く知られているマルチページアプリケーションでのCSRF攻撃の流れをおさらいします。 Cookie(Session)認証を採用している正規ウェブサイトにログイン ブラウザのCookieに正
Adding hand-drawn font for Chinese, Japanese and Korean to Excalidraw
Adding hand-drawn font for Chinese, Japanese and KoreanPublished November 7, 2024by Mrazator Adding a hand-drawn font for Chinese, Japanese, and Korean (CJK) has been on our radar as one of the most requested features. In the meantime, many have tried forking or extending Excalidraw with Chinese font/s, but the experience never really felt right. It usually resulted in major issues, to name a few:
New crazy payloads in the URL Validation Bypass Cheat Sheet
Published: 29 October 2024 at 13:59 UTC Updated: 29 October 2024 at 14:01 UTC The strength of our URL Validation Bypass Cheat Sheet lies in the contributions from the web security community, and today’s update is no exception. We are excited to introduce a new and improved IP address calculator, inspired by @e1abrador's Encode IP Burp Suite Extension and many more. New IP validation bypass techniq
February 13, 2022 ハマった経緯 # 最初に # これまで example.com でサイトを運営していた。 そして # これまで運営していた example.com は other.example.com としてドメインを変更して引き続きサイトを運営しつつ、 example.com には新たなサイトを割り当てることにした。 そのため # まずは example.com を other.example.com にリダイレクトさせるようにしておいた。 一定期間たったあとでそのリダイレクトを解除し example.com を新たなサイトに割り当てた。 すると起きた問題が # すでにリダイレクト設定を解除しているにも関わらず example.com にアクセスすると other.example.com にリダイレクトされてしまう。 原因は # リダイレクトでは 301 リダイレク
に続いて、自作 web framework Ohkami の記事です。 前回は template engine で UI を作っていたのに対して、今回は Yew を使い、Rust で SPA を作りました。 作ったもの： 注目ポイント Rust だけで SPA を作るメリット 僕のような Rustacean にとっては Rust だけ書けばいいという体験それ自体が大きなメリットなのですが、一般的にはやはり何も考えなくても API まわりの型 ( や util 類 ) を server・client 間で共有できることが挙げられると思います。 Ohkami×Yew TODO Demo では というディレクトリ構成をとり、API の request / response body が入った models を全体で共有しています。 Cloudflare Workers で Yew compone
レンタルサーバーでポートフォリオサイトを作ろうと思ってる。MySQL のデータを PHP 経由で React に表示したいけど、どこから手を付けていいのやら・・。こういうことはできるの？ もちろんできますよ！今回は、ロリポップの MySQL データを PHP の Web API 経由で React アプリケーションに表示する方法を紹介します MySQL + PHP + React 実働デモ https://watermargin.net/portfolio/react MySQL・PHP・React の関係性 今回のアプリケーションアーキテクチャは、次のように示すことができます。 ファイルサーバーの観点では、watermargin.net > portfolio 配下に、React アプリと PHP Web API が配置されています。 機能ファイルサーバーの位置React アプリwate
Ruby on Railsのアプリに LINEログイン、LINE Messaging APIによるメッセージ送信を組み込む
現代のコミュニケーション手段として LINE はなくてはならないものになりました。今回は、その LINE を Ruby on Rails のアプリケーション (以降、Rails アプリ) から使えるようにします。 ソースコードは takaokouji/everdiary-line にあります。 環境 Apple M3 (MacBook Air 13 2024) macOS Sonoma 14.6.1 Homebrew Visual Studio Code 1.93.0 Dev Container 機能拡張をインストール済み Docker Desktop 4.34.2 ruby 3.3.5 anyenv で rbenv をインストール ruby 3.3.5 を global に設定済み ( rbenv global 3.3.5 ) rails 7.2.1 gem gem install ra
本記事では Firebase Genkit を使用した Cloud Run Functions (旧 Cloud Functions) のことを Firebase Genkit Functions と呼んでいます。 Cloud Functions for Firebase を Firebase Functions と呼ぶイメージに近いです。 はじめに こんにちは、Firebase が大好きな cobo です。 アプリケーション開発の際、Google では Test Sizes の考え方が推奨されています。 これは、テストを Small / Medium / Large といった規模に応じて分類し、それぞれの目的に応じて効率的にテストを行う方法です。 特に重要なのが、Small Tests をローカル環境で高速に実行することです。 これにより、一般的な結合テストフェーズで動作を確認するよりも
https://aws.amazon.com/jp/about-aws/whats-new/2022/04/aws-lambda-function-urls-built-in-https-endpoints/ AWS LambdaでHTTPSエンドポイントがデフォルト利用できるようになり、API Gatewayを付与する必要がなくなった。早いもので、すでにServerless FrameworkもTerraformも対応しているのだが、せっかくなのでLambdaのデプロイには使ったことがない、Terraformで試してみた。 Terraform with AWS Lambda AWS LambdaでTerraformを管理するというのはあまり一般的なケースではなく、僕もServerless Frameworkなどを使うことが多い。 改めて、なぜTerraformでAWS Lambdaを管理
リクエストIDを追加して調査を快適にする
この記事は Zenn で投稿していた内容を移行したものになります。 はじめに 現在 API のログは出力しているのですが、1 リクエスト内で実行された GraphQL Query が把握しづらいという課題がありました。 今回は Apollo Gateway の RemoteGraphQLDataSource を使用してリクエストヘッダに ID を付与し、各アプリケーションの GraphQL context から参照できるようにすることで改善を試みました。 本記事では NestJS を使用したコードになっています。実装にあたり使用したバージョンは下記になります。 Node.js v18.12.1 Apollo Server v3.11.1 NestJS v9.2.1 yarn v1.22.19 @nestjs/cli v9.1.5 ゲートウェイでリクエスト ID のヘッダを追加する 最初に各
PrefrightRequestと違い、最初から本リクエストを送ってしまうため、CORS設定などに不備があると予期せぬ処理(データ更新)が実行されてしまいます。 ブラウザでレスポンスを見ることが出来ないからOKではない、ということです。 CORS設定は正しく行い、全てのOriginを許可する必要がある場合などは、必ず認証チェックなどの対策をするようにしましょう！ PrefrightRequest PrefrightRequestが発生するリクエストの場合はまず、OPTIONSで同じ本リクエスト同じURLにアクセスします。 サーバー側で確認し問題がなければ200が返り、CORSエラーの場合は403が返ります。 PrefrightRequestのレスポンスで、ブラウザが本リクエストを送っても良いか判断し、本リクエストを送ります。この判断には後述のAccess-Controlヘッダーが使われます
RSC時代のNext.jsにおけるセキュリティ常識
はじめに まず最初に、筆者はセキュリティ対策の専門家ではなく、ただのウェブ開発者です。したがって、次の内容は常識的で一般的なセキュリティ対策に限られます。 現実の複雑なセキュリティ対応には全然足りないけど、それらも分からないなら危険です。 RSCがCCに渡すPropsを厳密チェックが絶対必要 まず知っておくべき事実は、RSCがCCに渡すパラメーターはコンソールで確認できるということです。 HTMLのあるスクリプトタグ内には、このPropsが平文で保存されています。 筆者自分のアプリを例にすると、RSCでカードデータリストを取得して、そのままCCに渡して、リンダリングします。だけど、そのデータリストは完全に見られますよ。 こっちはかなり危険なところなんです。 本来表示する情報であれば一般的に問題ありませんが、パラメータを注意深くチェックしないと、不要な機密情報も漏洩してしまう可能性が非常に高
KanikoとArgo CD Pull Request Generatorで作るPRごとのデプロイ環境｜CyberZ Developer
本投稿はSRE Advent Calendar 2023の20日目のエントリになります。 こんにちは。CyberZでSREをしている@toro_ponzです。普段はEKSの運用やキャパシティプランニング、サービス開発などに取り組んでいます。 今回はCyberZの1プロジェクトで現在試験導入中の「Pull Requestごとのデプロイ環境」についてお話しいたします。 モチベーションこのプロジェクトでは主に開発に使うdev環境、および本番同等であるステージング環境がEKS上に構築されています。開発の都合上dev環境にはmainブランチ以外の変更をデプロイして動作確認したり他のエンジニアに共有したりすることがしばしばありますが、チームメンバーの増加や並行する開発案件などによって複数のdev環境が欲しいケースが増えてきました。 別のプロジェクトでは、dev、dev02、dev03といった形で個別の
Hono - Wikipedia
RegExpRouter は、Hono に標準で備わっているルーターである。[6] ルーティングを予め 1 つの正規表現にまとめることにより、高速なルーティングを実現している。[7][8][9][10] Hono は Web 標準な API のみで構成されているため、Web 標準に従っているランタイムで動作可能である。それらの API を Hono が提供していなくても、Adapter という機能を介してさまざまな JavaScript ランタイムで動かすことができる。Hono は、Deno[11][12][13], Node.js[14][15], Bun[16][17][18], Cloudflare Workers[19][20][21][22], AWS Lambda[23][24][25]で動かすこともできる。さらに、サーバーサイド JavaScript ランタイムのみでなく、H
ログイン 新規会員登録 マイページ ログアウト ブランドから探す 3COINS ai no de baseyard tokyo BEARDSLEY BIRTHDAY BAR CAPRICIEUX LE'MAGE Chez toi Chico CIAOPANIC CIAOPANIC TYPY COLLAGE GALLARDAGALANTE COLONY 2139 CPCM Croisiere DISCOAT DOUDOU Drawing Numbers ear PAPILLONNER earthy_ Franklin Climbing FREDY & GLOSTER GALLARDAGALANTE gemeil IACUCCI Jena espace merveilleux Kastane KITO FOREST MARKET SHIMOICHI La boutique BonBon LAR
これまで、Web制作の作業で、お問い合わせにGoogleBloggerを使って、サーバーでのメール送信などしなくてもいいし、 サーバー自体も、ほぼ0円で運用できる（しかも独自ドメインで）、 ニュース更新やそれぞれのページ更新に関しても、GoogleBloggerを使って、まるでWordPressのように管理して運用できる方法を解説してきましたが、 （興味あるけど知らない人は、過去記事参照してみてください。） GoogleBloggerのFeed取得のみ、Javascript + fetch（または、XMLHttpRequest）で処理した時に、CORSセキュリティエラーで、想定した取得ができなかったので、 PHPなどのサーバーサイドスクリプト経由で行っていましたが、この度、JavascriptのみでGoogleBloggerを便利に取得して、まるでサイト内の記事として扱うことができるように
【Unity】WebGLで動画再生を独自実装する
Unity標準のVideoPlayerを使わずにWebGLで動画再生する処理を自作したいの。 標準のVideoPlayerの内部実装を参考に自作する方法を見ていくね。 WebGL環境において、Unity標準のVideoPlayerのような動画再生機能を自作する方法の解説記事です。 次のような動画再生をjslibプラグインでネイティブ実装して実現するところを目指します。 Unityでは、動画再生機能はVideoPlayerコンポーネントとして提供されており、WebGL含めたあらゆるプラットフォームでの再生が可能です。 参考：Unity – Scripting API: VideoPlayer 通常の動画再生であれば、Unity標準のVideoPlayerコンポーネントで事足りる場面も多いと考えられますが、動画再生をネイティブ実装することで次のようなことが期待できるかもしれません。 ネイティブ
こんにちは、cobo です。 今回は、Google I/O '24 で発表された Firebase の新機能の 1 つである Genkit についての記事です。 Genkit は生成 AI ワークフローのオーケストレーション、デプロイ、モニタリングを行うためのコードファーストのフレームワーク と言われています。 この記事では、オーケストレーション という部分にフォーカスし、Genkit が Firebase の指揮者 としてどのような構成（アーキテクチャ）を採ることができるのか紹介します。 1. Web API 構成 Web API 構成 クライアントからのリクエスト（例えば、質問文など）を受け付けて、それに対して、Genkit 内で用意されたプロンプトを基にレスポンスを返す、一番シンプルな Genkit の構成です。 サーバーサイドである Firebase で、Google AI Stu
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ASP.NET Core Blazor Web Assembly (WASM) からトークン (JWT) ベースの認証が必要な ASP.NET Core Web API にクロスドメインでアクセスしてデータを取得するサンプルを作ってみました。以下に作り方を備忘録として書いておきます。 Visual Studio 2022 のテンプレートを利用して ASP.NET Core Web API と Blazor WASM のソリューションを別々に作成します。完成後、Visual Studio 2022 から両方のプロジェクトを実行し (［デバ
「テキストベースのLLMを拡張してネイティブのリスニング機能を持たせるための、オープンで進行中の研究実験」らしいIchigoのデモを試してみます。 使用するPCはドスパラさんの「GALLERIA UL9C-R49」。スペックは ・CPU: Intel® Core™ i9-13900HX Processor ・Mem: 64 GB ・GPU: NVIDIA® GeForce RTX™ 4090 Laptop GPU(16GB) ・GPU: NVIDIA® GeForce RTX™ 4090 (24GB) ・OS: Ubuntu22.04 on WSL2（Windows 11） です。 1. 準備環境構築venv環境構築。 python3 -m venv ichigo-demo cd $_ source bin/activateリポジトリをクローンします。 git clone --recurs
はじめに この記事では、 AWS Step Functionsを使ってサーバーレスな問い合わせフォームを作る方法を紹介します。 今回の構成は以下の通りです。 フロントエンド: S3で静的ホスティング バックエンド: API Gateway + Step Functions + SES (Simple Email Service) よくある構成としてStep FunctionsでなくLambdaを使った場合がありますが、 Lambdaだとコードを少なからず書く必要があることと、 ランタイムの管理も必要になってきます。 その点、Step Functionsはノンコードで実装できるのでより手軽に実装できます。 実装の構成 アーキテクチャ概要 今回の問い合わせフォームは、以下の構成で実装しています。 フロントエンド S3バケット: HTML、CSS、JavaScriptファイルを保存し、静的なウェ
chrome devtoolsの便利機能
tl;dr 公式を参考にしています。多すぎるので今回は一部抜粋のみ。 対象読者 コーダー フロントエンドエンジニア（バックエンドの兼任でももちろんok） 難しい技術が出てくるわけではなくGUIベースの簡単な操作が多いので、html, cssを触るなら誰でも対象です。 また、私自身はフリーのフロントエンドエンジニアなので、その視点で話します。 機能 developer tool表示中にescを押すとconsoleがニョキッと出てくる 超基本なのでしょうが、全然知りませんでした。networkを見ながら、elementを見ながら、でconsoleも触ることができます。便利ですね。 遅いネットワークをシミュレートする。 スロットリングを行うことができます。 遅いCPUをシミュレートする。 CPUもスロットリングできます。 hoverやactive状態をトグルで設定する 「hover状態のcssみ
Rails8をインストールするメモ
🐑 ~/work/rails/rails8 rails _8.0.0_ new TestApp create create README.md create Rakefile create .ruby-version create config.ru create .gitignore create .gitattributes create Gemfile run git init from "." Initialized empty Git repository in /home/akinov/work/rails/rails8/TestApp/.git/ create app create app/assets/stylesheets/application.css create app/controllers/application_controller.rb create ap
AWS Amplify Gen 2 と AWS CDK で爆速アプリ開発 & 拡張 ! ~ 第 1 回 AWS Amplify Gen 2 から始める AWS CDK 入門 - builders.flash☆ - 変化を求めるデベロッパーを応援するウェブマガジン | AWS
こんにちは ! ソリューションアーキテクトの菊地です。 みなさん、AWS Amplify というサービスをご存知でしょうか？AWS Amplify は、Next.js や Vue.js などのフロントエンドフレームワークを簡単にホスティングし、フロントエンドから呼び出すためのバックエンドも構築してフルスタックのアプリケーションを楽に作ることができる便利なサービスです。 そんな AWS Amplify は今年 5 月に、コードファーストな開発体験を提供する AWS Amplify Gen 2 の一般提供が開始され、バックエンドの構築に AWS Cloud Development Kit (AWS CDK) を利用するようになったことでより柔軟にバックエンドを構築できるようになりました。しかし、AWS CDK に馴染みのない方の中には、「CDK ？何それ美味しいの？」状態になって手を出せずにい
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SPAでCSRF対策を検討する - Qiita
ユーザの Chrome ブラウザの 301 Redirect cache をクリアする方法
Ohkami×Yew TODO - Rust で SPA を作る on Cloudflare Workers
ロリポップ：MySQL + PHP + React の連携方法（サンプルあり）
Firebase Genkit Functions 開発のすゝめ
TerraformでAWS Lambda Function URLsをデプロイする - chroju.dev
【概要編】CORS ～AWS100本ノック～ 14/100 - Qiita
【PPラタン】新商品のご紹介＊ | PAL CLOSET(パルクローゼット)
GoogleBloggerをAPI-KEY無しにFeed取得する方法 #概要編
Firebase & AI のオーケストレーションを実現！Genkit アーキテクチャ 8 選
Blazor WASM から ASP.NET Core Web API を呼び出し - Qiita
WSL2でichigoを試してみる｜noguchi-shoji
AWS Step Functionsを使用したサーバーレスな問い合わせフォームの実装