Download to read offline
![⾃⼰紹介
[ASCII.jp] IoTも得意なジョイゾー山下竜氏、
70日間の北米勤務で見たモノとは？
[同人誌]kintoneで始めるIoT
サイボウズ商店
@Cybozu Daysで
販売](https://image.slidesharecdn.com/kintoneevacamp2017-171107070444/85/kintone-JS-kintone-evaCamp-2017-5-320.jpg)
![XHRの同期処理、アラート出てますよね？
[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated
because of its detrimental effects to the end user's experience.
コンソールにアラート
出てますよね？](https://image.slidesharecdn.com/kintoneevacamp2017-171107070444/85/kintone-JS-kintone-evaCamp-2017-10-320.jpg)
More Related Content
Similar to kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017
![これをマスターして初心者脱出！-kintoneチョイ技10選- [cybozu.com conference 2015 大阪 K-2]](https://cdn.slidesharecdn.com/ss_thumbnails/cybozu-151110000304-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017
- 1. kintone JSコーディングの 玄人化を目指して 株式会社ジョイゾー 山下竜 kintoneevaCamp Nov 7th 2017
- 2. ⾃⼰紹介 株式会社ジョイゾー 山下 竜(Yamaroo) kintoneエバンジェリスト kintone Café 東京⽀部メンバー IT DART隊員 2014年、界隈初のkintone転職 100%kintoneでご飯を⾷べている 今年70日間サンフランシスコに 福岡県⼤牟⽥市出⾝ コミュニティ 主な属性
- 3.
- 4.
- 5.
- 6. 今⽇ご紹介する⽞⼈化ポイント • そろそろ⽌めよう！APIの同期処理 • ESLintで構⽂チェック！ •51-modern-default.cssでスタイル設定！ • 実践！セキュアコーディング
- 7.
- 8.
- 9.
- 10.
- 11. kintone.api()を使う • XMLHttpRequestをやめて、kintone.api()を使おう • 実⾏順序を制御したければ、kintone.Promiseを組み合わせる ただ、非同期でXMLHttpRequestを使うのはアリだし、kintoneJavaScript APIで 出来ないことは、非同期XMLHttpRequestを使う
- 12.
- 13. レスポンスヘッダが欲しい時には⾮同期XHR? • kintone.api()は、ヘッダとステータスコードを返さない • 2017/11のアップデートで追加になる気になるヘッダ •X-ConcurrencyLimit-Limit: 同時接続数上限の上限値 • X-ConcurrencyLimit-Running:現在の同時接続数の情報
- 14.
- 15.
- 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.
- 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.
- 24.
- 25.
- 26.
- 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.
- 34.
- 35.
- 36.
- 37. BetterなXSS対策 • HTMLエスケープしなくても安全になるような書き⽅をする • element.textContent、$(element).text()、$(element).val()を使 う • element.innerHTML、$(element).html()、 $(element).append() を使わない • HTMLの⽣成が⼤きくなる際にはテンプレートエンジンを利⽤ する • jsRenderのようなテンプレートエンジンの利⽤ • React、Vue等のフレームワークにはその機能が元々備わっている • Underscore、lodash等のユーティリティの機能を利⽤
- 38.
- 39.