kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017
-
Upload
ryu-yamashita -
Category
Software
-
view
218 -
download
15
Transcript of kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017
![Page 1: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/1.jpg)
kintone JSコーディングの玄人化を目指して
株式会社ジョイゾー 山下竜
kintone evaCampNov 7th 2017
![Page 2: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/2.jpg)
⾃⼰紹介
株式会社ジョイゾー 山下竜 (Yamaroo)
kintoneエバンジェリストkintone Café 東京⽀部メンバーIT DART隊員
2014年、界隈初のkintone転職100%kintoneでご飯を⾷べている今年70日間サンフランシスコに
福岡県⼤牟⽥市出⾝コミュニティ
主な属性
![Page 3: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/3.jpg)
会社紹介ü会社名株式会社ジョイゾー
ü所在地東京都江東区⽊場6−6−2
ü設⽴2010年12⽉20⽇(8期⽬)
ü従業員数11名(kintoneエバンジェリスト2名)
ü主な事業kintone導⼊⽀援、サイボウズOffice/ガルーン構築⽀援
kintone案件にフルコミット!
![Page 4: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/4.jpg)
⾃⼰紹介developer.cybozu.io
developer.kintone.io
日米合わせて1,000アクティビティ間近
![Page 5: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/5.jpg)
⾃⼰紹介[ASCII.jp]IoTも得意なジョイゾー山下竜氏、70日間の北米勤務で見たモノとは?
[同人誌]kintoneで始めるIoT
サイボウズ商店@Cybozu Daysで
販売
![Page 6: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/6.jpg)
今⽇ご紹介する⽞⼈化ポイント
• そろそろ⽌めよう!APIの同期処理• ESLintで構⽂チェック!• 51-modern-default.cssでスタイル設定!• 実践!セキュアコーディング
![Page 7: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/7.jpg)
そろそろ⽌めよう!APIの同期処理
![Page 8: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/8.jpg)
やめられないXMLHttpRequestの同期処理
「複数のレコードをループして取得するワザ (https://developer.cybozu.io/hc/ja/articles/201501294)」より
![Page 9: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/9.jpg)
やめられないXMLHttpRequestの同期処理
「複数のレコードをループして取得するワザ (https://developer.cybozu.io/hc/ja/articles/201501294)」より
デフォルトは勿論”true”
![Page 10: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/10.jpg)
XHRの同期処理、アラート出てますよね?
[Deprecation]SynchronousXMLHttpRequest onthemainthreadisdeprecatedbecauseofitsdetrimentaleffectstotheenduser'sexperience.
コンソールにアラート出てますよね?
![Page 11: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/11.jpg)
kintone.api()を使う
• XMLHttpRequestをやめて、kintone.api()を使おう• 実⾏順序を制御したければ、kintone.Promiseを組み合わせる
ただ、非同期でXMLHttpRequestを使うのはアリだし、kintone JavaScriptAPIで出来ないことは、非同期XMLHttpRequestを使う
![Page 12: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/12.jpg)
ファイル処理はXHR⾮同期処理で!ファイルのアップロード ファイルのダウンロード
![Page 13: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/13.jpg)
レスポンスヘッダが欲しい時には⾮同期XHR?
• kintone.api()は、ヘッダとステータスコードを返さない• 2017/11のアップデートで追加になる気になるヘッダ• X-ConcurrencyLimit-Limit: 同時接続数上限の上限値• X-ConcurrencyLimit-Running:現在の同時接続数の情報
![Page 14: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/14.jpg)
レスポンスヘッダが欲しい時には⾮同期XHR?
⾮同期XHRによるレコード取得APIのリクエスト
コンソールで実行した結果
レスポンスヘッダ
![Page 15: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/15.jpg)
ESLintで構⽂チェック!
![Page 16: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/16.jpg)
「リンティングツール」「構⽂チェック」とは?
![Page 17: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/17.jpg)
リンティングツール• コードスタイルの⼀貫性を保つ:スペース、インデント、ブレース(波括
弧)の配置などのコードスタイルの問題をリンターで確認できる。チームの同意を得たコーディングスタイルを設定ファイルに記述しておけば⾃動的に確認できる• 潜在的エラーや良くないパターンを⾒分けられる:リンターは、重複変数、
到達不能コード、無効な正規表現の可能性があるエラーを発⾒するため、より⾼度な確認に使⽤できる。リンターの警告で、ランタイム前にエラーを修正できる• 品質を強化する:⼈とは常に⼿抜きをしたくなるものなので、プロジェク
トの特定のスタイルガイドに従うときはツールで強化することが⼤切だ。作成⼿順にリンティングツールが備わっている場合は、プロジェクトの開始を⽌めるか、未修整エラーがあるならリポジトリにコミットする• 時間を節約する:上の3点から得られる主なメリットはリンターが開発中
の⼿間を省くことだ。ブレースについて同僚と⾒当違いの議論に貴重な時間を費やすことなく、初期段階で1〜2個のバグを発⾒する
潜在的な問題を自動検出
(https://www.webprofessional.jp/up-and-running-with-eslint-the-pluggable-javascript-linter/)より
![Page 18: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/18.jpg)
⼀般的なJavaScriptの構⽂チェックツール
• JSHint• JSLint• ESLint
jswatchdogで利用されている
![Page 19: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/19.jpg)
kintone JavaScriptに特化した構⽂チェック
jswatchdog
eslint-config-kintone
![Page 20: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/20.jpg)
jswatchdog
• 2015/4 リリース• 内包ツール
• JSHint(構⽂チェック)• ESLint(構⽂チェック)• JSPrime(脆弱性チェック)
• コードをコピペして診断
現在メンテ停止の様子
![Page 21: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/21.jpg)
• 2016/9 リリース• ESLintベース• コマンドやエディタで診断
eslint-config-kintone新しく整備されたこちらを使う
![Page 22: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/22.jpg)
ESLint、eslint-config-kintoneを使おう!
• ESLintにeslint-config-kintoneを追加• lint⾮対象プロパティをglobalsに指定• 独⾃ルールをrulesに指定
.eslintrc.jsの例
![Page 23: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/23.jpg)
51-modern-default.cssでスタイル設定!
![Page 24: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/24.jpg)
51-modern-default.css
• kintoneプラグイン開発ユーティリティのひとつとして提供されている• プラグインに限らずkintoneのJSカスタマイズで利⽤すると⾒た⽬をそれっぽくできる
![Page 25: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/25.jpg)
51-modern-default.cssのスタイルを設定
テキストボックス
スタイルなし 51-modern-default.css適用
チェックボックス
セレクトボックス
ラジオボタン
ボタン
![Page 26: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/26.jpg)
51-modern-default.cssのスタイルを設定
テーブル
スタイルはあるけど、制御するJSの準備が
面倒
![Page 27: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/27.jpg)
実践!セキュアコーディング
![Page 28: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/28.jpg)
セキュアコーディングガイドライン
• クロスサイトスクリプティングを防ぐ• クロスサイトリクエストフォージェリを防ぐ• 通信にHTTPSを使⽤する• 取得したデータは適切に保管する• JavaScript カスタマイズ利⽤時のその他の注意点• サービスへの影響を考慮する
セキュアコーディングガイドライン(https://developer.cybozu.io/hc/ja/articles/201919400)」より
![Page 29: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/29.jpg)
セキュアコーディングガイドライン
• クロスサイトスクリプティングを防ぐ• クロスサイトリクエストフォージェリを防ぐ• 通信にHTTPSを使⽤する• 取得したデータは適切に保管する• JavaScript カスタマイズ利⽤時のその他の注意点• サービスへの影響を考慮する
セキュアコーディングガイドライン(https://developer.cybozu.io/hc/ja/articles/201919400)」より
カスタマイズする人の注意ポイント
似たようなトピックで 「SecurityBestPracticesforBotBuilders(https://www.slideshare.net/MaxFeldman4/security-best-practices-for-bot-builders)」
もわかりやすい!
![Page 30: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/30.jpg)
⼀般的なXSS対策
• HTMLエスケープする• &、<、>、”、ʼ
• HTMLエスケープしなくても安全になるような書き⽅をする• element.textContent、$(element).text()、$(element).val() を使
う• element.innerHTML、$(element).html()、 $(element).append()
を使わない• aタグの⽣成時にはHTMLエスケープに加えてencodeURIComponentも必要
![Page 31: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/31.jpg)
XSS対策の課題
• 対策の難しさ• ⼊⼒が数値だけなのでエスケープは不要っぽい?等の判断が難しいこ
とがある• レビュー時の難しさ• どこでエスケープされているかの確認が⾯倒だったりする
![Page 32: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/32.jpg)
kintoneで起きうるXSS
• フィールドのラベルにスクリプトが仕込まれる• レコードのフィールドの値にスクリプトが仕込まれる• カスタマイズで⾜したテキストボックスにスクリプトが⼊⼒される
![Page 33: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/33.jpg)
kintoneでXSSを起こしてみる
フィールドのラベルにスクリプトが仕込まれる
![Page 34: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/34.jpg)
レコードのフィールドの値にスクリプトが仕込まれる
kintoneでXSSを起こしてみる
![Page 35: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/35.jpg)
kintoneでXSSを起こしてみる
カスタマイズで⾜したテキストボックスにスクリプトが⼊⼒される
![Page 36: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/36.jpg)
kintoneでXSSを起こしてみる
![Page 37: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/37.jpg)
BetterなXSS対策
• HTMLエスケープしなくても安全になるような書き⽅をする• element.textContent、$(element).text()、$(element).val() を使
う• element.innerHTML、$(element).html()、 $(element).append()
を使わない• HTMLの⽣成が⼤きくなる際にはテンプレートエンジンを利⽤する• jsRenderのようなテンプレートエンジンの利⽤• React、Vue等のフレームワークにはその機能が元々備わっている• Underscore、lodash等のユーティリティの機能を利⽤
![Page 38: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/38.jpg)
テンプレートエンジンを使ったHTML⽣成
「フィールドのラベルにスクリプトが仕込まれる」への対策
![Page 39: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/39.jpg)
素敵なkintone JSライフを!
![Page 40: kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017](https://reader033.fdocument.pub/reader033/viewer/2022051318/5a64dc547f8b9ac21c8b704d/html5/thumbnails/40.jpg)