kintone JSコーディングの玄人化を目指して

株式会社ジョイゾー 山下竜

kintone evaCampNov 7th 2017

⾃⼰紹介

株式会社ジョイゾー 山下竜 (Yamaroo)

kintoneエバンジェリストkintone Café 東京⽀部メンバーIT DART隊員

2014年、界隈初のkintone転職100%kintoneでご飯を⾷べている今年70日間サンフランシスコに

福岡県⼤牟⽥市出⾝コミュニティ

主な属性

会社紹介ü会社名株式会社ジョイゾー

ü所在地東京都江東区⽊場６−６−２

ü設⽴２０１０年１２⽉２０⽇（８期⽬）

ü従業員数１１名（kintoneエバンジェリスト２名）

ü主な事業kintone導⼊⽀援、サイボウズOffice/ガルーン構築⽀援

kintone案件にフルコミット！

⾃⼰紹介developer.cybozu.io

developer.kintone.io

日米合わせて1,000アクティビティ間近

⾃⼰紹介[ASCII.jp]IoTも得意なジョイゾー山下竜氏、70日間の北米勤務で見たモノとは？

[同人誌]kintoneで始めるIoT

サイボウズ商店@Cybozu Daysで

販売

今⽇ご紹介する⽞⼈化ポイント

• そろそろ⽌めよう！APIの同期処理• ESLintで構⽂チェック！• 51-modern-default.cssでスタイル設定！• 実践！セキュアコーディング

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

やめられないXMLHttpRequestの同期処理

「複数のレコードをループして取得するワザ (https://developer.cybozu.io/hc/ja/articles/201501294)」より

やめられないXMLHttpRequestの同期処理

「複数のレコードをループして取得するワザ (https://developer.cybozu.io/hc/ja/articles/201501294)」より

デフォルトは勿論”true”

XHRの同期処理、アラート出てますよね？

[Deprecation]SynchronousXMLHttpRequest onthemainthreadisdeprecatedbecauseofitsdetrimentaleffectstotheenduser'sexperience.

コンソールにアラート出てますよね？

kintone.api()を使う

• XMLHttpRequestをやめて、kintone.api()を使おう• 実⾏順序を制御したければ、kintone.Promiseを組み合わせる

ただ、非同期でXMLHttpRequestを使うのはアリだし、kintone JavaScriptAPIで出来ないことは、非同期XMLHttpRequestを使う

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

レスポンスヘッダが欲しい時には⾮同期XHR?

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

レスポンスヘッダが欲しい時には⾮同期XHR?

⾮同期XHRによるレコード取得APIのリクエスト

コンソールで実行した結果

レスポンスヘッダ

ESLintで構⽂チェック！

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

リンティングツール• コードスタイルの⼀貫性を保つ：スペース、インデント、ブレース（波括

弧）の配置などのコードスタイルの問題をリンターで確認できる。チームの同意を得たコーディングスタイルを設定ファイルに記述しておけば⾃動的に確認できる• 潜在的エラーや良くないパターンを⾒分けられる：リンターは、重複変数、

到達不能コード、無効な正規表現の可能性があるエラーを発⾒するため、より⾼度な確認に使⽤できる。リンターの警告で、ランタイム前にエラーを修正できる• 品質を強化する：⼈とは常に⼿抜きをしたくなるものなので、プロジェク

トの特定のスタイルガイドに従うときはツールで強化することが⼤切だ。作成⼿順にリンティングツールが備わっている場合は、プロジェクトの開始を⽌めるか、未修整エラーがあるならリポジトリにコミットする• 時間を節約する：上の3点から得られる主なメリットはリンターが開発中

の⼿間を省くことだ。ブレースについて同僚と⾒当違いの議論に貴重な時間を費やすことなく、初期段階で1〜2個のバグを発⾒する

潜在的な問題を自動検出

(https://www.webprofessional.jp/up-and-running-with-eslint-the-pluggable-javascript-linter/)より

⼀般的なJavaScriptの構⽂チェックツール

• JSHint• JSLint• ESLint

jswatchdogで利用されている

kintone JavaScriptに特化した構⽂チェック

jswatchdog

eslint-config-kintone

jswatchdog

• 2015/4 リリース• 内包ツール

• JSHint（構⽂チェック）• ESLint（構⽂チェック）• JSPrime（脆弱性チェック）

• コードをコピペして診断

現在メンテ停止の様子

• 2016/9 リリース• ESLintベース• コマンドやエディタで診断

eslint-config-kintone新しく整備されたこちらを使う

ESLint、eslint-config-kintoneを使おう！

• ESLintにeslint-config-kintoneを追加• lint⾮対象プロパティをglobalsに指定• 独⾃ルールをrulesに指定

.eslintrc.jsの例

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

51-modern-default.css

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

51-modern-default.cssのスタイルを設定

テキストボックス

スタイルなし 51-modern-default.css適用

チェックボックス

セレクトボックス

ラジオボタン

ボタン

51-modern-default.cssのスタイルを設定

テーブル

スタイルはあるけど、制御するJSの準備が

面倒

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

セキュアコーディングガイドライン

• クロスサイトスクリプティングを防ぐ• クロスサイトリクエストフォージェリを防ぐ• 通信にHTTPSを使⽤する• 取得したデータは適切に保管する• JavaScript カスタマイズ利⽤時のその他の注意点• サービスへの影響を考慮する

セキュアコーディングガイドライン(https://developer.cybozu.io/hc/ja/articles/201919400)」より

セキュアコーディングガイドライン

• クロスサイトスクリプティングを防ぐ• クロスサイトリクエストフォージェリを防ぐ• 通信にHTTPSを使⽤する• 取得したデータは適切に保管する• JavaScript カスタマイズ利⽤時のその他の注意点• サービスへの影響を考慮する

セキュアコーディングガイドライン(https://developer.cybozu.io/hc/ja/articles/201919400)」より

カスタマイズする人の注意ポイント

似たようなトピックで 「SecurityBestPracticesforBotBuilders(https://www.slideshare.net/MaxFeldman4/security-best-practices-for-bot-builders)」

もわかりやすい！

⼀般的なXSS対策

• HTMLエスケープする• &、<、>、”、ʼ

• HTMLエスケープしなくても安全になるような書き⽅をする• element.textContent、$(element).text()、$(element).val() を使

う• element.innerHTML、$(element).html()、 $(element).append()

を使わない• aタグの⽣成時にはHTMLエスケープに加えてencodeURIComponentも必要

XSS対策の課題

• 対策の難しさ• ⼊⼒が数値だけなのでエスケープは不要っぽい？等の判断が難しいこ

とがある• レビュー時の難しさ• どこでエスケープされているかの確認が⾯倒だったりする

kintoneで起きうるXSS

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

kintoneでXSSを起こしてみる

フィールドのラベルにスクリプトが仕込まれる

レコードのフィールドの値にスクリプトが仕込まれる

kintoneでXSSを起こしてみる

kintoneでXSSを起こしてみる

カスタマイズで⾜したテキストボックスにスクリプトが⼊⼒される

kintoneでXSSを起こしてみる

BetterなXSS対策

• HTMLエスケープしなくても安全になるような書き⽅をする• element.textContent、$(element).text()、$(element).val() を使

う• element.innerHTML、$(element).html()、 $(element).append()

を使わない• HTMLの⽣成が⼤きくなる際にはテンプレートエンジンを利⽤する• jsRenderのようなテンプレートエンジンの利⽤• React、Vue等のフレームワークにはその機能が元々備わっている• Underscore、lodash等のユーティリティの機能を利⽤

テンプレートエンジンを使ったHTML⽣成

「フィールドのラベルにスクリプトが仕込まれる」への対策

素敵なkintone JSライフを！