とある通販サイトに学ぶ自動ログイン機能のバッドプラクティス
サマリとある通販サイトにて「 メールアドレス・パスワードを保存する」機能がありますが、サイトにクロスサイトスクリプティング(XSS)脆弱性がサイトにあると生のパスワードが漏洩する実装となっています。本稿では、この実装方式を紹介し、なぜ駄目なのか、どうすべきなのかを紹介します。 記事の最後にはセミナーのお知らせを掲載しています。 はじめに家人がテレビを見ていて欲しい商品があるというので、あまり気は進まなかったのですが、その商品を検索で探して購入することにしました。「気が進まない」というのは、利用実績のないサイトはセキュリティが不安だからという理由ですが、この不安は的中してしまいました。 最初の「えっ?」はパスワード登録のところでして、パスワードを再入力する箇所で「確認のためもう一度、コピーせず直接入力してください」とあるのですよ。私は乱数で長く複雑なパスワードを入力しかけていたのですが、コピ
XSSの脅威を考察する - セキュアスカイプラス
はじめに こんにちは！CTOのはせがわです。 先日公開された、Flatt Securityさんのブログ「開発者が知っておきたい「XSSの発生原理以外」の話」、おもしろいですね。このXSSの記事に限らず、Flatt Securityさんのブログは役に立つ記事が多い*1ので、個人的には記事が公開されるのを毎回楽しみにしています！*2 たしかに、XSSの脅威についてはなかなか理解してもらうことが難しく、また一般的にはSQLインジェクション等と比べても脅威が低く見られることも多いため、XSSの脅威について少し掘り下げて考察したいと思います。 なお、この記事は「XSSの発生原因くらいは知ってるよ」という人を対象にしています。「XSSって何だっけ」という方は クロスサイトスクリプティング対策 ホンキのキホン (1/3)：CodeZine（コードジン） などの記事を参照してください。 技術的な面からの解
開発者が知っておきたい「XSSの発生原理以外」の話 - Flatt Security Blog
はじめに こんにちは。株式会社Flatt Securityのセキュリティエンジニアの冨士です。 本稿では、XSS(クロスサイトスクリプティング)が攻撃に用いられた時のリスクの大きさを紹介していきます。以降はクロスサイトスクリプティングをXSSと記載していきます。 XSSはセキュリティエンジニアならもちろん、開発を行っているエンジニアの多くの方が知っている脆弱性です。ですが、私はWebアプリケーションの脆弱性診断を行ってきた経験の中で多くのXSSを目にしてきましたし、依然として検出率の多い脆弱性の一つだと感じています。 その認知度や、一般的な対策方法のハードルの低さ(設計や仕様によっては対策工数が大きい場合もありますが)にも関わらずXSSの検出率が多いのは、直感的にリスクがわかりづらく、アラートをあげるだけの紹介が多いことが一つの要因ではないかと考えています。 すなわち、興味範囲が「どのよう
本サイトの AMP 提供の停止とここまでの振り返り | blog.jxck.io
Intro 前回の記事で、奇遇にも本サイトの AMP 対応を落とすことになった。しかし、そうでなくても AMP をどこかでやめることは考えていたため、きっかけの一つが SXG 対応になったのは、順当な流れだと筆者は感じている。 これは AMP がなぜ始まり、なぜトーンダウンしつつあるのか、そしてこれからどうなっていくのか、という流れをまとめるいい機会でもある。 その過程で生み出され、本サイトでも検証を続けてきた Performance Timing API, Core Web Vitals, Signed HTTP Exchange 、そして今構想されている Bento AMP などを踏まえ、一連の流れを覚えている範囲で記録としてまとめておく。 ソースは筆者の主観であり、眺めてきた体感を mozaic.fm の Monthly Web などで話してきたものがベースなので、信頼性や正確性は期
Google 公式ウェブ開発者向けリソースのご紹介
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
Security headers quick reference | Articles | web.dev
This article lists the most important security headers you can use to protect your website. Use it to understand web-based security features, learn how to implement them on your website, and as a reference for when you need a reminder. Security headers recommended for websites that handle sensitive user data: Content Security Policy (CSP) Trusted Types Security headers recommended for all websites
Webフォント読み込み戦略（2021年） - MOL
Preload web fonts 前回、といっても2年前だが、display=swapとはなにかで、Google Fontsを読み込むときはURLパラメータに display=swap をつけるといいよと言った。というわけで、それ以降、『目標をセンターに入れて、display=swap…』と盲目的に考えるようになってた。 おさらいとして display=swap では、まず代替フォントを表示し、Webフォントをダウンロードしたら、随時スワップするという挙動になる。この場合、代替フォントからWebフォントへ切り替わる FOUT (flash of unstyled text) が起こってしまう。こんな感じ↓ 出典：font-face descriptor playground まぁ何も表示されないよりかは良いかと思うわけだが、時は流れ、最近ではWebの指標として、Web Vitalsという
Public Suffix List の用途と今起こっている問題について | blog.jxck.io
Intro Public Suffix List (PSL) は、現在の Web プラットフォームの一端を支えている非常に重要な要素だ。 実はこれが、少数のボランティアにより GitHub でメンテナンスされた、単なるテキストリストであることは、あまり知られていないかもしれない。 最近、このリストへの追加リクエストがあとを絶たず、問題になっている。 そもそも PSL とは何であり、今どのような問題が起こっているのかについて解説する。 Public Suffix List とは何か PSL を解説するには、まず関連する用語について整理する。 Top Level Domain (TLD) 例えば、このブログのドメインは blog.jxck.io であり、これは筆者が取得したドメイン jxck.io のサブドメインだ。 jxck.io は、 .io という TLD のサブドメインを販売しているレ
CSSとコンポーネント設計に対する考察 - uhyo/blog
近年のフロントエンド開発にはコンポーネントという概念が付いて回ります。React・Vue・AngularといったViewライブラリでは、コンポーネントを定義してそれを組み合わせてアプリを作ります。また、いわゆるWeb Componentsとして知られる仕様群により、ライブラリに依存せずに“コンポーネント”を作ることもできるようになってきています。 コンポーネントは、何らかの機能（あるいは責務）を持った部品です。また、コンポーネントによっては再利用される（アプリ内の複数の箇所から利用される）ことを意図しているものや、そもそもライブラリとして配布されているようなものもあります。アプリの機能の一部分を抜き出したものという見方をすれば、コンポーネントというのは関数にとても類似した概念であることが分かります。 コンポーネント設計によって、言い換えればアプリがどのような機能を持ったコンポーネントたちに
JavaScript | 2020 | HTTP ArchiveによるWeb Almanac
序章 JavaScriptは、CSSとHTMLと並んでウェブの3つの礎となる最後の礎として、その謙虚な起源から長い道のりを歩んできました。今日では、JavaScriptは技術スタックの幅広い範囲に浸透し始めています。JavaScriptはもはやクライアントサイドに限定されたものではなく、ビルドツールやサーバーサイドのスクリプティングのための選択肢として、ますます人気が高まっています。エッジコンピューティングソリューションのおかげで、JavaScriptはCDNレイヤーにも浸透してきています。 開発者はJavaScriptが大好きです。マークアップの章によると、script要素は、現在使用されている6番目に人気のあるHTML要素です（数え切れないほどの要素の中で、pやiなどの要素よりも上位にあります）。ウェブの構成要素であるHTMLの約14倍、CSSの約6倍のバイト数を費やしています。
RFC 3986: Uniform Resource Identifier (URI): Generic Syntax
Network Working Group T. Berners-Lee Request for Comments: 3986 W3C/MIT STD: 66 R. Fielding Updates: 1738 Day Software Obsoletes: 2732, 2396, 1808 L. Masinter Category: Standards Track Adobe Systems January 2005 Uniform Resource Identifier (URI): Generic Syntax Status of This Memo This document specifies an Internet standards track protocol for the Internet community, and requests discussion and s
TabFS
Going through the files inside a tab's folder. For example, the url.txt, text.txt, and title.txt files tell me those live properties of this tab (Read more up-to-date documentation for all of TabFS's files here.) This gives you a ton of power, because now you can apply all the existing tools on your computer that already know how to deal with files -- terminal commands, scripting languages, point-
GoogleのPrivate prefetch proxyに関するメモ - ASnoKaze blog
先日、Chromiumブログに「Continuing our journey to bring instant experiences to the whole web」という記事が投稿されています。 この記事は、ブラウザのプリフェッチ機能とプライバシーの問題について説明をしています。またGoogleやブラウザでの取り組みについても多く書かれています。詳しくは原文をお読みください。 その中で、private prefetch proxyというものが出てくる。個人的にはとても興味深いところなので、雑にメモしておく。 prefetch機能とプライバシーの問題 Webページの表示の高速化のために、プリフェッチ機能が使用されています。prefetchはユーザが次に読み込むであろうページのリソースを事前に取得することで、ページの表示を高速化します。 特にcross-siteのプリフェッチにおる際に問
リンクのへの rel=noopener 付与による Tabnabbing 対策 | blog.jxck.io
なお IE は(security zone setting をいじらない限り)この問題が発生しないようだ。 引用元: blankshield demo | Reverse tabnabber phishing tabnabbing 上記の挙動を、フィッシング詐欺に利用できることが既に指摘されている。 この手法は Tabnabbing と呼ばれている。 Tabnabbing: A New Type of Phishing Attack Aza on Design Target="_blank" - the most underestimated vulnerability ever この攻撃方法を解説する。 攻撃の概要 https://cgm.example.com (左上) というサービスがあるとし、これは SNS やチームコラボレーション系サービスを想定する。 攻撃者は、このサービスの不
document outline algorithm と h1 要素 | きるこの日記帳
没ネタの供養。 TL;DR h1 を複数置けるわけじゃない アウトラインを生成するアルゴリズムはブラウザで実装されてない 見出しレベルを自動調整するように動いていたが頓挫した section お前は何者だ document outline algorithm について "document outline algorithm" とは、HTML のアウトラインを生成する都市伝説のこと。 アウトラインとは、見出しを持ったセクションで構成される枠を指す。 HTML5 より前は、このアウトラインを表現する方法がなく、広義な wrapper の div が採用されていた。 見出し要素もセクションごと、というよりは文書の階層にかかるもので、兄弟としてのフラットな構造だった。 HTML5 から、 section や nav などで囲みアウトラインを生成する謎のアルゴリズム "document outlin
ウェブ上でのレンダリング | Articles | web.dev
ウェブ上でのレンダリング コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 ウェブ デベロッパーが決定すべき重要な決定の一つは、アプリのロジックとレンダリングを実装する場所です。ウェブサイトの構築方法はたくさんあるため 簡単ではありません この領域に関する Google の理解は、過去数年間に大規模なサイトを対象に Chrome で行った実績に基づいています。大まかに言うと、完全なリハイドレーション アプローチよりも、サーバーサイド レンダリングまたは静的レンダリングを検討することをおすすめします。 この決定を行う際に使用するアーキテクチャをより深く理解するには、各アプローチをしっかりと理解し、それらについて説明する際に使用する一貫した用語を使用する必要があります。レンダリング アプローチの違いは、ページ パフォーマンスの観点からウェブでのレンダリングのトレ
2020年の11の必見のフロントエンドトレンド - Qiita
こちらの記事は、Jonathan Saring 氏により2019年12月に公開された『 11 Must-Know FrontEnd Trends for 2020 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 ランチ中のフロントエンドトークでスマートに見られる方法！ チームのランチトークでスマートに見られることは、最新のフロントエンドのトレンドを常に把握しておくための大きな理由であることは言うまでもない。 それは、あなたがより良い開発者になり、より良い技術とより良い製品を作るのに役にたつかもしれない。 たぶんね。 だから、いくつかの興味深い方向を示すことで、この名誉あるクエストを君が簡単に達成できるように少し時間をもらいたい。 すべてのコンセプトについて1から10まで説明するのではなく、そのコンセプトとそれがどのように有用であるか紹介しよう。最後にはさらなるリソー
ローカル開発環境の https 化 | blog.jxck.io
Intro Web の https 化が進み、それに伴って https を前提とする API も増えてきた。 そうした API を用いた開発をローカルで行う場合、 localhost という特別なホストを用いることもできるが、それだけでは間に合わないケースも少なからずある。 localhost を https にするという方法もあるが、そのように紹介されている方法には、いくつか注意すべき点もある。 この辺りの話を、直近 1 ヶ月で 3 回くらいしたので、筆者が普段使っている方法や注意点についてまとめる。 特に推奨するつもりはない。 Update chrome の --host-rules について追記 localhost での開発の注意点 例として https://example.com にデプロイする予定の ServiceWorker を用いたアプリがあったとする。 開発をローカルで行う
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Server-Sent Events with Go and React
Chrome DevTools Protocol clients and tools for Go
