Upgrade to Pro — share decks privately, control downloads, hide ads and more …

セキュリティとデザイン

takumma
March 11, 2023

 セキュリティとデザイン

セキュリティ・キャンプフォーラム2023 修了生講演 LT のスライドです。

takumma

March 11, 2023
Tweet

More Decks by takumma

Other Decks in Design

Transcript

  1. セキュリティとデザイン
    セキュリティ・キャンプフォーラム2023 - 3.11 (sat)
    2022年度修了生 市川 拓磨 (@_takumma)
    1

    View Slide

  2. 自己紹介
    市川 拓磨(@_takumma)

    seccamp’22 Web セキュリティクラス修了

    4月からは某社へ新卒入社

    SecHack365’22
    プログラミングしたり、デザインしたりしてます。猫派。
    2

    View Slide

  3. 今日話すこと
    Design
    3

    View Slide

  4. 今日話すこと
    設計 デザイン
    Design
    審美性を根源にもつ計画的行為
    の全般
    計画や仕様
    “Secure by Design” はこっち
    4
    ユーザー体験、課題解決、表現

    View Slide

  5. 今日話すこと
    設計 デザイン
    Design
    審美性を根源にもつ計画的行為
    の全般
    計画や仕様
    “Secure by Design” はこっち
    5
    ユーザー体験、課題解決、表現

    View Slide

  6. 今日話すこと
    デザイン 心理学
    ユーザー体験
    アクセシビリティ
    6

    View Slide

  7. アクセシビリティ
    “Accessibility”
    製品・サービスを利用できること・その達成度。
    「障害者の方のために」という視点になりがちですが、

    実際は「全ての人」が使えるようにしていくという観点からアクセシビリティに取り組むことが求められています。 7

    View Slide

  8. アクセシビリティの恩恵を受ける人
    428.7
    万人(平成28年時点)
    画像引用元:ウェブアクセシビリティ導入ガイドブック - デジタル庁

    https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/08ed88e1-d622-43cb-900b-84957ab87826/17f279b9/20221205_introduction_to_weba11y.pdf
    8

    View Slide

  9. どのようにアクセスしている?
    視覚障害者の方の場合
    点字ディスプレイ
    スクリーンリーダー
    (30万円くらい)
    画面中の要素を読み上げる
    9

    View Slide

  10. 例:CAPTCHA
    画像を見る必要があるため、視覚障害
    者の方が利用することができない。
    (勿論 alt 属性も指定できない)
    10
    最近は reCAPTCHA などが出てきて画像を選んだりする手間が省けるようになりました。

    ちなみに、CAPTCHA でも音声での認証を選択することもできます。(図中のヘッドホンのアイコン)

    View Slide

  11. アクセシビリティをちゃんとしないと...
    セキュリティ機能にアクセスできない
    セキュリティ機能を実装しても、

    ユーザーはセキュアにならない!
    利用できないユーザーは離れていってしまう...
    11

    View Slide

  12. どうすればいい?
    アクセシビリティを向上させる
    w キーボードだけで全ての機能にアクセスできるようi
    w 操作に時間制限を設けない(回避手段を用意s
    w 文字と背景に十分なコントラスト比を保つ
    12
    デジタル庁の出しているウェブアクセシビリティ導入ガイドブックがとても参考になります。

    より「利用しやすい」ものにするための視点は、SmartHR の辻さんの「俺の」シリーズが面白いです。(参考文献を参照)
    指標として、ウェブアクセシビリティの規格が存在します。
    あたりまえ

    View Slide

  13. どうすればいい?
    代替手段を用意する
    ! 別の認証方法を用意す0
    ! サポートする窓口・方法を用意する
    代替手段に対しても、セキュリティが担保できているか?という視点が必要
    13
    あるいは...
    製品・サービス自体だけで無く、その周辺のコンテンツ(ヘルプ・カスタマーサービス)もデザインの対象になります。

    View Slide

  14. ユーザー体験
    “User Experience”
    ユーザーが製品やサービスを使用するときに感じる感覚や印象
    14

    View Slide

  15. よく言われる言説
    セキュリティを担保しようとした結果

    ユーザー体験が損なわれることは、仕方がない?

    15

    View Slide

  16. 例:セッションタイムアウト
    € セッションタイムアウトはサービスの利用を遮り、ユーザー体験
    を損ねる3
    € 長いフォームを埋めて Submit したのに、タイムアウトでやり直
    し...(最悪
    € イライラした経験がある人もいるんじゃない...?
    16
    セッションタイムアウトが発生しました。

    再度ログインしてください。
    ログインページへ
    ログインページへ

    View Slide

  17. 例:iOS での二段階認証
    “メッセージ” アプリに届いた認証コード

    をキーボードに表示
    「アプリ切替 → コピー → ペースト」という煩雑な流れが

    簡略化され、2段階認証のハードルを下げた。
    → シームレスな入力が可能に!
    17
    GitHub の認証画面

    View Slide

  18. 例:GU アプリ
    会員証のバーコードは、

    アップデートせずに提示できる!
    レジで会員証を出すときに邪魔しない &

    その他の機能へは、アップデートを促す。
    18

    View Slide

  19. 心理学
    “Accessibility”
    製品を取り巻く人々の心理を考える
    19

    View Slide

  20. 心理学
    今年のセキュリティ・キャンプの講義でも! 20

    View Slide

  21. 「人」を狙った脅威
    21
    情報セキュリティ10大脅威
    → 約半数が人に起因
    ... 人に起因するもの
    漏れたり間違ったりしてたらすみません... 引用元:情報セキュリティ10大脅威 - IPA

    View Slide

  22. 攻撃者の視点に立ってみると?
    デザイン 騙す
    を使って、人を
    22
    偽 URL 偽サイト 偽リンク・ボタン
    example-com.jp PLAY
    PLAY
    PLAY
    PLAY
    もはや見分けが

    つかないものも
    サイトのデザインを

    模倣して騙す

    フィッシング
    ユーザーを誘導

    クリックジャッキング
    a

    View Slide

  23. 心理学を踏まえて、どうデザインしていく?
    23
    セキュリティ機能を と思ってもらう
    利用したい
    … なるべく簡単なフローをデザインす“
    … 機能のメリット・効果を伝えU
    … インターフェースの見た目を綺麗にして、信用を得る *
    *「インターフェースの心理学」より、「079:人はまず「見た目」と「感じ」で信用するか否かを決める」

    View Slide

  24. まとめ
    “Conclusion”
    24

    View Slide

  25. 25
    デザインの本質

    ユーザー体験
    とは、

    に寄り添い、

    より良い を提供すること。
    まとめ

    View Slide

  26. まとめ
    < Thanks !
    セキュリティとデザインは、対立関係ではない!
    より でより良い を

    提供することができる!
    セキュア ユーザー体験
    互いに手を取り合うことで、
    26

    View Slide

  27. 参考文献など
    § ウェブアクセシビリティ導入ガイドブック - デジタル庁

    https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/08ed88e1-
    d622-43cb-900b-84957ab87826/17f279b9/20221205_introduction_to_weba11y.pd–
    § 平成28年生活のしづらさなどに関する調査(全国在宅障害児・者等実態調査)

    https://www.mhlw.go.jp/toukei/list/seikatsu_chousa_b_h28.htmr
    § アクセシビリティvsセキュリティ ~こんな対策はいらない!~ - Yoshinori OHTA

    https://www.slideshare.net/yoshinoriohta18/vs-7679859†
    § デジタルで年調を提出!SmartHRで「俺の年末調整」を開催した話し - Katsutoshi Tsuji

    https://note.com/debugon/n/n168934ac69bU
    § 情報セキュリティ10大脅威 - IPA

    https://www.ipa.go.jp/security/vuln/10threats2023.htmr
    § インターフェースの心理学 - Susan Weinschenk 著、武舎 広幸、武舎 るみ、阿部 和也 訳

    https://www.oreilly.co.jp/books/9784873115573/
    27

    View Slide