セキュリティエンジニアが本気でオススメする開発者向けコンテンツ 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 という括りで書かれたものはあまりありません。 あったとしても、多くは初心者向けなものが多く、ある
mozaic bootcampに参加して気づいた、自分に欠けていたWeb技術の知識メモ - ninjinkun's diary
mozaic bootcampというhttps://t.co/OfP8vuZTkfリスナーのための4日間通し勉強会に参加中。2日目の今日はkeep-aliveからのちょっとHTTP2、これからCookieの話— にんじんくん (@ninjinkun) 2019年4月29日 mozaic bootcampとは？ mozaic.fmリスナー向けの勉強会。mozaic.fmはJxck氏が主催するPodcastで、Web標準やブラウザ、プロトコルなどWeb技術をターゲットにしており、自分も愛聴している。 今回行われたbootcampはゴールデンウィークの4日間を使い、「Webを正しく理解し、正しく使う」ことを目的として行われた。 参加者はざっくり言うとそこそこ経験のあるWebエンジニアが6名、主催のJxck氏、mozaic.fmでお馴染みの矢倉氏の計8名。参加にあたってはビデオ通話による選考もあっ
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
体系的に学ぶモダン 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
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,
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」に以下の値が設定されていた場合、どちらがセキュリティ的にマシなのか？とい
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はこうなっているのか」にフォーカスして説明します。
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リクエストをブロック する仕組みです。 あるウェブサイトを開いている時、まったく関係ない別
スライド概要 シングルページアプリケーション(SPA)において、セッションIDやトークンの格納場所はCookieあるいはlocalStorageのいずれが良いのかなど、セキュリティ上の課題がネット上で議論されていますが、残念ながら間違った前提に基づくものが多いようです。このトークでは、SPAのセキュリティを構成する基礎技術を説明した後、著名なフレームワークな状況とエンジニアの技術理解の現状を踏まえ、SPAセキュリティの現実的な方法について説明します。 動画はこちら https://www.youtube.com/watch?v=pc57hw6haXk
警告 本記事に記載している内容は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
crossorigin 属性の仕様を読み解く
本記事では HTML タグに指定可能な crossorigin 属性について仕様を参照しながら詳しく解説します。crossorigin 属性は複数の意味を表しており、またそれを指定するタグの他の属性値によって振る舞いが変わってしまうことから、その挙動を正確に理解するのがなかなか難しい属性です。 HTML 仕様は日々進化しています。本記事で説明している内容は記事執筆時点のものであり、閲覧時点では古くなっている可能性があります。正確な情報を知りたい方は必ず最新の仕様を確認するようお願いします。 要点だけを知りたい方は最後の「まとめ」を読んでください。 目次 crossorigin 属性はどこで使われている？ crossorigin 属性は何を意味するのか？ request mode credentials mode crossorigin 属性の意味のまとめ crossorigin 属性の振る
L@EとCF2が不要に？！CloudFront単体でレスポンスヘッダーが設定できるようになりました | DevelopersIO
CX事業本部@大阪の岩田です。CloudFrontに待望のアップデートがあり、CloudFront単体でもレスポンスヘッダーが設定できるようになりました！ これまではCloudFront単体でレスポンスヘッダーを設定することができませんでした。S3 & CloudFrontの構成でSPAを配信するのは非常に一般的な構成ですが、この構成でそのまま脆弱性診断を受けると、セキュリティ関連のヘッダが設定されていないと指摘されるのも「あるある」でした。Lambda@Edge(L@E)やCloudFront Function(CF2)を介入させればオリジンレスポンスやビュワーレスポンスが加工できるので、これまではL@EやCF2でレスポンスヘッダを追加付与するという対応がよく採用されていました。 が、静的なレスポンスヘッダ付与のためにいちいちコードの実行が必要になるというのは、どうも無駄が多いように感じ
フロントエンド開発のためのセキュリティ入門 2月13日に『フロントエンド開発のためのセキュリティ入門』というタイトルの本を出版します。 www.shoeisha.co.jp 今回は本の内容の簡単な紹介をします。また、今回はじめて本を執筆させていただいたので、熱が冷めないうちに本を書くということについて書き残しておこうと思います。 本の内容について タイトルの通り、フロントエンドエンジニアに向けて書いたセキュリティの入門書です。 筆者はセキュリティの専門家ではありませんが、フロントエンドエンジニアとして働いています。 筆者はフロントエンドエンジニアとしてセキュリティを自ら学びましたが、セキュリティの学習の難しさを常に感じていました。 そういった同じく難しさを感じているフロントエンドエンジニアにとってセキュリティの学習の最初の一歩となる本を目指して書きました。 想定読者 メインターゲットとなる
Web API の JavaScript での取得方法について の質問があったので作ってみました。 See the Pen TexTra 翻訳 Demo by John Doe (@04) on CodePen. async function handle(e) { name = "extra"; key = "5b37d68901799f71e8937f26add0fafd06309732b"; secret = "71d1b17cfdc7e26e6232a9a750c038d2"; text = e.target.value; const oauth = OAuth({ consumer: { key, secret }, signature_method: "HMAC-SHA1", hash_function(base_string, key) { return CryptoJS.H
JSer.info #529 - JavaScript performance beyond bundle size | Read the Tea Leavesという記事では、JavaScriptのパフォーマンス測定について書かれています。 最近では、Bundle SizeについてはBundlePhobiaやWebpack Bundle Analyzerなど分かりやすく測定するツールがありますが、それ以外のJavaScriptのパフォーマンスのメトリクスについて書かれています。 ランタイムのCPUコスト、電力消費量、メモリ使用量、ディスクの使用量などのBundle Size以外のメトリクスをどのように見るのかについてまとめられています。 CORS 完全手冊というCORSについての連載記事では、 CORSの概念、対応方法、よくある間違い、CORB/CORP/COEP/COOPなど最近のオリジ
セキュリティ脆弱性診断などでたまに CSRF について指摘されることがあります。 今まではトークン発行して対応すれば良いんでしょ？ と思ってましたが、SPA のように非同期通信が前提の場合はどう対処するべきなんだろう、と疑問が出たりしたので、調べてみた結果をまとめてみました。 CSRFとは Cross Site Request Forgeries（クロスサイトリクエストフォージェリ）の略で、 サービス利用者の正規権限を利用して、意図しないタイミングでサービスの機能を実行させる攻撃手法のことを指します。 2005年に mixi 日記で発生した「ぼくはまちちゃん」で一躍有名になりました。 大量の「はまちちゃん」を生み出したCSRFの脆弱性とは？ - ITmedia エンタープライズ CSRF が発生する原因 サービスの機能を実行するプログラムへのリクエストの検証が権限情報のみであった場合に発生
Intro Referrer-Policy は、送信される Referer の値を制御することが可能だ。 このヘッダの副次的な効果をよく理解していないと、「no-referrer にして送らないのが最も安全だ」という誤解を生むことになる。 では、複数あるポリシーの中でどのような観点で、どのディレクティブを採用するのが良いのだろうか? 前提として前回の記事の「リクエストの出自をチェックすることは現代の実装のベースプラクティスである」という点を踏まえて考えてみる。 令和時代の API 実装のベースプラクティスと CSRF 対策 | blog.jxck.io https://blog.jxck.io/entries/2024-04-26/csrf.html Referer とアナリティクス Referer は、リクエストに対してその前のページの URL を送るところから始まった。 GET / H
CORS 完全手冊（一）：為什麼會發生 CORS 錯誤？
前言三年前的時候寫了一篇文章：輕鬆理解 AJAX 與跨來源請求，提到了串接 API、AJAX、same-origin policy、JSONP 以及 CORS，當時把自己想講的都放進去了，但現在回頭看，好像有很多滿重要的部分沒有提到。 三年後，再次挑戰這個主題，並且試著表達地更完整。 會想寫這個系列是因為在程式相關的討論區上，CORS 是發問頻率很高的主題，無論是前端或是後端都有可能來問相關的問題。 所以我就想說：「好，那我來寫一個系列好了，我要試著把這個主題寫到每個碰到 CORS 問題的人都會來看這個系列，而且看完以後就知道該怎麼解決問題」，這算是我對這篇文章的目標，如果文章的品質沒辦法達成這個目標，我會持續改進。 這系列一共有六篇文章，分別是： CORS 完全手冊（一）：為什麼會發生 CORS 錯誤？ CORS 完全手冊（二）：如何解決 CORS 問題？ CORS 完全手冊（三）：CO
【小ネタ】Visual Studio CodeのDebugger for ChromeでCORSを無効にする【備忘録】 | DevelopersIO
せーのでございます。 CORSを無効にしながらデバッグするのに意外と手間がかかったので、忘れないように書いておきます。 何をしたいのか Visual Studio Code(VSCode)でJavaScriptやTypeScriptの開発をする際にブラウザを使ったデバッグをしたい時があります。 そんな際に「Debugger for Chrome」という拡張機能を使うと、Chromeブラウザを使ってデバッグができます。 一方、Angularやreactなどのフロントエンドスクリプトをデバッグする際にはローカルホストでサイトを立ち上げますが、サーバーサイドAPIからデータを取得する際にCORSに引っかかってしまうため、CORSを無効にする必要があります。 ChromeにはCORS Unblockなどのextensionがあり、それをインストールして有効にしておけばCORSを回避できる、、、と思
ajaxなど、ブラウザ経由でGET, POST, DELETEリクエストを投げると、実際のリクエストが走る前にOPTIONSリクエストが送信されることがあります。 一度しかリクエストを送信していなくても、実際はOPTIONSとGETなど、２回リクエストが走っています。 APIによっては、OPTIONSリクエストを受け付けないため、Response to preflight request doesn't pass access control checkのようなエラーが返ってくる場合があります。このOPTIONSリクエストはCORSプリフライト（preflight requests）と呼ばれていて、これが通らないと、実際のGET, POST, DELETEなどのリクエストは送信されません。 このプリフライト・リクエストとは何なのか、OPTIONSリクエストを回避する方法はあるのか調べてみま
Web セキュリティの観点において、CORS（オリジン間リソース共有）は Web 開発・Web 制作に関わる方すべてが理解しておくべき仕組みです。本記事では、CORS についての概要と一般的な設定方法について解説していきます。
Updates June 21, 2022: Worker scripts also need care when cross-origin isolation is enabled. Added some explanations.Aug 5, 2021: JS Self-Profiling API has been mentioned as one of APIs that require cross-origin isolation, but reflecting recent change of the direction, it's removed.May 6, 2021: Based on feedback and issues reported we've decided to adjust the timeline for SharedArrayBuffer usage i
CookieのSameSite=Laxデフォルト化 アクセスログで影響調査 | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]
したがってSameSite=Lax化の影響を調べるには、「アンカータグとGETのfrom以外で、異なるRegistrable Domainから生成されたリクエストでCookieを使用していないか」ということを確認する必要があります。 しかしこれを漏れなく確認していくことは、なかなか骨の折れる作業ではないでしょうか。 アクセスログのRefererヘッダを見れば、異なるRegistrable Domainから送られてきたリクエストかどうか、ある程度わかりそうな気もしますが、Refererヘッダは送られないケースが多々あったり、そもそもリクエスト生成元のタグ名を判別できなかったりと完璧ではありません。 Fetch Metadataリクエストヘッダとは Fetch Metadataリクエストヘッダとは、一言で言うと「リクエストが生成されたコンテキストをサーバ側に通知するためのヘッダ」です。 ざっく
![CookieのSameSite=Laxデフォルト化 アクセスログで影響調査 | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/429d6761b29121c48e76f6c54419eaebcb802f21/height=288;version=1;width=512/https%3A%2F%2Ftechblog.raccoon.ne.jp%2Fwp-content%2Fuploads%2F2020%2F01%2Fsamesite_lax.jpg)
@aki_yok さんの DRF本 レビューをしていて Preflight について記述があったんですが、 自分が しっかり理解できていないような気がしたので CORS を絡めて簡単にまとめてみました。 昔話 👹はるか昔 🐉 XMLHttpRequest (以降 XHR という) により私達は非同期通信を手に入れました。 XMLHttpRequest - Web API | MDNXMLHttpRequest (XHR) オブジェクトは、サーバーと対話するために使用されます。ページ全体を更新する必要なしに、データを受け取ることができます。これでユーザーの作業を中断させることなく、ウェブページの一部を更新することができます。https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest しかし、この便利機能は その強力さ故に 同一
ECにも関係するSameSite属性！カートに入れたはずの商品がない？ ログインが何回も求められる？ 対策方法は？
ホームECニュースEC事業者にも関係するSameSite属性！カートに入れたはずの商品がない？ ログインが何回も求められる？ Chrome 80の仕様変更とその影響・対策（2020年2月3日追記） EC事業者にも関係するSameSite属性！カートに入れたはずの商品がない？ ログインが何回も求められる？ Chrome 80の仕様変更とその影響・対策（2020年2月3日追記） 2020.01.242024.01.30 ECニュース 2020年2月4日、Googleはバージョンアップした「Google Chrome 80」をリリース予定です。 それに伴い、プライバシー保護やセキュリティ強化を目的に、Cookieの動作が一部変更されます。 そこで登場するのが、SameSite（セイムサイト）属性。 この記事では、
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
『フロントエンド開発のためのセキュリティ入門』という本を出版します！ - 別にしんどくないブログ
TexTraの翻訳 APIをJavaScriptだけで取得する - Qiita
2021-03-02のJS: Bundle Size以外のJavaScriptパフォーマンス、CORS 完全手冊
Web API の CSRF 対策まとめ【追記あり】 - Qiita
Referrer-Policy の制限を強めると安全になるという誤解 | blog.jxck.io
CORS: OPTIONSリクエスト（preflight request）を避ける - Qiita
CORS & Same Origin Policy 入門 | yamory Blog
Making your website "cross-origin isolated" using COOP and COEP
CORS とか Preflight とかよくわかんないよな
tscubic.com
mainichi.doda.jp
fan.hatenablog.jp
full-count.jp
shonenjumpplus.com
www.youtube.com