タグ

JavaScriptとHTTPに関するraimon49のブックマーク (27)

  • 令和時代の API 実装のベースプラクティスと CSRF 対策 | blog.jxck.io

    Intro CSRF という古の攻撃がある。この攻撃を「古(いにしえ)」のものにすることができたプラットフォームの進化の背景を、「Cookie が SameSite Lax by Default になったからだ」という解説を見ることがある。 確かに、現実的にそれによって攻撃の成立は難しくなり、救われているサービスもある。しかし、それはプラットフォームが用意した対策の質から言うと、解釈が少しずれていると言えるだろう。 今回は、「CSRF がどうして成立していたのか」を振り返ることで、当にプラットフォームに足りていなかったものと、それを補っていった経緯、当にすべき対策は何であるかを解説していく。 結果として見えてくるのは、今サービスを実装する上での「ベース」(not ベスト)となるプラクティスだと筆者は考えている。 CSRF 成立の条件 例えば、攻撃者が用意した attack.examp

    令和時代の API 実装のベースプラクティスと CSRF 対策 | blog.jxck.io
  • はてなスターのひみつ - Hatena Developer Blog

    ハッピーホリデー!id:cockscombです。この記事ははてなエンジニアAdvent Calendarの8日目のエントリです。 今年1月、はてなスターのリニューアルを行いました。リニューアルの内容は告知をご参照ください。 はてなスターのリニューアルでは、クロスオリジンの問題を解決するために特別な実装をしています。今回は、ホリデーシーズンをお祝いして、そのひみつを詳 (つまび)らかにします。 はてなスターとクロスオリジン はてなスターは、はてなブログなどに埋め込んで利用されます。はてなブログは hatenablog.com や hatenadiary.jp などのサブドメインを利用しており、さらにはてなブログProでは独自のドメインを設定できます。 はてなスターは複数の異なるドメイン名のサイトから利用される、ということです。 要するにはてなスターはクロスオリジンで利用されます。一方ではてな

    はてなスターのひみつ - Hatena Developer Blog
  • Introducing Content Security Policy - MDC Doc Center

    HTTPガイドHTTP の概要HTTP の進化典型的な HTTP セッションHTTP メッセージMIME タイプ(IANA メディア種別)よくある MIME タイプHTTP の圧縮HTTP キャッシュHTTP 認証HTTP Cookie の使用HTTP のリダイレクトHTTP 条件付きリクエストHTTP 範囲リクエストHTTP クライアントヒントCompression Dictionary Transport Experimental Network Error Logging Experimental コンテンツネゴシエーション既定の Accept 値の一覧ユーザーエージェント文字列を用いたブラウザーの判定HTTP/1.x のコネクション管理プロトコルのアップグレードの仕組みプロキシーサーバーとトンネリングプロキシー自動設定ファイルHTTP セキュリティHTTP Observatory実

    Introducing Content Security Policy - MDC Doc Center
    raimon49
    raimon49 2022/09/25
    Content-Security-Policyヘッダ 記述例
  • CORSの仕様はなぜ複雑なのか

    Webアプリケーションを実装していると高確率で CORS の問題にぶつかります。CORSがどのようなものかはリンクしたMDNなど既存の解説を読むのが手っ取り早いと思いますが、「なぜそのように設計されたのか」という観点での説明はあまり見ないため、昔の資料の記述や現在の仕様からの推測をもとに整理してみました。 CORSとは 現代のWebはドメイン名をもとにした オリジン (Origin) という概念 (RFC 6454) をもとに権限管理とアクセス制御を行っています。その基となるのが以下のルールです。 Same-origin policy (同一生成元ポリシー): 同じオリジンに由来するリソースだけを制御できる。 上記Wikipedia記事によるとSOPの概念は1995年のNetscape 2.02に導入されたのが最初のようです。当時のドキュメンテーションを読む限り、これはウインドウ越しに別

    CORSの仕様はなぜ複雑なのか
  • Update on User-Agent String Reduction in Chrome

    $200K 1 10th birthday 4 abusive ads 1 abusive notifications 2 accessibility 3 ad blockers 1 ad blocking 2 advanced capabilities 1 android 2 anti abuse 1 anti-deception 1 background periodic sync 1 badging 1 benchmarks 1 beta 83 better ads standards 1 billing 1 birthday 4 blink 2 browser 2 browser interoperability 1 bundles 1 capabilities 6 capable web 1 cds 1 cds18 2 cds2018 1 chrome 35 chrome 81

    Update on User-Agent String Reduction in Chrome
  • サーバサイドレンダリングの導入から生じるSSRF | セキュリティブログ | 脆弱性診断(セキュリティ診断)のGMOサイバーセキュリティ byイエラエ

    オフェンシブセキュリティ部の山崎です。サーバサイドレンダリング(SSR)の導入によってSSRFが発生する問題を見つける機会があったため、記事では実例を交えながら紹介したいと思います。 サーバサイドレンダリング(SSR)とは? 記事で扱うSSRとは「サーバ上でHTMLを出力すること」を指しています。ただしerbやjspのようなテンプレートからHTMLを出力するのとは異なり、一般的には以下のようにクライアントサイドレンダリング(CSR)の文脈で使われることが主です。 近年のVue.jsやReactを代表するようなWebフロントエンドフレームワークはブラウザ上で動的にDOMツリーを構築して画面を描画(CSR)するのが主流となっています。これによってページ遷移を挟まずユーザ体験のよいシングルページアプリケーション(SPA)が作ることができるというメリットがあります。 ただ、単純なSPAにはデメ

    サーバサイドレンダリングの導入から生じるSSRF | セキュリティブログ | 脆弱性診断(セキュリティ診断)のGMOサイバーセキュリティ byイエラエ
    raimon49
    raimon49 2021/03/23
    HTTPヘッダ経由でのインジェクション
  • crossorigin 属性の仕様を読み解く

    記事では HTML タグに指定可能な crossorigin 属性について仕様を参照しながら詳しく解説します。crossorigin 属性は複数の意味を表しており、またそれを指定するタグの他の属性値によって振る舞いが変わってしまうことから、その挙動を正確に理解するのがなかなか難しい属性です。 HTML 仕様は日々進化しています。記事で説明している内容は記事執筆時点のものであり、閲覧時点では古くなっている可能性があります。正確な情報を知りたい方は必ず最新の仕様を確認するようお願いします。 要点だけを知りたい方は最後の「まとめ」を読んでください。 目次 crossorigin 属性はどこで使われている? crossorigin 属性は何を意味するのか? request mode credentials mode crossorigin 属性の意味のまとめ crossorigin 属性の振る

    crossorigin 属性の仕様を読み解く
  • Deno 1.0

    Dynamic languages are useful tools. Scripting allows users to rapidly and succinctly tie together complex systems and express ideas without worrying about details like memory management or build systems. In recent years programming languages like Rust and Go have made it much easier to produce sophisticated native machine code; these projects are incredibly important developments in computer infra

    Deno 1.0
    raimon49
    raimon49 2020/05/14
    イラスト神々しい
  • 型付き ⊄ 型なし - soutaroブログ

    最近、TypeScriptについて考えることが多い。SideCIでWebフロントエンドの開発に使いはじめたこともあるし、Steepの開発をしていて「TypeScriptだとどうなるんだっけ??」などと言いながら試してみることもある。 TypeScriptは型付きのJavaScriptである。構文はほとんど同じで、使えるライブラリもかなり近い。JavaScriptへの変換はかなり自明で、ランタイムは全く同じ。性能の差はない。Webpackやnpmを初めとするツール群もかなり共通しているし、アプリケーションも似たようなもん。書いている気分には、ほとんど差がない。つまり、TypeScriptJavaScriptでプログラミングしているときに、なにか違いを感じるとすれば、それは(ほとんど)型付きの言語と型なしの言語の差と考えて良い。 RubyJavaを比較するのとは、全然話が違う。構文も意味も

    型付き ⊄ 型なし - soutaroブログ
  • ep20 Browser | mozaic.fm

    Theme 第 20 回のテーマは Browser です。 今回は @takoratta さんをお迎えして、ブラウザは今どうなっているのか、そして、その進化は Web の進化とどう関わっているのかにつて議論しました。 Show Note 及川さんとブラウザの関わり JUNET NCSA Mosaic Netscape DHTML ActiveX なぜ新しくブラウザが必要だったのか? living on the web IE Toolbar V8 成せたこと成せなかったこと Hosted App と Packaged App Chrome Web Store Gears ブラウザはここ数年でどう変わったか? PhoneGap Cordova Electron Extensible Web ブラウザの肥大化問題 TPAC 2015 IETF 94 Chrome Dev Summit Chrom

    ep20 Browser | mozaic.fm
  • ActiveXコントロールは死んだ L'eclat des jours(2015-04-04)

    _ ActiveXコントロールは死んだ 消費者市場ではフラッシュなどを除けばとっくの昔に死んでいるが、業務用としても死んでいる。 最近、やっとそれが動きが遅いところでも理解されはじめたようだ。と、とあるシステムのアーキテクチャを見て感慨深かった。 死んだ理由はいろいろあるが、一番重要なのは、結局のところマシンとそれを取り巻くパワーの向上によって、JavaScriptがまともな速度で動くようになったこと、ネットワークが速くそこそこ信頼性が向上したことだ。 それにともなって、各種の規格に対する知識が雰囲気として知れ渡って来た(正確に理解している層は最初から正確に理解しているわけだが、そうではなく、なんだかわけがわからないと考えている上に調べる気も知る気も無い層が、なんだかありふれていて普通に手が届くものだという曖昧模糊たるコンセンサスが生じたということ)ことが挙げられる。それが証拠に初心者です

    raimon49
    raimon49 2015/04/04
    なんだかわけがわからないと考えている上に調べる気も知る気も無い層への普及。
  • CSP Lv.2の話

    #ssmjp 2014/10 XSSの運用の話 間違いなどありましたら @yagihashoo まで。 ## 10/28 9:26追記 nonce-value、規格上はBase64だよ!という指摘をいただいたのでスライド18-19を修正しました。 詳細は以下をご覧ください。 http://www.w3.org/TR/CSP2/#source-list-valid-nonces ## 10/29 15:00追記 Path matchingの例示について間違いがあったためスライド14を修正しました。

    CSP Lv.2の話
  • CORS(Cross-Origin Resource Sharing)について整理してみた | DevelopersIO

    ブラウザからAmazon S3に直接ファイルをアップロードしたい 先日、Amazon S3にファイルをアップロードするWebアプリを作ろうとして色々調べていたところ、S3にCORSという仕様のクロスドメインアクセスの設定をすることによって、ブラウザから直接S3にアップロードをする方法にたどり着きました。ただ、この方法を使うにあたってはCORSというクロスドメインアクセスの仕様をきちんと理解しておいた方が良さそうでしたので、まずはCORSについて自分なりに整理してみました。 なお、弊社の横田がCORSとS3についての記事を以前書いていますので、S3のCORSサポートに関する概要を知りたい方はそちらをご覧下さい。 CORS(Cross-Origin Resource Sharing)によるクロスドメイン通信の傾向と対策 CORS ブラウザでAjax通信を行う際には、同一生成元ポリシー(Same

    raimon49
    raimon49 2014/05/28
    CORS対応サーバ側実装の例。Originフィールドのチェック、HTTPメソッドがOPTIONSでヘッダにAccess-Control-Request-Methodフィールドでpreflightか切り分け。クライアント側からpreflightリクエストの発生にはContent-Typeにapplication/jsonを付与。
  • XMLHttpRequest#responseURL について - xK.memo

    今年の2月に WHATWG の XMLHttpRequest (XHR) の仕様に追加された responseURL プロパティが、先日 Firefox に実装された (https://bugzil.la/998076) のでそのことについて書く。 responseURL は XHR のリクエストに対するレスポンスの URL を文字列で返すプロパティで、リダイレクトが発生した場合は最終的なリダイレクト先の URL を返すようになっている。つまり Greasemonkey の GM_xmlhttpRequest にある finalUrl で取得できる情報と同じものを取得できるプロパティだと言える。 responseURL が XHR の仕様に追加される以前の状態でも、 xhr.responseType === "document" の場合に xhr.response.URL 経由で fina

    XMLHttpRequest#responseURL について - xK.memo
    raimon49
    raimon49 2014/05/24
    リダイレクト先のURLが取得可能。
  • Google先生の検索結果リンクが予想以上に作り込まれていた件 - Y's note

    Index 検索結果のリンクは単なるRedirectorでは無かった 検索結果のhttps化 httpsからhttpページへの遷移ではブラウザはRefererを送らない Google先生はRerererを送る仕組みを実装してくれた Refererが送信される処理の流れを追う httpsからhttpsページへの遷移はどうなるか Google Analyticsで検索Queryが「not provided」となる当の理由 まとめ 検索結果のリンクは単なるRedirectorでは無かった 知らなかったのが僕だけだったら凄い恥ずかしい内容なんですが、今までGoogle先生の検索結果として表示されるリンクのURLはGoogle内部でClick集計するためのRedirector機能だと思っていました。カウントアップの集計を記録したら来のURLに遷移させるような。当然そのClick数を集計する機能も

    Google先生の検索結果リンクが予想以上に作り込まれていた件 - Y's note
    raimon49
    raimon49 2014/01/02
    間にlocation.replace() or meta http-equiv="refresh"要素でページ遷移させるhttpのページを挟んでいるからそこがRefererとして飛んでいる。ただし検索クエリのqパラメータは意図的に削除されている。
  • Interactive Reading Community (Ver.6)

    Interactive Reading Community (Ver.6)
  • Referrer を制御する - Qiita

    Web ブラウザーは通常 HTTP 要求の Referer: ヘッダーに参照元ページの URL を入れますが (あるいは document.referrer で参照元ページの URL を取得できますが)、 Web サイト側でこれを制御したいことがあります。 例えば、次のような場面が想定されます。 URL にユーザー名や秘密の ID などを含めざるを得ない時は、プライバシーやセキュリティーの観点から、この URL を外部に漏らしたくありません。 社内システムに URL を貼りたいことがありますが、社内システムの URL を外部に漏らしたくありません。 Web アプリケーションの開発用サーバーは、その所在を外部に漏らしたくありません。 投稿者と友達のみに公開される SNS の投稿にリンクが含まれる時、その個別 URL を漏らしたくありません。 (SNS 全体の URL が漏れることは問題ありま

    Referrer を制御する - Qiita
    raimon49
    raimon49 2013/11/07
    >HTTP ヘッダーの名前以外はすべて「r」が2つの referrer ですので注意しましょう。
  • HTML5時代のWeb開発者が知らないとガチヤバな3つの未来予測と6つの脆弱性対策

    8月21~23日にパシフィコ横浜で開催された「CEDEC 2013」では、Webの世界に関するセッションも数多く行われた。記事ではその中から、サイボウズ・ラボの竹迫良範氏による「HTML5のこれまでとこれから、最新技術の未来予測」と、セキュリティコミュニティでは大変著名なネットエージェント、長谷川陽介氏による「HTML5時代におけるセキュリティを意識した開発」の2つのセッションの様子をお送りしよう。 竹迫氏が「HTML」の周りの最新技術と、3つの未来予測を語る 未来予測その1:通信は暗号化が標準に――「スタバでドヤリング」から考える最新技術 竹迫氏はまず、スターバックスでスタイリッシュなMacBook Airをこれ見よがしに使う、「ドヤリング」という技術(?)について写真を出すところから講演を始めた。 実は、この「ドヤリング」、公衆無線LANを利用すると盗聴のリスクがあることが指摘されて

    HTML5時代のWeb開発者が知らないとガチヤバな3つの未来予測と6つの脆弱性対策
    raimon49
    raimon49 2013/09/06
    Outbound Port 80 Blocking 常時SSL
  • CDN performance in numbers - CDNperf

    Information All results are based on RUM (Real User Metrics) data from users all over the world We gather and analyze more than 300million tests every day A 2500 millisecond timeout is set. If a query takes longer, its marked as timeout The data is updated once per hour. Use perfops.net to get real-time data "Performance" is the time it took for a user to download a 500byte image from a CDN. Durin

    CDN performance in numbers - CDNperf
    raimon49
    raimon49 2013/07/01
    httpsのレイテンシかなり違う。
  • Same-Origin Policy とは何なのか。 - 葉っぱ日記

    ちょっと凝ったWebアプリケーションを作成していたり、あるいはWebのセキュリティに関わっている人ならば「Same-Origin Policy」(SOP)という言葉を一度は聞いたことがあると思います。日語では「同一生成元ポリシー」あるいは「同一生成源ポリシー」などと訳されることもありますが、個人的には「オリジン」は固有の概念を表す語なので下手に訳さず「同一オリジンポリシー」と書いておくのが好きです。 さて、この「オリジン」とは何なのかという話ですが、これは「RFC 6454 - The Web Origin Concept」で定められており、端的に言うと「スキーム、ホスト、ポート」の組み合わせをオリジンと定め、それらが同じものは同一のオリジンとして同じ保護範囲のリソースとして取り扱うということです。 例えば、http://example.jp/fooとhttp://example.jp:

    Same-Origin Policy とは何なのか。 - 葉っぱ日記
    raimon49
    raimon49 2013/03/30
    http:とhttps:はスキームが異なるために異なるオリジン WebKit系のブラウザに表示しているドキュメントのオリジンを示すlocation.originプロパティがある