Webサービスにおけるログイン機能の仕様とセキュリティ観点 - Flatt Security Blog
はじめに こんにちは。株式会社Flatt Securityセキュリティエンジニアの村上 @0x003f です。 本稿では、Webアプリケーション上で実装される「ログイン機能」の実装パターンをいくつか示し、その「仕様の中で起きうる脆弱性」とその対策について解説していきます。 「ログイン機能」はToB、ToC問わず多くのWebアプリケーションで実装されている機能で、XSSやSQL Injection、Session Fixationといったような典型的な脆弱性の観点については、なんらかの解説を見たことのある方も多いと思います。 しかし、「仕様の脆弱性」というのはあまり多く語られていない印象です。今回はそのようなタイプの脆弱性についての解説を行います。なお、IDaaSを用いずに自前でログイン機能を実装しているケースを複数パターン想定しています。 はじめに ログイン機能の仕様パターンとセキュリティ
CSSの疑似クラス「:focus-within」が素晴らしい理由
CSSの疑似クラス「:focus-within」を使用して、フォームの入力時にハイライト表示させるテクニックを紹介します。 :focus-withinは適用した要素の子孫要素にフォーカスに当たった時に起動するセレクタで、効果的に使用すると非常に便利です。 Why CSS :focus-within is amazing by Chris Bongers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLの構造 CSSの疑似クラス「:focus-within」 :focus-withinの効果をより素晴らしいものにする :focus-withinのサポートブラウザ はじめに ここでお話するのは、フォーカスされた要素にスタイルする:focusセレクタのことではありません。:focus-withinは、その中の子孫要素
マイクロソフト、「Microsoft Forms」を個人向けに正式リリース。Google Formsのようなアンケートを作成可能
マイクロソフト、「Microsoft Forms」を個人向けに正式リリース。Google Formsのようなアンケートを作成可能 マイクロソフトは、アンケートなどを作成が簡単に行える「Microsoft Forms」が個人向けの機能として正式リリースされたと発表しました。 Want an easy way to poll people and plan virtual parties? Learn all about Microsoft Forms, available today! https://t.co/t52YFSoGo0 pic.twitter.com/ySjxaDRvjV — Microsoft 365 (@Microsoft365) October 22, 2020 Microsoft Formsは管理者がフォームを設定し、それを公開することでアンケートやクイズなどを作成でき
日付・時間のピッカーを単独のWebコンポーネントとして利用できる軽量JavaScript -Aeon Date Picker
デスクトップでもスマホでもタブレットでも動作し、フレームワークの有無に関係なく機能する、日付・時間のピッカーを簡単に実装できるわずか5Kbの軽量JavaScriptを紹介します。 依存関係は一切なく、単独のWebコンポーネントとして利用できるので、非常に便利です。日本語環境のフォーマットにも対応しています。 依存関係はなし スタンドアロンの単体で動作する軽量JavaScriptで実装されたWebコンポーネント。 どこにでも使用できる どんなページにもどんなフレームワークにも設置可能。 プログレッシブエンハンスメント コードの読み込みに失敗した場合は、ネイティブのピッカーまたはテキストボックスにフォールバック。 アクセシブル マウス・タッチ・キーボード・スクリーンリーダーで動作し、ネイティブのフォーム要素として動作します。 多言語対応 デフォルトでブラウザのローカル言語と日付形式を使用します
AIアナリスト垣内氏直伝！BtoBサイトの3つのフォームの勝ちパターンとサイト改善の本質 | 営業管理ツール（SFA）のUPWARD（アップワード）
営業管理ツールのUPWARDブログでは、BtoB営業に役立つ情報を発信しています。 今回は、株式会社WACUL・取締役CIOで、AIアナリストの垣内さんに、お話を伺ってみました。 垣内さんといえば、Twitterで、フォーム・LP改善などデジタルマーケティングの知見を発信しておられます。 垣内勇威さん｜AIアナリスト（@yuikakiuchi） / Twitter AIアナリスト公式サイト：アクセス解析を自動で行う人工知能「AIアナリスト」- サイト分析サービス 本インタビューでは、フォームの勝ちパターンの話を切り口にして、BtoBマーケティングの勝ちパターンと本質について語っていただきました。 BtoBに限らず、フォームは一番簡単にパターン化できると思います。 下記の3つに分類されます。 （1）簡単そうに見せる （2）余計な脳を使わせない （3）問い合わせ後の業務フローが円滑に回る項目取
実務で使うかもしれない、最近JavaScriptで実装した5つの機能 - Qiita
この記事はJavaScript Advent Calendar 2019の6日目の記事です！ 1日遅れてしまってすみません… 最近、クライアントワークで実装した機能を紹介します。 機能としては大きいものではないですが、何回か同じような機能を実装しているので、意外と使うことはあるかもしれないやつをまとめました。 ライブラリやFWは使わずにPure JavaScriptで書いてます ES2015の書き方なので、そのままではIE11で動かない部分などがあります ラジオボタンの選択で活性・非活性が切り替わるセレクトボックス 選択した項目によって、さらに入力したり選択できるようにしたいというケースが結構あります。 See the Pen ラジオボタンで活性・非活性が切り替わるセレクトボックス by daichi (@kandai) on CodePen. これはセレクトボックスを非活性にしていますが
タッチデバイスの「input type=”range”」の挙動を改善してくれるJavaScript「Rangetouch」 | DevelopersIO
タッチデバイスでinput type="range"を使った場合、スライダーのバー部分をタップしてもなんの反応もありません。これをタップした位置へツマミを移動したり値を取得したりと、OSネイティブのスライダーのように挙動を改善してくれるMITライセンスのJSライブラリを紹介します。 デモページ（要タッチデバイス）：https://rangetouch.com/ リポジトリ：RangeTouch - GitHub 使い方 npmなら npm i rangetouch -D CDNから読み込むなら <script src="https://cdn.rangetouch.com/2.0.0/rangetouch.js"></script> です。 input（type="range"）要素が1つなら、次のようにCSSセレクタまたは要素で指定します。（npmの人はimport RangeTouch
ValueError: The 'image' attribute has no file associated with it.が出た - Qiita
ValueError: The 'image' attribute has no file associated with it.が出たDjango imageFieldでアップロードされた画像を表示したかった時、 ValueError: The 'image' attribute has no file associated with it. というエラーが出たので困った。 とりあえずコピペしてググったら https://stackoverflow.com/questions/15322391/django-the-image-attribute-has-no-file-associated-with-it ここにそれっぽいことが書いてありそうだったので読むと、 In your template, check image exist or not first つまりimageフィールドに
Django forms.Formを用いたフォームの作成 - Qiita
はじめに Djangoの初学者はまずDjango公式サイトやDjangogirlsなどのチュートリアルを取り組むのではないか。 そこで共通するのは、フォームの事例が、forms.ModelFormを利用したものに偏っており、当たり前のようにforms.ModelFormを選択していた。しかし、フォームをオリジナルあるものにするには、forms.Formを使う手があるが、解説した記事が少ないと感じていた。事例を交えて記事に残そうと思う。 環境 Windows10 Python 3.6.0 Django 2.1.1 models.pyの編集 ModelにBookモデルを作成する。タイトル、著者、所有者、貸出先、発刊日、購入日、ISBN、備考を属性として追記する。 from django.db import models class Book(models.Model): LIBRARY_CHO
Djangoの入力フォームにBootstrapを適用するときのスマートな最適解 - Qiita
あらすじ Bootstrapを適用するのに「タグの指定がキレイになる方法」を探していてたどり着いた最終形です。 Djangoの公式チュートリアルを読みながら入力フォームを実装し、Bootstrapを適用してみました。 ところが、どうしても冗長で煩雑なコードになってしまうのです。 試行錯誤した結果、きれいに書く方法を見つけたのでご紹介します。 なんか思ってたのと違った方法 「Djangoのテンプレートに、Bootstrapのform-groupやform-controlを設定できないとき」 を参考にログインフォームでも試してみました。 これだとどうしても、labelにBootstrapが適用されません。 上手くいった方法 {{ form }}だけで済む箇所の中にBootstrapのためのclass指定をしたくて、{% for item in form %}～{% endfor %}のように分
ボタンのラベルには分かりやすい文言が重要、ユーザーが使いやすい文言の選び方
ボタンのラベルに「送信（Submit）」や「キャンセル」や「はい/いいえ」しか使わない、という人は注意が必要です。ボタンのラベルはユーザーがボタンをクリックするための重要な要素です。間違った文言を使用していると、ユーザーは混乱し、作業量が増え、タスクにかかる時間が多くなります。 ユーザーがボタンを使いやすいよう、ボタンのラベルに使用する適切な文言の選び方を紹介します。 5 Rules for Choosing the Right Words on Button Labels by UX Movement ボタンのラベルに間違った文言を使用しない 1. アクションの動詞を使う 2. 正確な言い回しを使う 3. タスク固有の言葉を使う 4. 簡潔な言葉を使う 5. 大文字を適切に使う アクションをはっきりと伝える ボタンのラベルに間違った文言を使用しない ボタンの文言は、ボタンがどのように見え
[Vue.js]vee-validateで連番で回ってる要素に対してバリデーションをつける - Qiita
やりたいこと 配列を回すごとに生成される（input要素のコンポーネントだとお思いください）に対して、都度バリデーションを貼りたい やったこと <template v-for="(value, index) Ary"> <base-input :key="index" v-model="Ary[index].name" v-validate="'required|email'" :name="'name' + index" :class="{ 'has-error': errors.has('name' + index) }" data-vv-as="タイトル" /> <p v-if="errors.has('name' + index)" class="alert-danger"> {{ errors.first('name' + index) }} </p> </template> R
![[Vue.js]vee-validateで連番で回ってる要素に対してバリデーションをつける - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/ee6a1f57132395e557679a84225d7c6261decc4a/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCVnVlLmpzJTVEdmVlLXZhbGlkYXRlJUUzJTgxJUE3JUU5JTgwJUEzJUU3JTk1JUFBJUUzJTgxJUE3JUU1JTlCJTlFJUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgyJThCJUU4JUE2JTgxJUU3JUI0JUEwJUUzJTgxJUFCJUU1JUFGJUJFJUUzJTgxJTk3JUUzJTgxJUE2JUUzJTgzJTkwJUUzJTgzJUFBJUUzJTgzJTg3JUUzJTgzJUJDJUUzJTgyJUI3JUUzJTgzJUE3JUUzJTgzJUIzJUUzJTgyJTkyJUUzJTgxJUE0JUUzJTgxJTkxJUUzJTgyJThCJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0yZjQwMjk1MGQwZTdkNjllYWRhZWQ5OGE5ZGEwNDMyNQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwc2FiYV91bmlfdG9yb18mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWYyYjA1MmU5OWU2YTA4YTJiZGFmYmI4MWMwYTI2OGU0%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D5a8fc49f1470a0ffdcdedfd8b71c78c5)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
django allauth display all error messages
GitHub - jazzband/django-widget-tweaks: Tweak the form field rendering in templates, not in python-level form definitions. CSS classes and HTML attributes can be altered.
https://codeday.me/jp/qa/20181231/119121.html
null=True としているのに”このフィールドは必須です”と出る理由がわからない
django choiceField with CheckboxSelectMultiple: all selected by default?
Djangoで、フォームの表示まとめ - naritoブログ
Djangoで、フォームの表示まとめ - naritoブログ
Django request.data dictionary returns last item instead of list for post data from a form with checkboxes