Closed13
React.jsのコード静的解析(セキュリティ編)
React.jsのコード内容がセキュリティ的に問題ないかをチェックしてくれるツールを色々試す(無料の中で)
まずこれ
Your current plan allows for 401 tests/month.
無料でも回数制限でセキュリティチェックしてくれるらしい。
太っ腹
GitHubと連携してチェック実行することもできるし、
publicリポジトリならURL指定でチェック実行できる。
最近作った小さいサンプルコードはライブラリもコードも脆弱性は見当たらなかった。
というかコードで問題のあるケースは1つもなかった。
ライブラリで引っかかるとこんな感じ
Dockerfileまで勝手に見てくれる。えらい。
次sonarQube
以下の記事ほぼまんまでおk
sonarQubeそのものは以下でコンテナ起動
sonar-project.propertiesは結局こうなった。
sonar.projectKey=vite-starter-guide
sonar.projectName=vite-starter-guide
sonar.sources=src
sonar.tests=src/__tests__
sonar.test.inclusions=src/__tests__/**/*.spec.tsx, src/__tests__/**/*.spec.ts
sonar.exclusions=src/__tests__/**/*.spec.tsx, src/__tests__/**/setup.ts
sonar.testExecutionReportPaths=test-report.xml
sonar.javascript.file.suffixes=.js,.jsx
sonar.typescript.file.suffixes=.ts,.tsx
sonar.typescript.lcov.reportPaths=coverage/lcov.info
sonar.javascript.lcov.reportPaths=coverage/lcov.info
sonar.login=sqp_54464264396d2fd0f6f50576f19a694afcaa610d
ちゃんとReact.jsのチェックできるかな?
以下のようにXSS脆弱性のあるコードを追加して実行してみる。
const Header = () => {
return (
<>
<h1>Hello, world!</h1>
<a href="javascript:alert('XSS')">ここをクリック!</a> {/* ←XSS脆弱性 */}
</>
);
};
export default Header;
結果…
ちゃんと検知できた!
(まぁこんなコード書かないと思うけど…笑)
作業結果はこのリポジトリへ
次
DeepSource
GitHubリポジトリにインストールするだけで利用できた。簡単。
パフォーマンス問題、アンチパターンなど、結構いろんな観点で見てくれる。
テストコードとかでまあええやろみたいなやつも検知されるが、そのへんは項目制御する感じかな
まとめ
- SaaS型のSnyk,DeepSourceはそこまで体験に差がない感じですね。
- sonarQubeはクローズドな環境でも回せるので、エンプラっぽいところでも使えそう。
このスクラップは4ヶ月前にクローズされました