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…

本記事は 初夏のAWSアワードエンジニア祭り 4日目の記事です。 🍦 3日目 ▶▶ 本記事 ▶▶ 5日目 💻 こんにちは！最近、息子がよく言う「へー、そうなんやー」が好きすぎて、大人が「そうなんや」って言っててもニヤニヤしてる志水です。 今年から初めてAWS Ambassadorsとして選出頂きました。他のAmbassadorの方を見ているとまだまだ力不足であり、更に今回退任された佐々木さんには全く及びませんが、ネットコムは佐々木さん・上野さんだけじゃないぞ、というのを自分なりに頑張って証明していきたいと思います。その一歩として僕の大好きなCDKとChatGPTに関する話をしようと思います。 …

今回は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() で接続できなくなっていた。 試したところ、コマンド…

Chrome 113 で、 DevTools の Network ペインで HTTP ヘッダを好きなように編集して、いろんな状態をお試しできるようになっている。 What's New in DevTools (Chrome 113) - Chrome Developers で紹介されている。 GitHub から example.com を fetch してみる GitHub の CSP ヘッダを上書き example.com の CORS のヘッダを上書き 途中で指定したフォルダの中身は何？ 上書きをやめるには？ 感想 GitHub から example.com を fetch してみる 試し…

こんにちは。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 今回は、主な用途は特定の飲料ショッピングサイトで。 いつものように、サイトのすべての機能と仕組みを学ぶのに時間をかけ。 すべてのユーザのメンバーシップ、パッケージ、およびプロファイルがあり。 最も重要なことは、プログラムを諦めないこ…

タイトルの出オチ記事。 前提 Chrome 2023/05/02時点 原因 portrait, landscapeは画面のwidthとheightの縦横比で決まる iframeの画面サイズは親画面サイズに依存しない 上記2つの原因により、iframeで作られた画面を最小化（ヘッダだけ見える状態にする）すると、縦横比が変わるためlandscapeとして判定されます。 対応 landscapeとして処理される前提で、目的の処理のみ動くように回避します。 次のCSS Media Queryは、スマートフォンでlandscapeにした時にはメッセージが表示されるが、PCやタブレットを含めたそのほかでは…

まえおき ChatGPTとリバーシで遊べるサイトを作りました！ 公開時は誰でも自由に遊べましたが、今はOpenAIのAPI Keyをユーザーに準備してもらう仕組みになっています。 （GPT-3.5が安いとはいえ、1クリックごとにAPIアクセスするサービスはマズかった・・・みたいな仕様の反省点はまた別の機会に。） ChatGPTとリバーシで遊べるサイトを作りました！ルール判定も、勝敗判定も、ChatGPT任せです。勝てたらご報告ください。https://t.co/kflY4NuNaI pic.twitter.com/UsbNwwaHYr— きゅぶんず (@kyubuns) May 6, 2023…

Vue.jsからExpressへPOSTリクエストを送信するとき、Access-Control-Allow-Originを設定しているにも関わらずCORSエラーが発生したので、その解決策をメモしておく。 WebセキュリティやHTTPにそもそも疎いため、特にpreflight requestについては別の機会に学び直したい。 ソースコード app.post('/db_insert', async (req: Request, res: Response) => { // ブラウザを叩いても"test"が出力されないので、そもそもリクエストを受け取れていない？ console.log("test"…

現在の案件でAWSの他のサービスにあるデータを使って処理を実装しているので、どうしてもAWS Lambdaを使う必要がありました。そのため、久しぶりにAPI Gatewayを使ったところ、レスポンス情報として403エラーが返ってきてしまうので、色々ためしました。その備忘録の記事です。 手当たり次第に解決策を模索 デプロイがされているか CORSの有効化 CloudWatchでログを確認 リソースポリシーの設定 まとめ 手当たり次第に解決策を模索 そもそもこのAPI Gatewayの構築は僕が実装したのではなく、他のメンバーが途中まで実装をしてくれているところに僕が手を加えたので、どこができてい…