HTML/JS/CSSのソースコード簡易解析アプリです。単体ファイルや統合型(HTML・CSS・JS）、またはフォルダー(HTML・JS・CSS・imageやsoundファイル)ごとドロップエリアにドラッグ＆ドロップしてコードを解析します。解析後は、構文チェックやコードエラー(該当箇所のコード、行番号表示)がある場合は日本語表示でエラー対応します。また、プレビューでは現在コードの画面が表示されます。
このページの最後にコード解析のリンクを設けていますのでご参考までに。
各項目の案内
1. 読み込みコード
解析対象のソースコードを読み込み、内容を確認・編集する項目です。
1.リスト
読み込み方法
ファイル選択、複数ファイルの選択、フォルダーの読み込みなどに対応しています。読み込んだファイルは、ファイル名とパスをもとに管理されます。
表示と編集
選択したテキストファイルの内容をコード編集欄に表示します。行番号と簡易的な構文ハイライトも表示されます。編集内容は読み込み中のファイル情報にも反映されます。
読み込み時の制限
対象の拡張子によってテキストとして扱うかどうかを判断します。対象のテキストファイルは1ファイル5MBを超えると読み込みを拒否します。画像・音声・動画などは通常のテキストコードとして解析する対象ではありません。
プレビューとの違い
読み込んだコードを表示することと、プレビューで内容を表示することは別の処理です。プレビューではHTMLなどの表示や動作が発生する場合があるため、信頼できないコードを扱う際は注意してください。
2. 構文チェック結果
選択中のコードについて、実装されている範囲で構文上の問題を検査します。
２.リスト
JavaScript
Acornが利用できる場合は、最新のECMAScript構文として解析します。構文エラーがあれば、エラーメッセージ、行・列付近、該当行、考えられる原因、対処方法を表示します。
Acornが利用できない場合
import/exportを含まないコードでは、ブラウザー標準のFunctionコンストラクターを使った代替構文チェックを試みます。import/exportを含む場合などは、詳細なチェックに制限があることを表示します。
HTMLとCSS
HTMLはこの項目では完全なHTML文法検証を行いません。CSSは主に波括弧の数が一致しているかを確認します。ファイルの種類によって検査範囲が異なります。
検査結果の限界
構文が正しくても、変数の未定義、実行時エラー、表示の不具合、処理結果の誤りまでは保証されません。簡易チェックで問題が出なかった場合も、完全に正しいという意味ではありません。
3. リンク精査・不明先URLの追跡
ソースコードに含まれるURLやリンクの候補を読み取り、確認が必要な箇所を一覧化します。
３.リスト
主な検査内容
外部URL、javascript:・data:・file:などのURL形式、短縮URL、リダイレクト用パラメーター、エンコードされたURL、表示文字列と実際のリンク先の不一致などを検出します。
動的な遷移
window.open、locationによるページ遷移、デコード処理、文字列からの動的生成など、遷移先の確認が必要な記述も検出対象です。実行時にURLが組み立てられる場合は、候補の検出にとどまることがあります。
不明なURLを確認する方法
検出されたURLのドメイン、パス、周辺のコード、リンクの用途を確認してください。表示されているURLと実際の遷移先が異なる場合は、特に慎重に調べます。
重要な制限
この機能はソースコードの静的精査です。URLへの接続、実際のHTTPリダイレクトの追跡、リンク先サイトの安全性確認は行いません。検出された内容だけで安全・危険を断定しないでください。
4. ファイル間の依存関係マップ
読み込んだファイル同士が、どのような参照関係にあるかを解析し、関係を図とテキストで確認します。
４.リスト
検出する参照
HTMLのsrc・hrefなど、CSSの@import・url()、JavaScriptのimport/export、require()、一部のURL参照パターンなどを調べます。
参照先の解決
相対パスやフォルダ構成などをもとに、読み込み済みファイルの中から参照先を探します。見つかった参照はファイル間のつながりとして扱います。
解析結果の見方
マップと結果欄では、ファイル数、参照数、解決できないローカル参照、外部URL、動的参照・通信候補などを確認できます。未解決の参照は、パスの間違い、ファイルの読み込み漏れ、実行時に決まる参照などの可能性があります。
検査の限界
すべての参照先や実行時の依存関係を確定できるわけではありません。変数から生成されるパスや動的な読み込みは、候補の検出にとどまる場合があります。
5. セキュリティ精査
読み込んだソースコードを静的に調べ、セキュリティ上の確認が必要な記述を検出します。
５.リスト
検出する内容
eval()やFunctionコンストラクターによる動的コード生成、document.write()、innerHTMLなどへの代入、Cookieやブラウザーストレージへのアクセス、通信API、ページ遷移、暗号処理の使用候補、注意が必要なURLや難読化の手掛かりなどを調べます。
リスク表示
検出結果は「高リスク候補」「要確認」「参考情報」などに分類されます。該当するコード、ファイル名、行番号、検出理由、対処の手掛かりを確認してください。
検出結果の判断
危険につながる記述でも正当な用途がある場合があります。反対に、危険な処理が別の形で実装されていると検出できない場合もあります。周辺コードや入力値の出所、データの送信先も確認してください。
安全性について
この機能はコードを実行せずに行う静的検査です。検出結果は安全性の保証や完全な脆弱性診断ではありません。また、リンク精査と同様、外部サイトへ接続して実際の通信先を調査する機能ではありません。
6. 基本解析結果
選択中のコードについて、基本的な統計と構造上の情報をまとめて表示します。
６.リスト
共通情報
対象ファイル、文字数、行数などを表示します。ファイルの種類に応じて、追加の解析情報が続きます。
HTMLの場合
HTML要素数、title、script要素数、CSS参照候補、画像要素数などを調べます。
CSSの場合
コメントを除いたテキストからCSSルール候補を抽出し、ルール数やセレクター候補を表示します。
JavaScriptの場合
関数定義、アロー関数、条件分岐、switch、ループ、変数宣言、return、await、try/catchなどの記述数を調べます。Acornが利用できる場合は構文解析も試みます。
数値の読み方
一部の集計は文字列パターンによる検出です。コメントや文字列の中にある記述まで数える場合があり、数値は必ずしも実際の処理回数や実行回数を意味しません。
7. 基本構文の説明
基本解析で取得した情報を使い、コードに含まれる構文や記述の特徴を確認するための項目です。
７.リスト
説明の作られ方
基本解析で集計した構文の種類や件数などをもとに、コードの形を説明します。HTMLでは要素や参照、CSSではルール候補、JavaScriptでは関数や条件分岐などの記述が確認対象になります。
利用方法
どのような構文が多く使われているかを把握し、ソースコードを読む際の手掛かりとして利用してください。詳しく調べたい場合は、元のコードと解析結果を照らし合わせます。
注意点
説明は静的なコードの形から作られます。コードを書いた人の意図や、実際に実行したときの動作を完全に理解・確定した説明ではありません。
8. 詳細アルゴリズム説明
対象コードを実行せず、構文や構造を調べて処理の流れを読み解くための説明を生成します。
８.リスト
解析方針
対象ファイルの種類を判定し、HTML・CSS・JavaScriptなど、それぞれに対応する静的解析処理を使います。対象コードを実行した結果ではなく、ソースから確認できる構造をもとに説明します。
HTMLの解析
HTML要素、title、script、CSS参照、画像、リンク、ボタン、フォーム、入力欄などを確認します。インラインイベント属性やscript要素の構造も調べ、外部ファイル参照などを一覧化します。
CSSの解析
CSSルールやセレクターなどの構造を調べ、スタイル指定のまとまりを確認します。これはブラウザーでの実際の描画結果を再現する解析ではありません。
JavaScriptの解析
構文木を取得できる場合は、関数、呼び出し、条件分岐などのコード構造をたどって説明を生成します。文字列や構文上のパターンから参照候補を抽出する部分もあります。
読み取れないこと
静的解析だけでは、実行時の変数の値、外部APIの応答、利用者の操作後の状態、動的に生成される処理の結果などを確定できません。説明を理解する際は、元のソースコードも合わせて確認してください。