「kintone evaCamp 2017」発表資料

1. kintone JSコーディングの
玄人化を目指して
株式会社ジョイゾー 山下竜
kintone evaCamp
Nov 7th 2017

2. ⾃⼰紹介
株式会社ジョイゾー 山下 竜 (Yamaroo)
kintoneエバンジェリスト
kintone Café 東京⽀部メンバー
IT DART隊員
2014年、界隈初のkintone転職
100%kintoneでご飯を⾷べている
今年70日間サンフランシスコに
福岡県⼤牟⽥市出⾝
コミュニティ
主な属性

3. 会社紹介
ü会社名
株式会社ジョイゾー
ü所在地
東京都江東区⽊場６−６−２
ü設⽴
２０１０年１２⽉２０⽇（８期⽬）
ü従業員数
１１名（kintoneエバンジェリスト２名）
ü主な事業
kintone導⼊⽀援、サイボウズOffice/ガルーン
構築⽀援
kintone案件にフルコミット！

4. ⾃⼰紹介
developer.cybozu.io
developer.kintone.io
日米合わせて1,000
アクティビティ間近

5. ⾃⼰紹介
[ASCII.jp] IoTも得意なジョイゾー山下竜氏、
70日間の北米勤務で見たモノとは？
[同人誌]kintoneで始めるIoT
サイボウズ商店
@Cybozu Daysで
販売

6. 今⽇ご紹介する⽞⼈化ポイント
• そろそろ⽌めよう！APIの同期処理
• ESLintで構⽂チェック！
• 51-modern-default.cssでスタイル設定！
• 実践！セキュアコーディング

7. そろそろ⽌めよう！
APIの同期処理

8. やめられないXMLHttpRequestの同期処理
「複数のレコードをループして取得するワザ (https://developer.cybozu.io/hc/ja/articles/201501294) 」より

9. やめられないXMLHttpRequestの同期処理
「複数のレコードをループして取得するワザ (https://developer.cybozu.io/hc/ja/articles/201501294) 」より
デフォルトは勿論”true”

10. XHRの同期処理、アラート出てますよね？
[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated
because of its detrimental effects to the end user's experience.
コンソールにアラート
出てますよね？

11. kintone.api()を使う
• XMLHttpRequestをやめて、kintone.api()を使おう
• 実⾏順序を制御したければ、kintone.Promiseを組み合わせる
ただ、非同期でXMLHttpRequestを使うのはアリだし、kintone JavaScript APIで
出来ないことは、非同期XMLHttpRequestを使う

12. ファイル処理はXHR⾮同期処理で！
ファイルのアップロード ファイルのダウンロード

13. レスポンスヘッダが欲しい時には⾮同期XHR?
• kintone.api()は、ヘッダとステータスコードを返さない
• 2017/11のアップデートで追加になる気になるヘッダ
• X-ConcurrencyLimit-Limit: 同時接続数上限の上限値
• X-ConcurrencyLimit-Running:現在の同時接続数の情報

14. レスポンスヘッダが欲しい時には⾮同期XHR?
⾮同期XHRによるレコード取得APIのリクエスト
コンソールで実行した結果
レスポンスヘッダ

15. ESLintで構⽂チェック！

16. 「リンティングツール」
「構⽂チェック」とは？

17. リンティングツール
• コードスタイルの⼀貫性を保つ：スペース、インデント、ブレース（波括
弧）の配置などのコードスタイルの問題をリンターで確認できる。チーム
の同意を得たコーディングスタイルを設定ファイルに記述しておけば⾃動
的に確認できる
• 潜在的エラーや良くないパターンを⾒分けられる：リンターは、重複変数、
到達不能コード、無効な正規表現の可能性があるエラーを発⾒するため、
より⾼度な確認に使⽤できる。リンターの警告で、ランタイム前にエラー
を修正できる
• 品質を強化する：⼈とは常に⼿抜きをしたくなるものなので、プロジェク
トの特定のスタイルガイドに従うときはツールで強化することが⼤切だ。
作成⼿順にリンティングツールが備わっている場合は、プロジェクトの開
始を⽌めるか、未修整エラーがあるならリポジトリにコミットする
• 時間を節約する：上の3点から得られる主なメリットはリンターが開発中
の⼿間を省くことだ。ブレースについて同僚と⾒当違いの議論に貴重な時
間を費やすことなく、初期段階で1〜2個のバグを発⾒する
潜在的な問題を自動検出
(https://www.webprofessional.jp/up-and-running-with-eslint-the-pluggable-javascript-linter/) より

18. ⼀般的なJavaScriptの構⽂チェックツール
• JSHint
• JSLint
• ESLint
jswatchdogで利用されている

19. kintone JavaScriptに特化した構⽂チェック
jswatchdog
eslint-config-kintone

20. jswatchdog
• 2015/4 リリース
• 内包ツール
• JSHint（構⽂チェック）
• ESLint（構⽂チェック）
• JSPrime（脆弱性チェック）
• コードをコピペして診断
現在メンテ停止の様子

21. • 2016/9 リリース
• ESLintベース
• コマンドやエディタで診断
eslint-config-kintone
新しく整備されたこちらを使う

22. ESLint、eslint-config-kintoneを使おう！
• ESLintにeslint-config-kintoneを追加
• lint⾮対象プロパティをglobalsに指定
• 独⾃ルールをrulesに指定
.eslintrc.jsの例

23. 51-modern-default.cssで
スタイル設定！

24. 51-modern-default.css
• kintoneプラグイン開発ユーティリティのひとつとして提供さ
れている
• プラグインに限らずkintoneのJSカスタマイズで利⽤すると⾒
た⽬をそれっぽくできる

25. 51-modern-default.cssのスタイルを設定
テキストボックス
スタイルなし 51-modern-default.css適用
チェックボックス
セレクトボックス
ラジオボタン
ボタン

26. 51-modern-default.cssのスタイルを設定
テーブル
スタイルはあるけど、
制御するJSの準備が
面倒

27. 実践！セキュアコーディング

28. セキュアコーディングガイドライン
• クロスサイトスクリプティングを防ぐ
• クロスサイトリクエストフォージェリを防ぐ
• 通信にHTTPSを使⽤する
• 取得したデータは適切に保管する
• JavaScript カスタマイズ利⽤時のその他の注意点
• サービスへの影響を考慮する
セキュアコーディングガイドライン(https://developer.cybozu.io/hc/ja/articles/201919400) 」より

29. セキュアコーディングガイドライン
• クロスサイトスクリプティングを防ぐ
• クロスサイトリクエストフォージェリを防ぐ
• 通信にHTTPSを使⽤する
• 取得したデータは適切に保管する
• JavaScript カスタマイズ利⽤時のその他の注意点
• サービスへの影響を考慮する
セキュアコーディングガイドライン(https://developer.cybozu.io/hc/ja/articles/201919400) 」より
カスタマイズする人の
注意ポイント
似たようなトピックで 「Security Best Practices for Bot Builders
(https://www.slideshare.net/MaxFeldman4/security-best-practices-for-bot-builders) 」
もわかりやすい！

30. ⼀般的なXSS対策
• HTMLエスケープする
• &、<、>、”、ʼ
• HTMLエスケープしなくても安全になるような書き⽅をする
• element.textContent、$(element).text()、$(element).val() を使
う
• element.innerHTML、$(element).html()、 $(element).append()
を使わない
• aタグの⽣成時にはHTMLエスケープに加えて
encodeURIComponentも必要

31. XSS対策の課題
• 対策の難しさ
• ⼊⼒が数値だけなのでエスケープは不要っぽい？等の判断が難しいこ
とがある
• レビュー時の難しさ
• どこでエスケープされているかの確認が⾯倒だったりする

32. kintoneで起きうるXSS
• フィールドのラベルにスクリプトが仕込まれる
• レコードのフィールドの値にスクリプトが仕込まれる
• カスタマイズで⾜したテキストボックスにスクリプトが⼊⼒さ
れる

33. kintoneでXSSを起こしてみる
フィールドのラベルにスクリプトが仕込まれる

34. レコードのフィールドの値にスクリプトが仕込まれる
kintoneでXSSを起こしてみる

35. kintoneでXSSを起こしてみる
カスタマイズで⾜したテキストボックスにスクリプトが⼊⼒される

36. kintoneでXSSを起こしてみる

37. BetterなXSS対策
• HTMLエスケープしなくても安全になるような書き⽅をする
• element.textContent、$(element).text()、$(element).val() を使
う
• element.innerHTML、$(element).html()、 $(element).append()
を使わない
• HTMLの⽣成が⼤きくなる際にはテンプレートエンジンを利⽤
する
• jsRenderのようなテンプレートエンジンの利⽤
• React、Vue等のフレームワークにはその機能が元々備わっている
• Underscore、lodash等のユーティリティの機能を利⽤

38. テンプレートエンジンを使ったHTML⽣成
「フィールドのラベルにスクリプトが仕込まれる」への対策

39. 素敵な
kintone JSライフを！