Closed13

React.jsのコード静的解析(セキュリティ編)

もっくま(Mistletoe)もっくま(Mistletoe)

React.jsのコード内容がセキュリティ的に問題ないかをチェックしてくれるツールを色々試す(無料の中で)

もっくま(Mistletoe)もっくま(Mistletoe)

Your current plan allows for 401 tests/month.

無料でも回数制限でセキュリティチェックしてくれるらしい。
太っ腹

もっくま(Mistletoe)もっくま(Mistletoe)


GitHubと連携してチェック実行することもできるし、


publicリポジトリならURL指定でチェック実行できる。

もっくま(Mistletoe)もっくま(Mistletoe)


最近作った小さいサンプルコードはライブラリもコードも脆弱性は見当たらなかった。
というかコードで問題のあるケースは1つもなかった。

ライブラリで引っかかるとこんな感じ

Dockerfileまで勝手に見てくれる。えらい。

もっくま(Mistletoe)もっくま(Mistletoe)

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
もっくま(Mistletoe)もっくま(Mistletoe)

ちゃんとReact.jsのチェックできるかな?
以下のようにXSS脆弱性のあるコードを追加して実行してみる。

const Header = () => {
    return (
        <>
            <h1>Hello, world!</h1>
            <a href="javascript:alert('XSS')">ここをクリック!</a> {/* ←XSS脆弱性 */}
        </>
    );
};

export default Header;

結果…


ちゃんと検知できた!
(まぁこんなコード書かないと思うけど…笑)

もっくま(Mistletoe)もっくま(Mistletoe)

GitHubリポジトリにインストールするだけで利用できた。簡単。


パフォーマンス問題、アンチパターンなど、結構いろんな観点で見てくれる。
テストコードとかでまあええやろみたいなやつも検知されるが、そのへんは項目制御する感じかな

もっくま(Mistletoe)もっくま(Mistletoe)

まとめ

  • SaaS型のSnyk,DeepSourceはそこまで体験に差がない感じですね。
  • sonarQubeはクローズドな環境でも回せるので、エンプラっぽいところでも使えそう。
このスクラップは4ヶ月前にクローズされました