長い記事なので先に結論を書きます。 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 なページとのコミュニ

認証しないWeb認証 限定公開URLのセキュリティについて考える 2020/8/7 API Meetup Online #3- フューチャー株式会社 渋川よしき

認証しないWeb認証 限定公開URLのセキュリティについて考える 2020/8/7 API Meetup Online #3- フューチャー株式会社 渋川よしき

そうはっきり言ったほうが良かった。いや言わなくても伝わる現場は良かったんだけど、伝わらないままごく一部だけをコンポーネントに移行、それ以外はただ生 DOM API に変えて終わり（あるいは他は jQuery のまま）みたいな「モダン化」で済ます余地を与えたのは発信の失敗だった……という10年代の振り返り。 テンプレートエンジンはなぜ倒された方が（…といって悪ければ、変わったほうが）良いのかは端的に指摘できて、それは初回レンダリングしか考慮してないからだということになる。 Web の UI には状態変化がつきもの（になったのは実は最近の話）だが、テンプレートエンジンは1回目のレンダリングだけを担当し、変化した後の2回目以降の見え方は JavaScript が担当するというパラダイムを構成する。

この記事の目的 課題: Webサービスの各機能の仕様に関するセキュリティ情報があまりない Webサービスを設計するにあたり、よくある機能というのが存在するかと思います。 ユーザ登録 ログイン・ログアウト パスワード復旧 URLで共有 SNSログイン お気に入り登録 いいねボタン マイページ 通知 等・・・ これらに関して、自分の認識をまとめておきたい・意見をもらってブラッシュアップしたいと思い、記事を書きます。 大きい記事たくさん書くの大変なので、機能ごとに書こうかな・・・と思ってますが一つを育てていくかもしれないです。 前書いた記事が個人的には好評だったことも受けて、書いています。 ユーザ登録機能の仕様とセキュリティ toC向けサービスならかなりの割合で存在する機能です。よくある仕様パターンについて考えてみます。 この機能でユーザから取得するもの 認証情報（ID/パスワード） 連絡手段

Intro Cookie は、ブラウザに一度保存すれば、次からその値を自動的に送ってくるという、非常に都合の良い仕様から始まった。 State Less が基本だった Web にセッションの概念をもたらし、今ではこれが無ければ実現できないユースケースの方が多い。 冷静に考えればふざけてるとして思えないヘッダ名からもわかるように、当初はこのヘッダがこんなに重宝され、 Web のあり方を変えるかもしれないくらい重要な議論を巻き起こすことになるとは、最初の実装者も思ってなかっただろう。 そんな Cookie が今どう使われ、 3rd Party Cookie (3rdPC) の何が問題になっているのかを踏まえ、これからどうなっていくのかについて考える。 Cookie のユースケース Web にある API の中でも Cookie はいくつかの点で特異な挙動をする 一度保存すれば、次から自動で送る

2020/02/13 DevSumi 発表資料

JaSST'20 Tokyo RejectCon

セキュリティ・キャンプ全国大会 2019 開発と運用トラックで提供した講義の資料の一部です。誤りに気がついたら、ぜひ @y0n3uchy あるいは @lmt_swallow にお知らせください。

Rails Developers Meetup 2019

株式会社クリアコード > ククログ > Webアプリや拡張機能（アドオン）で、Web Crypto APIを使ってローカルに保存されるデータを暗号化する ※注記：本文末尾の「公開鍵暗号ではなく共通鍵暗号を使う理由」の説明について、2019年1月30日午前0時から21時までの間の初出時に内容の誤りがありました。また、2019年1月30日午前0時から2月5日20時頃までの間において、本文中での AES-CTR による暗号化処理が、 nonce を適切に指定していないために脆弱な状態となっていました。お詫びして訂正致します。初出時の内容のみをご覧になっていた方は、お手数ですが訂正後の説明を改めてご参照下さい。 クリアコードで主にMozilla製品のサポート業務に従事している、結城です。 FirefoxやThunderbirdがSSL/TLSで通信する際は、通信内容は自動的に暗号化されます。その一

1年後に差がつくFont Awesome5 ～フロントエンド開発(ES6,Webpack4,Babel7)への導入～JavaScriptes6FontAwesomewebpackbabel 概要 Font Awesome(フォントオーサム)はFreeで使えるアイコン集で、このジャンルでほぼデファクトといって良い存在になっています。Free版とPro版がありますがFree版でも約1500種類のアイコンが使えます。 本稿では、node.js環境での開発を前提としたWebフロントエンド開発で Font Awesome5 を使う時のポイントを説明します。Font Awesomeはv5になってフロントエンド開発との連携機能が大幅強化され、お手軽にJavaScriptのバンドルにフォントを埋め込むことができます。 Font Awesomeのアイコンを使う（バンドルする）には以下の3ステップを踏みます。

HTML5 Conference 11/25

FRONTEND CONFERENCE 2018 https://2018.kfug.jp/ での発表資料です。

こんにちは、セキュリティエンジニアのkoboです。ピクシブには2018年4月に入社しており、セキュリティ観点でのアプリケーション開発や脆弱性報奨金制度の運用などを行っています。 本記事では、現在ピクシブの一部のサービスで取り組んでいるContent Security Policyについて知見を共有します。 概要 Content Security Policy (CSP) は、XSSを主としたウェブアプリケーションセキュリティの問題を軽減するために考案されたブラウザのセキュリティ機構です。 ウェブアプリケーションは、 Content-Security-Policy ヘッダをHTTPレスポンスに含めることで、意図していないJavaScriptの実行やリソースの読み込みをブラウザ側で制限することができます。 CSPは2012年頃よりブラウザに実装されていますが、2016年のGoogleの調査によ

はじめに Webサーバをセキュアに保つ為、個人的に行っている設定をざっくりまとめてみました。 設定内容はApache 2.4での運用を想定していますので、他のHTTPdをお使いの方は適宜読み替えてください。 各設定項目は以下のオンラインテストサイトでA+相当を取ることを目指しています。 設定ファイル生成 Mozilla SSL Configuration Generator オンラインテスト Mozilla Observatory Qualys SSL Server Test 前提条件 以下で設定する項目は特にHTTPS接続や攻撃防止に関するものになります。 HTTPdそのものに関する基本設定については別記事をご参照ください。 SSLProtocol 危殆化した古いプロトコルを有効にしている場合、古いプロトコルを標的としたダウングレード攻撃等を受ける可能性がある為、新しいプロトコルのみを有

JavaScriptのイベント、ややこしいですよね。 名前が似ているものや、使い方にクセがあるものもあり、簡単なようで実装に手間どることが多いです。なので、よく使うイベントの概要をざっくりまとめ、それぞれの実行タイミングとイベントオブジェクトをコンソールで確認できるサイトを作りました。 忘れたときに調べればいいだけの話なので、わざわざサイトを作る必要はなかったのですが、イベントを眺めるのが好きな人に見ていただけたら嬉しいです。 JavaScriptのイベントをたくさん見られるサイト ひたすらaddEventListenerしていたら、イベントに愛着が湧いたので、イベントの実装でハマりそうなところをまとめています。 なぜイベントを使うのか マウスなどはイベントじゃないと値が取得できませんが、頑張ればイベントを使わずとも実装できるものもあります。たとえば、テキストボックスの変更を知りたいだけで

This domain may be for sale!

私がWebサービスのバージョンアップでVue.js導入することになり、取り組んでる内容についてWEBエンジニア向けに簡単に解説する記事です。 例えばjQueryのUIプラグインを沢山使ってるサーバーフレームワークで Vue.js、Vuex、Storybook を導入する際にどうすれば良いのか？などのノウハウについて記述します。 はじめに サーバーフレームワークのテンプレートへの組み込みが今回の要件です。 つまりVue.jsでカスタムコンポーネントもどきを作り、テンプレートエンジンで使えるようにするのが今回の要件です。 フロントエンド界隈のノウハウ集は大体がビッグスケールしても耐えられるようにフロントエンドとサーバーを開発チームまで完全に分離し、サーバーは API のみ提供する設計でしょう。最近ではVue.jsがどんどん認知され、実験的にRailsに組み込む軽いサンプルが散見するでしょう。