Cloudflare R2で静的ファイルを配信する - CORS設定を添えて -
【2023年02月13日追記】 コンソールからCORSの設定が出来るようになったようです。 こちらの記事はコンソールから設定できない場合にAPIから設定する方法です。 はじめに 先月にGAとなったCloudflare R2を使って静的ファイルを配信する場合の設定や使用例などを記事に起こしていきます。 【前提条件】 Cloudflareのアカウント作成方法については触れませんのでご自身で調べて下さい Cloudflareのコンソール画面を紹介していますが、言語設定を英語にしているため、そのままの紹介です Next.jsを例にビルド済みのJavaScriptやCSSの配信例を記載します 静的ファイルは専用のサブドメインから配信するものとします まとめ ざっと記事として言いたいことから public domain accessが使えるようになっているので使用するのが吉 AWS S3やGCSと異な
今日こそ理解するCORS - YouTube
CORS(Cross-Origin Resource Sharing)はややこしいですよね。 逆転の発想で、理解しやすい方法を考えてみました。 今日こそCORSを理解しましょう。原理からCORSの基本を丁寧に解説します。 【PR】 【キャンペーン】ウェブ・セキュリティ基礎（徳丸基礎試験認定）！受講料半額！ https://www.school.ctc-g.co.jp/campaign/20211018_079641.html 当社が教材を監修した研修コース「ウェブ・セキュリティ基礎（徳丸基礎試験認定）」コースをCTCテクノロジーが実施されることを歓迎します。 「ウェブ・セキュリティ基礎（徳丸基礎試験認定）」はWebセキュリティの基礎を学習するのに最適な研修コースとして企画段階から当社が参画しており、これからウェブ・セキュリティを学習される方に自信を持ってお勧めいたします。 この研修コー
Developers don't understand CORS
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
CORSの仕様はなぜ複雑なのか
Webアプリケーションを実装していると高確率で CORS の問題にぶつかります。CORSがどのようなものかはリンクしたMDNなど既存の解説を読むのが手っ取り早いと思いますが、「なぜそのように設計されたのか」という観点での説明はあまり見ないため、昔の資料の記述や現在の仕様からの推測をもとに整理してみました。 CORSとは 現代のWebはドメイン名をもとにした オリジン (Origin) という概念 (RFC 6454) をもとに権限管理とアクセス制御を行っています。その基本となるのが以下のルールです。 Same-origin policy (同一生成元ポリシー): 同じオリジンに由来するリソースだけを制御できる。 上記Wikipedia記事によるとSOPの概念は1995年のNetscape 2.02に導入されたのが最初のようです。当時のドキュメンテーションを読む限り、これはウインドウ越しに別
なんとなく CORS がわかる...はもう終わりにする。 - Qiita
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
オリジン間リソース共有 (CORS) - HTTP | MDN
HTTP ガイド リソースと URI ウェブ上のリソースの識別 データ URL MIME タイプ入門 よくある MIME タイプ www 付きと www なしの URL の選択 HTTP ガイド HTTP の基本 HTTP の概要 HTTP の進化 HTTP メッセージ 典型的な HTTP セッション HTTP/1.x のコネクション管理 プロトコルのアップグレードの仕組み HTTP セキュリティ Content Security Policy (CSP) HTTP Strict Transport Security (HSTS) X-Content-Type-Options X-Frame-Options X-XSS-Protection サイトの安全化 HTTP Observatory HTTP アクセス制御 (CORS) HTTP 認証 HTTP キャッシュ HTTP の圧縮 HTT
crossorigin 属性の仕様を読み解く
本記事では HTML タグに指定可能な crossorigin 属性について仕様を参照しながら詳しく解説します。crossorigin 属性は複数の意味を表しており、またそれを指定するタグの他の属性値によって振る舞いが変わってしまうことから、その挙動を正確に理解するのがなかなか難しい属性です。 HTML 仕様は日々進化しています。本記事で説明している内容は記事執筆時点のものであり、閲覧時点では古くなっている可能性があります。正確な情報を知りたい方は必ず最新の仕様を確認するようお願いします。 要点だけを知りたい方は最後の「まとめ」を読んでください。 目次 crossorigin 属性はどこで使われている？ crossorigin 属性は何を意味するのか？ request mode credentials mode crossorigin 属性の意味のまとめ crossorigin 属性の振る
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Don't Snore on CORS | CSS-Tricks
CORSの原理を知って正しく使おう | YouTube