「第40回デザイン勉強会「初心者必見！これからはじめるSSL対策」&オープニング ショートセッション「はじめてのAdobe XD」 http://timing-design.jp/40th_designstudy/」で登壇したときの発表資料です。

1. チョットだけサーバ周りに詳しいかもしれないくまさんが説明する安心・安全なホームページの作り方
これからはじめるSSL対策
Shohei Kobayashi @srockstyle

2. こんにちはすろっくまです

3. Shohei Kobayashi @srockstyle
Works:
• SRE（Site Reliability Engineer
• Free Illustrator
Love:
• Web / Cloud / Apple Products
• Infrastructure as Code
• My Comic / Clip Studio
• Twitter （10 years!）

4. 今日話さないこと
• SSLの種類（OpenSSL一択）
• SSLの暗号化の詳細とか（難易度高すぎ）
• SPDY（今は使われない）
• サーバの設定詳細（めんどくさい）
• 0円で作業せずにSSL化したい人向けの説明
• お金をかければSSL化できる人向けの説明

5. 今日話すこと
• SSLの本質（結構エモい）
• SSLのメリット（ちょっとエモい）
• 少ないお金と少ない工数でSSLする
手段（エモくない）

6. 全体アジェンダ
• SSL化する #とは（15分）
• SSL化のメリット（ 10分）
• サイトをSSL化する（15分）

7. 全体アジェンダ
• SSL化する #とは（15分）
• SSL化のメリット（ 10分）
• サイトをSSL化する（15分）

8. 第1部
SSL化する
#とは

9. 誰でも解るように
絵本にしました

10. ゼロからはじめる
エスエスエル(絵本)
「センス不要！」

11. 登場人物

12. すろっくま
SRE / 嫁さん大好き
お絵描き大好き / アニメ大好き

13. あおいうさぎ
心理カウンセラー / すろっくまの嫁
バンギャ / オタク / レイヤー

14. きたむライオンさん
著名デザイナー / 社長
ドラマー / ラーメンとか作れる
著書：「ゼロからのデザイン」

15. 製作過程

16. 製作過程 2

17. ケース1
httpsじゃない
メールフォー
ム

18. https化 #とは

19. 1.1お仕事依頼フォーム
httpの場合

20. 書く

21. 投げる

22. 丸見え

23. 悪意のある行動

24. DEATH

25. 全て全て全て全て全て
SSL化しない通信は全て見える

26. 1.2 嫁にラブレターのフォーム
httpの場合

27. 書く

28. 投げる

29. 丸見え

30. 悪意のある書き換え

31. DEATH

32. ケース2
httpsじゃない
決済フォーム

33. 2.1 嫁にプレゼントの花を買う
カード番号送信がhttpの場合

34. 入力

35. 決済

36. 丸見え

37. 勝手にカードが使われる

38. DEATH

39. ケース3
タイとかの
宿のネット

40. 宿のネットはこんな感じ

41. ＊タイとかのネットインフラは
見えるもの全てをキャッシュする

42. 入力

43. 悪いやつが別室にいたら

44. 同じURLで同じ画面が見える

45. 自分のサイトの管理画面

46. （SSL化されてればキャッシュできないので発生しない）
他人にも丸見え！！！

47. DEATH

48. 本当に必要な人にだけ
情報を渡すこと
SSL化すること＃とは

49. Reliability
（信頼性）

50. 信頼性をあげること
SSL化すること＃とは
• ネット経由で連絡を取り合う全ての人と
• サイトを経由してアクションしてくれる全ての人と
• 自分が作ったサイトを運営する人も＊重要

51. サイトの向こう側には
常に人間がいると意識すること
SSL化すること＃とは

52. 家族

53. 友人

54. 悪いやつも

55. 本当に伝えたい人にだけ
伝えたいものを伝えるための技術

56. （Secure Socket Layer）

57. ここまで15分くらい

58. 全体アジェンダ
• SSL化する #とは（15分）
• SSL化のメリット（ 10分）
• サイトをSSL化する（15分）

59. 第2部
SSL化する
メリット

60. 覚えてほしいSSL三つのメリット
• 正しく伝わる
• 速く伝わる
• 広く伝わる

61. 正しく！

62. 暗号化することで
通信間で読まれることを防ぐ

63. 見えない

64. 書き換えられない！

65. 速く！

66. http/2の設定を一緒にすることで
ネットワーク帯域を有効に使える

67. 今までhttpは1接続に1処理

68. SSL&http/2化で並列で処理

69. 広く！

70. Googleの検索ロジックが
2014年からhttps優先になりました

71. 俺たちは
いつWEBサイトを
SSL化するのか

73. 全体アジェンダ
• SSL化する #とは（15分）
• SSL化のメリット（ 10分）
• サイトをSSL化する（15分）

74. ここまで25分くらい

75. 第3部
サイトを
SSL化する

76. SSL化する時の選択肢
•楽する代わりにお金をかける
•自分で頑張ってお金はかけない

77. •できないならお金をかける
•お金かけられないならがんばろう

78. 最小限のコストでSSL化

79. お金で解決するメリット
•楽できる
•考えなくていい
•さっさと解決できる

80. お金で解決するデメリット
• 本質を理解できない
• やりたいことができなかったりする
• 同じ手段が毎回使えるとは限らない

81. 自分で頑張るメリット
• やった技術は確実に自分のものになる
• 同じことはできるようになる
• 概念として覚えられる

82. 自分でやるデメリット
•できるかどうかの見積もりができない
•納品までの時間の見積もりができない
•セキュリティホール作る可能性がある

83. どうやるか

84. お金で楽をする
• レンタルサーバのSSL証明書
• Heroku / GCP

85. お金チョットで自分で頑張る
• Google Firebase Hosting
• サイトのサーバ内でLet’sEncrypt

86. 実装まで必要な手順

87. 1. サイトのドメイン取得
2. SSL証明書取得
3. サイトの設置
4. ドメインの割り当て
5. 証明書の設定

88. 1. サイトのドメイン取得
2. SSL証明書取得 <— ココ
3. サイトの設置
4. ドメインの割り当て
5. 証明書の設定

89. 証明書を取得する
1. CSR（署名要求）をつくる
2. 必要な情報をいろいろいれる
3. 証明書を購入する（0円〜数万円までピンキリ）

90. 1.CSR（署名要求）を作る
証明書くれっていうだけの長い暗号

91. 2.必要な情報をいれる
責任者、技術責任者、住所とかいろいろ入れる

92. 3.買う
用途に応じて幾つかあるから選んで買う

93. めんどくさい

94. 1. サイトのドメイン取得
2. SSL証明書取得
3. サイトの設置
4. ドメインの割り当て
5. 証明書の設定<— ココ

95. WordPressを動かすための
nginx.conf（暗記不要）
server {
listen 443 ssl http2 ;
ssl_certificate [証明書ファイルへのパス];
ssl_certificate_key [証明書の秘密鍵へのパス];
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_ciphers AESGCM:HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
client_max_body_size 2G;
server_name [ドメイン名] ;
root [WordPressへのパス];
index index.php index.html;
try_files $uri $uri/ /index.php?q=$uri&$args;
include conf.d/php-fpm.conf;
}

96. めんどくさい

97. わかってほしいこと
設定も面倒

98. 面倒をなくす仕組み

99. 1. サイトのドメイン取得
2. SSL証明書取得
3. サイトの設置
4. ドメインの割り当て
5. 証明書の設定<— ココ
どこかはラクしたい

100. お金チョットで自分で頑張れる
！
そんなYOUに

101. 1. Let`s Encrypto

102. コマンド一発うつと証明書を自動で無料で設定してくれる
1. サイトのドメイン取得
2. SSL証明書取得 <-ここがコマンド一発
3. サイトの設置
4. ドメインの割り当て
5. 証明書の設定

103. メリット
1. 全て無料で証明書取得 / 設置まで可能
2. ネットに情報たくさんある
3. いくつでも作成可能

104. デメリット
1. サブドメイン単位で実行の必要がある
2. 公式ドキュメントが英語
3. コマンドライン&サーバ管理者権限必須

105. 2. Google Firebase Hosting

106. 2016/May Google FirebaseがUpdate
• 5月の発表でFirebaseが大きく進化
• Google AnalyticsなどのGoogleのプロダクトと連携
が簡単に
• アプリ情報の分析などで役立つプラットフォームに
• ……そのなかにひっそり、hostingってのがある

107. 独自ドメインじゃないサイトの静的ホスティング
1. サイトのドメイン取得
2. SSL証明書取得
3. サイトの設置<-ここがコマンド一発
4. ドメインの割り当て
5. 証明書の設定

108. 地味に独自ドメインも無料SSLできるらしい?
（ご利用は自己責任で）
https://www.firebase.com/docs/hosting/guide/custom-domain.html

109. メリット
1. サブドメインなら自動https
2. googleさんなので早い
3. freeプランがあるよ

110. デメリット
1. 独自ドメインの場合無料かはっきりしない
2. 公式ドキュメントが英語
3. あくまで静的サイトむけホスティング

111. サイト設置方法
$ firebase deploy

112. 3. Amazon Certificate
Manager

113. AWS使ってるとSSL証明書無料でつかえる
• サブドメイン全てに対応する証明書が無料
• 高負荷サイトのための負荷分散にも対応
• 動的サイトでも使えるよ（WordPressとか）

114. コマンド一発うつと証明書を自動で無料で設定してくれる
1. サイトのドメイン取得
2. SSL証明書取得 <-ここ
3. サイトの設置
4. ドメインの割り当て
5. 証明書の設定<-ここ

115. メリット
1. 全て無料で証明書取得 / 設置まで可能
2. AWSのELBとCloudFront使ってれば使
える
3. いくつでも作成可能

116. デメリット
1. http/2対応できない
2. サーバに直接当てられない
3. AWSのコンソールを触れる必要あり

117. まとめ

118. SSL面倒だけど大切！
• 実装はFirebaseやLet’sEncryptとかつかって上手くラクしよう
• 画面の向こうに人がいることを意識しよう！
• 誰に伝えたいのか、見られてもいい情報か意識しよう！
おしまい！Thx！