CORS

ファビコンって 守備範囲広くて面倒ですよね。 もはや当たり前ですが、ずーっと前はfavicon.icoを準備するだけでよかったのが、スマホの「ホーム画面に追加」に対応とか、Winの「ピン留め」に対応とかいろいろとしなきゃならないことが多いです。 なので大きい画像を準備するだけでサクッとマルチデバイス対応してくれるReal Favicon Generatorを使って生成・設定しました。 指南してくれるサイトに沿って記述してアップ。 順調にことは運び、あれよあれよとレビューも終わってステージング環境に反映され、便利ツールを作ってくださった方に一礼してタスク完了。 全然面倒じゃない。本当に助かります…

こんにちは。 エキサイト株式会社の三浦です。 今回は、私が実際に体験した、「存在するはずのAPIなのに、ブラウザからアクセスできなかった話」をしていきます。 作ったはずのAPIにアクセスできない…！？ アクセス失敗の原因 Preflight requestとは Preflight requestの問題点 最後に 作ったはずのAPIにアクセスできない…！？ 私の携わっているサービスは長いこと続いているため、裏側にガタが来ているものも数多く存在しています。 少し前、そんな中の1つで、ブラウザから直にアクセスが来る、とあるAPIを新しいものにリビルドする、という仕事が舞い込んできました。 開発自体は…

はじめまして、10月にサーバーワークスに入社した大浪です。 現在はAS部IE課で修行中（研修中）です。 研修は大変ですが、こんなに楽しいと思った研修もはじめてです。 研修については今度サバワクに書いてみたいと思いますが、今回はAWSのホワイトペーパーの話を書きたいと思います。 AWSホワイトペーパー ホワイトペーパーとはAmazonやAWSコミュニティによってまとめられた技術情報で、AWSの一つの答えを知ることができます。 2022年11月9日現在、287のホワイトペーパーが公開されていました。 AWS ホワイトペーパーとガイド その中のWordPress用のホワイトペーパーの内容に、Word…

ApacheでCORSヘッダの追加 普段はAPIを作ることが多くFlaskの場合だとFlask-CORSを使うので特に意識していなかったがApacheでヘッダの追加ってどうするのだったかなと調べたので備忘録として記載。 今回はAccess-Control-Allow-Originヘッダの追加のみを記載しているが、同じ要領でヘッダを追加すればいくらでもヘッダを増やすことができる。 オリジン間リソース共有 (CORS) https://developer.mozilla.org/ja/docs/Web/HTTP/CORS ヘッダの追加手順 ヘッダを追加するにはmod_headersが有効になってい…

はじめに AzureFunctions利用時にCORSエラーになった際の対処法を備忘録として残します。 ローカル環境での対処 local.settings.jsonファイルに以下のように追記します。 ※以下はすべてのドメインを許可していますが、対象のドメインを指定することも可能です。 "Host": { "CORS": "*" } AzureFunctions環境での対処 対象のAzureFunctions関数を開きます。 サイドメニューよりAPI > CORSを押下します。 許可される元のドメインを入力し、「保存」ボタンを押下します。 おわりに しっかり覚えていきたいと思います。

問題点 Azure Functions で作成した関数アプリを Web API として Blazor から叩こうとしたがこのようなエラーが発生する。 Access to fetch at '<関数アプリのURL>' from origin '<実行元アドレス(localhost)>' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set t…

はじめに いま、幸せ？ nikkieです。 GitHubのContributionのように、アイの歌声を聴かせての鑑賞ログを表示してみるの後編です。 前回はCal-heatmapというライブラリを選び、JavaScriptのオブジェクトとしてデータを渡し、それが表示されることを確認しました。 オブジェクトの代わりに、JSONファイル名（相対パス）を渡したところ、開発者ツールのコンソールに「Reason: CORS request not HTTP」と表示され、カレンダーは色づかなくなってしまいました。 こちらを解決する中で知ったことを記事にまとめます。 目次 はじめに 目次 結論：Python…

株式会社アドグローブ ソリューション事業本部（大阪）の𠮷川です。 今回はNuxt3でFabric.jsを使用してCanvas操作をしてみたので簡単にはなりますが、Nuxt3とFabric.jsの概要含めてご紹介します。 Nuxt3とは Fabric.jsとは Fabric.jsをインストールする 初期設定をする Canvasのサイズを設定する お絵描きできるようにしてみる Canvasにオブジェクトを追加する まとめ Nuxt3とは Nuxt.jsは無料かつオープンソースのフレームワークであり、直感的で拡張可能な方法で、 Vue.jsを使用してタイプセーフで高パフォーマンスなプロダクショングレ…

1. はじめに 先日AWSとVue.jsでアプリケーションを開発する機会がありましたので個人的に重要だと感じた点や躓いた点をまとめました。参考になれば幸いです。 2. 目次 1. はじめに 2. 目次 3. 概要 3.1. アーキテクチャ図 3.2. ダイアグラム図 3.3. ランタイム設定 4. 各種AWSリソースのセットアップ 4.1. Amazon S3 4.1.1. Amazon S3とは 4.1.2. Amazon S3の設定 4.2. Amazon VPC 4.2.1. Amazon VPCとは 4.2.2. Amazon VPCの設定 4.3. Amazon RDS 4.3.1.…

クラウド環境の構築を行なっていると、ごくたまにBasic認証とBearer認証の２つを行いたい時があります。 具体的にはWebAPIとフロントエンド（SPAやSSG等）が分離されている構成でBearerを使っているケースです。検証環境のような非公開のシステムにBasic認証をつい設定してしまうとAuthorizationヘッダーが競合します。 これに対する解決方法をいくつか挙げてみます。 1. Basic認証をやめる いっそ止めるという方法。代わりにIP制限ではどうかと一考の余地あり。 2. ドメインをAPIとフロントエンドで異なるものにする Basic認証をフロントエンドだけに設定してAPI…

こんにちは、ZOZO NEXTでウェブエンジニアを担当している木下です。先日、弊社が運営するオウンドメディアのFashion Tech Newsにおいて、記事リストのパーソナライズを行いました。本記事ではパーソナライズ導入における、要件定義、レコメンドエンジンの比較、実装での知見や注意点についてまとめます。 fashiontechnews.zozo.com

データベースの画像（サムネイル用） Next.jsを使う場合のDBについて 自分でバックエンドを書くか、BaaSを使うか Rails APIモードを使うよりも、FirebaseやSupabaseやPlanetScaleのほうが連携が簡単そうな予感がしています。 Rails APIモードを使う場合、Fly.ioなどを使ってサーバーを立てる必要があり、なおかつそのDBの使用量を考慮に入れる必要があります。 Fly.ioはデータが少なければDB代が全く掛かりません。しかしそれはBaaS（Backend as a Service） も同様です。SupabaseやPlanetScaleも、Hobby用と…

RustのWebアプリケーションの開発に慣れるためRustのactix-webとdieselを使ってMedium.comクローンを作ってみました。作り方は、 https://github.com/gothinkster/realworld リポジトリのRustの実装を写経しました。この、Medium.comクローンではAPIは20APIほどあるので、モジュール化されたより実践的なRustのWebアプリケーションの作り方を学べます。 ぜひ、Rustの学習でより実践的なアプリケーションが作りたい方は参考にしてみてください。 Realworldリポジトリとは RealWorld は、React、An…

今回はPythonプログラミングにおけるセキュリティ対策とOAuthの基本を解説し、コード例とセキュリティ関連のPythonライブラリも紹介致します。 目次 セキュリティの重要性 OAuthの基礎 OAuthとは OAuthの動作原理 OAuthのメリットと用途 OAuthの実装手順 セキュリティ対策のポイント パスワードの安全性向上 入力検証とサニタイズ エラーハンドリングとログ管理 セキュリティヘッダの適切な設定 コード例 OAuthライブラリの使用例 セキュリティ関連のPythonライブラリ紹介 終わりに セキュリティ意識の重要性 Pythonのセキュリティに関するトレンドと今後の展望 …

はじめに こんにちは、エンジニアのクロ(@kro96_xr)です。 先月の頭にGenerative Agentsに関する論文が話題になりましたね。 arxiv.org そして、このGenerative AgentsについてはLangChainで実装例が提供されています。 python.langchain.com この機能をWebAPI化すれば管理画面でエージェントを作成、他のクライアントから呼び出すこともできるのでは？と考えて実装してみました。 本記事では主にWebAPIの実装部分について触れていきます。 実際には、データや記憶の永続化がうまくできていないのでサーバ再起動で消えてしまう状態です…

VSCode で Dev Container を使用して API サーバを立てていたのだが、とあるタイミングでフロントエンドの開発環境から接続できなくなっていた。 構成は以下の通り。 バックエンド (Dev Container) : PHP + Nginx フロントエンド : React + Next.js ローカルからはポート 8000 番でコンテナ側の Nginx の 80 番に接続できるようにしていた。 つまりローカルからは http://localhost:8000/ で接続できていた。 現象としては、React から fetch() で接続できなくなっていた。 試したところ、コマンド…

フロントエンド開発のためのセキュリティ入門 知らなかったでは済まされない脆弱性対策の必須知識作者:平野 昌士翔泳社Amazon 「フロントエンド開発のためのセキュリティ入門」を読みました。 この記事では、その感想をまとめてみたいと思います。 概要 この書籍は、その名の通りフロントエンドのセキュリティについて入門者でもわかりやすく解説されたものです。 XSSやCSRF、クリックジャッキング、オープンリダイレクトなど、フロントエンドで考慮すべきセキュリティ上の課題が幅広くカバーされています。 さらに、問題に対する具体的な対策が紹介され、その後にハンズオン形式でその手法を試すまでの一連の流れで学ぶこ…

こんにちは。DIGGLEエンジニアリングマネージャーのzakkyです。発売以来スプラトゥーン3のフェスに全敗しているので「zakkyと逆張りすれば勝てる説」が立証されつつあります。 はじめに 早速本題です。 弊社では、今年RubyKaigi 2023のPlatinum Sponsorsに初めて応募しまして、そして無事に当選することができました。 弊社以外のRubyKaigi 2023スポンサーには、本当に有名な企業が並んでおりまして、そんな有名企業に挟まれる初参加企業ということで、「何かかまさなきゃ！ 何か目をひくものを作らなくちゃ！」という事で、弾幕シューティングゲームを作りましたのでご紹介…

Hello there, ('ω')ノ 論理を破る: ショッピング サイトの商品評価で遊ぶを。 脆弱性： ロジックの欠陥 パラメータの改ざん 記事： https://infosecwriteups.com/break-the-logic-playing-with-product-ratings-on-a-shopping-site-600-c9a87fb66a73 今回は、主な用途は特定の飲料ショッピングサイトで。 いつものように、サイトのすべての機能と仕組みを学ぶのに時間をかけ。 すべてのユーザのメンバーシップ、パッケージ、およびプロファイルがあり。 最も重要なことは、プログラムを諦めないこ…