セキュリティエンジニアが本気でオススメする開発者向けコンテンツ 20選 - Flatt Security Blog
画像出典: 書籍...記事中に掲載した販売ページ / Webサイト...スクリーンショット はじめに こんにちは。株式会社Flatt Securityの @toyojuni です。 突然ですが、弊社Flatt Securityは「開発者に寄り添ったセキュリティ」を標榜しています。Webアプリケーションなどに脆弱性がないか調査する 「セキュリティ診断」 においても、セキュアコーディング学習プラットフォーム 「KENRO」 においても、いかに開発者フレンドリーなサービスを提供できるかという点を大事にしています。 そんな弊社はお客様からさまざまな開発におけるセキュリティのアドバイスを求められることも多いのですが、その中で「開発に役に立つセキュリティ」という切り口では、なかなかまとまっているリファレンス集がないという課題に気付かされました。 そこで、社内でアンケートを実施して「開発者にオススメのセ
本当に使ってよかったOpenAPI (Swagger) ツール | フューチャー技術ブログ
サードパーティ製のツール本家からは上述のツールが提供されていますが、サードバーティ製の様々なツールが世の中には存在します。 エコシステムが成熟しているのもSwaggerを利用するメリットの一つですね。 https://openapi.tools/ 冒頭のとおり、このサードパーティ製のツールの中で実際に利用して良かったツールを3つご紹介したいと思います。 Stoplight Studiohttps://stoplight.io/studio/ 1つ目のツールは「Stoplight Studio」というAPI仕様を記載するためのGUIエディタとなります。 今までSwagger Editorを利用してYAMLを書いていたそこのみなさん、YAML筋力はもう必要ありません。 Design APIs 10x faster の謳い文句どおり、Stoplight Studioを使えばGUIで直感的に、高速
こちらのスライドは以下のサイトにて閲覧いただけます。 https://www.docswell.com/s/ockeghem/ZM6VNK-phpconf2021-spa-security シングルページアプリケーション(SPA)において、セッションIDやトークンの格納場所はCookieあるいはlocalStorageのいずれが良いのかなど、セキュリティ上の課題がネット上で議論されていますが、残念ながら間違った前提に基づくものが多いようです。このトークでは、SPAのセキュリティを構成する基礎技術を説明した後、著名なフレームワークな状況とエンジニアの技術理解の現状を踏まえ、SPAセキュリティの現実的な方法について説明します。 動画はこちら https://www.youtube.com/watch?v=pc57hw6haXkRead less
長い記事なので先に結論を書きます。 Spectre の登場で、ウェブサイトに必要とされるセキュリティ要件は増えました。具体的に必要な対策は下記の通りです。 すべてのリソースは Cross-Origin-Resource-Policy ヘッダーを使って cross-origin なドキュメントへの読み込みを制御する。 HTML ドキュメントには X-Frame-Options ヘッダーもしくは Content-Security-Policy (CSP) ヘッダーの frame-ancestors ディレクティブを追加して、cross-origin なページへの iframe による埋め込みを制御する。 HTML ドキュメントには Cross-Origin-Opener-Policy ヘッダーを追加して popup ウィンドウとして開かれた場合の cross-origin なページとのコミュニ
CORSの仕様はなぜ複雑なのか
Webアプリケーションを実装していると高確率で CORS の問題にぶつかります。CORSがどのようなものかはリンクしたMDNなど既存の解説を読むのが手っ取り早いと思いますが、「なぜそのように設計されたのか」という観点での説明はあまり見ないため、昔の資料の記述や現在の仕様からの推測をもとに整理してみました。 CORSとは 現代のWebはドメイン名をもとにした オリジン (Origin) という概念 (RFC 6454) をもとに権限管理とアクセス制御を行っています。その基本となるのが以下のルールです。 Same-origin policy (同一生成元ポリシー): 同じオリジンに由来するリソースだけを制御できる。 上記Wikipedia記事によるとSOPの概念は1995年のNetscape 2.02に導入されたのが最初のようです。当時のドキュメンテーションを読む限り、これはウインドウ越しに別
Developers Summit 2023 10-A-4 「フロントエンド開発のためのセキュリティ入門」の発表資料です。 https://event.shoeisha.jp/devsumi/20230209/session/4176/ 「HTTPS化」「CORS」「XSS」「脆弱なライブラリのチェック」について説明しています。
CORSの仕組みをGIFアニメで分かりやすく解説
クロスオリジンのリクエストを安全にするための同一生成元ポリシーとオリジン間のリソース共有（CORS）の仕組みをGIFアニメで解説した記事を紹介します。 ✋🏼🔥 CS Visualized: CORS by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ✋🏼同一生成元ポリシー（Same-Origin Policy）とは 🔥クライアントサイドのCORS 💻サーバーサイドのCORS 🚀プリフライト リクエスト（Preflighted Requests） 🍪認証 はじめに 「Access to fetched to fetched has been blocked by CORS policy error」と赤い文字がコンソールに表示されると、デベロッパーなら誰でもフラストレーションが
same-site/cross-site, same-origin/cross-originをちゃんと理解する
same-site/cross-site, same-origin/cross-origin の違いを曖昧なままにしておくと、分からないことや誤解がモリモリ増えていきますので、早いうちに定義を覚えちゃいましょう。 元記事はこちら: Origin とは Origin は scheme (http とか https とか)、hostname、port の組み合わせを指す。same-origin と言った場合、これらすべてが一致するものを示している。一部でも異なるものはすべて cross-origin。 Origin A Origin B 解説
「Web 技術解体新書」執筆について
「Web 技術解体新書」執筆について Intro 「Web 技術解体新書(Web Anatomia)」という書籍の執筆と、 zenn 上での販売についてアナウンスします。 各章を分割して執筆し公開していく予定です。 第一章: Origin 解体新書 Web 技術解体新書とは Web というものを正しく理解するために必要な知識や技術は日増しに増え、それに従い学ぶためのコストもかなり上がってきています。 一方で、多くの書籍や雑誌、 Web 上の記事、動画や音声コンテンツは充実しており、学ぶための手段もかなり広がっています。 しかし、 Web に関わる技術書籍の多くは、何らかのフレームワークの解説や、 JS/CSS などの特定技術、特定の非機能要件に特化したものが多く、(その括りの曖昧さ故) Web という括りで書かれたものはあまりありません。 あったとしても、多くは初心者向けなものが多く、ある
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 してみる 試しに、 CSP で外部への通信がそれなりに制限されている GitHub から、 example.com への fetch を成功させてみる (外部サイトへの通信は、認証情報や秘密の情報の漏洩などに気をつ
体系的に学ぶモダン Web セキュリティ (#seccamp 全国大会 2019 B5) / Learn Modern Web Security Systematically
セキュリティ・キャンプ全国大会 2019 開発と運用トラックで提供した講義の資料の一部です。誤りに気がついたら、ぜひ @y0n3uchy あるいは @lmt_swallow にお知らせください。
こんにちは。LINEヤフー株式会社でテキストマイニングや自然言語処理などをやっている山下（ @yto ）です。 Yahoo!デベロッパーネットワークのテキスト解析 Web API が CORS（Cross-Origin Resource Sharing）対応したため、サーバがなくてもブラウザから直接 Web API にアクセスできるようになりました（参考）。 そのテキスト解析 Web API の機能の一つである「校正支援」は日本語文章の品質チェック（校正）を支援するもので、文字の入力ミス、言葉の誤用、わかりにくい表記、不適切な表現などが使われていないかをチェックして、指摘します（内部の辞書データをベースとしているため完全なものではないことをご承知おきください）。 この校正支援機能のサンプルプログラムとして「HTML ファイル1つだけで完結する校正支援ツール」を作ったので紹介します。入力され
DevTools の新機能 (Chrome 96) 公開日 2021年10月25日月曜日 • 更新日 2021年10月25日月曜日 翻訳先言語： English, Español, Português, 한국어, 中文, Pусский # プレビュー機能: 新しい CSS Overview パネル新しい CSS Overview パネルを使用するとあなたのページの CSS を改善できる可能性を確認できます。 CSS Overview パネルを開き、Capture overview をクリックしてページの CSS のレポートを生成してください。 情報をさらに詳細化することも可能です。例えば、Colors セクションの色をクリックして同じ色を適用する要素のリストを表示できます。いずれかの要素をクリックすると Elements パネルでその要素が開きます。 CSS Overview パネルはプ
✎ 基礎知識編 CSRF とは何か？ CSRF (Cross-Site Request Forgeries) を意訳すると 「サイトを跨ぐ偽造リクエスト送信」 です。 簡単に言うと，罠サイトを踏んだ結果，自分が無関係な別のサイト上で勝手にアクションをさせられる攻撃です。具体的には，ネットサーフィンをしているうちに知らない間に自分のIPアドレスから掲示板に犯罪予告が書かれていた，といった被害を受けます。 この攻撃を防ぐ責任は「無関係な別のサイト（具体例では掲示板）」側にあります。Web サイト作成者には，利用者が意図しない操作を勝手に実行されないように，利用者を守る責任があります。 また上図からも分かる通り，この攻撃の最大の特徴はアカウントがハッキングされたというわけではないということです。ログイン状態の利用者のWebブラウザを利用して攻撃が行われている，というのが重要です。 オリジンとは何
Access to XMLHttpRequest at 'http://localhost:8081' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is ther
Access-Control-Allow-Origin に設定する値として"マシ"なのはどちらか - セキュアスカイプラス
はじめに こんにちは。ご無沙汰しております。脆弱性診断員の百田です。 今回は、実際に脆弱性診断をしていたときに考えていた、そこまで重要でもないと思われることをここに吐き出します。 その内容は、題名にもあるとおりレスポンスヘッダの「Access-Control-Allow-Origin」に設定される値についてです。 注意点として「Access-Control-Allow-Origin」に設定される値自体はどうでも良くないです。重要です。 理由がよくわからない場合は以下の記事をご覧いただければと思います。 https://developer.mozilla.org/ja/docs/Web/HTTP/CORS では、そこまで重要でもないと思ったのは何なのか……。それは「Access-Control-Allow-Origin」に以下の値が設定されていた場合、どちらがセキュリティ的にマシなのか？とい
Origin 解体新書
Web 技術解体新書 第一章 Origin 解体新書 Same Origin Policy とは Web において非常に重要なセキュリティモデルの 1 つだ fetch や XHR でリクエストを送信したときに、 CORS 違反で失敗したり、 Preflight という謎のリクエストが送信されたりして悩んだ経験があるかもしれない。これらは全て、ユーザを保護するために設けられた Same Origin Policy という制限を、ブラウザが遵守した結果なのだ。 本書はこの重要な Origin という概念について、そもそもなぜそんなものが必要なのかという背景や、それがユーザを保護するメカニズム、 JSONP はなぜ危険なのか、 Preflight が飛ぶ理由、 Service Worker など新しい API との連携、 Spectre によって発覚した脆弱性と CORP,COOP,COEP,
Intro Origin は Web におけるセキュリティモデルの一つとして、コンテンツ間の Communication に関する境界を定義し、リソースを保護してきた。 しかし、 Spectre の発覚以降、 Communication に関する制限だけではなく Isolation によるメモリレベルでのアクセス制御が必要となった。 そこで現在作業されているのが、 CORB, CORP, COEP, COOP といった仕様群であり、これは Web におけるセキュリティモデルの更新作業と見ることができる。 概要と現状について解説する。 DEMO & Resources 量が多いため、動作する DEMO と関連リソースは、ページ下部にまとめてある。 CORS による Cross Origin Communication の制限 CORS は、平たく言えば、リソース提供元(サーバ)が、クライアン
CORSの原理を知って正しく使おう | YouTube
最近質問サイト等でCORS(Cross-Origin Resource Sharing)に関する質問が急増していますが、その多くがCORSの原理をまったく理解せずに、とにかくCORSの制限を回避して動かす方法を求めるように見受けます。しかし、CORSはブラウザのセキュリティ機能なので、原理を知らないまま「動けばよい」ことを求めると重大な脆弱性の原因になりかねません。この動画では、CORSの原理、特に「なぜCORSはこうなっているのか」にフォーカスして説明します。
スライド概要 シングルページアプリケーション(SPA)において、セッションIDやトークンの格納場所はCookieあるいはlocalStorageのいずれが良いのかなど、セキュリティ上の課題がネット上で議論されていますが、残念ながら間違った前提に基づくものが多いようです。このトークでは、SPAのセキュリティを構成する基礎技術を説明した後、著名なフレームワークな状況とエンジニアの技術理解の現状を踏まえ、SPAセキュリティの現実的な方法について説明します。 動画はこちら https://www.youtube.com/watch?v=pc57hw6haXk
CloudFront と API Gateway で SPA の CORS 問題をイイ感じに解決する | DevelopersIO
渡辺です。 弊社ではお客様の悩みや問題を解決するアンサーブログという文化がありますが、新しく「ドキュメントはブログ」というのを試しています。 現在、 Developers.IO Cafe はSPA（Single Page Application）で構成されています。 SPAとは、単一のウェブページ上でJavaScriptによるルーティングの処理を行うWebアプリケーションです。 一般的に、SPAで内のコンテンツは、APIを通して取得します。 この時、悩ましいのが CORS(Cross-Origin Resource Sharing) です。 本エントリーでは、カフェのSPAでとったCORS対策について解説します。 CORSとは？ CORSとは、簡単に言うと、 ウェブサイトが異なるドメインに対するAPIリクエストをブロック する仕組みです。 あるウェブサイトを開いている時、まったく関係ない別
警告 本記事に記載している内容はCORSだけでなく、ブラウザの様々なセキュリティ機能を無効化する危険な行為です。 今すぐにセキュリティを無効化しないといけない事情がある場合を除いて安易に実施しないでください。セキュリティを無効化した状態でのインターネット接続など言語道断です。 上記内容、そして本記事に記載している行為を理解している方のみ自己責任でお願いします。 Google Chrome 以下のコマンドでChromeを起動する。--user-data-dirを指定しないと既存の設定でChromeが起動し、セキュリティは有効のままだった。 不要になったらここで作成したデータディレクトリは消せばよい。 <Chrome実行ファイル> --disable-web-security --user-data-dir=<データディレクトリ>
ミルクボーイがCORSを説明しました
はじめに 内海「どうもー ミルクボーイですー」 駒場「お願いしますー」 内海「あーありがとうございますぅー ねっ 今XSS攻撃をいただきましたけどもね」 駒場「こんなん なんぼあっても良いですからね」 内海「ねー あればあるだけ良いですからね ほんとにね」 駒場「いきなりですけどね うちのオカンがね 好きなセキュリティに関する用語があるらしいんやけど」 内海「あっ そーなんや」 駒場「そのセキュリティに関する用語をちょっと忘れたらしくてね」 内海「好きなセキュリティに関する用語忘れてもうて どないなってんねんそれ」 駒場「でまあ色々聞くんやけどな 全然わからへんねんな」 内海「分からへんの？ ほな俺がね オカンの好きなセキュリティに関する用語 ちょっと一緒に考えてあげるから」 内海「どんな特徴ゆうてたかってのを教えてみてよー」 CORSとは 駒場「あのー Webブラウザ上で異なるオリジン間
One of the best things about working in full stack consulting is that I get to work with a great number of developers with different skill levels in companies from various sizes and industries. This provides an opportunity to see what universal struggles come up. One that seems common and relevant recently is this: Too many web developers do not understand how CORS works. This seems particularly t
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SPAセキュリティ入門～PHP Conference Japan 2021
Spectre の脅威とウェブサイトが設定すべきヘッダーについて
フロントエンド開発のためのセキュリティ入門
Chrome113でHTTPヘッダを上書きしていろんな状態をお試しできる - hogashi.*
1つの HTML ファイルだけで完結する校正支援ツールの作り方
DevTools の新機能 (Chrome 96) - Chrome for Developers
これで完璧！今さら振り返る CSRF 対策と同一オリジンポリシーの基礎 - Qiita
なんとなく CORS がわかる...はもう終わりにする。 - Qiita
Site Isolation 及び Web のセキュリティモデルの更新 | blog.jxck.io
SPAセキュリティ入門～PHP Conference Japan 2021 | ドクセル
ブラウザでCORSを無効化する方法 - Qiita
Developers don't understand CORS