JavaScript Statik Analiz Araçları

JavaScript Statik Kod Analizi: ESLint, TypeScript, Semgrep ve Güvenlik Taramasına Pratik Bir Kılavuz

JavaScript, her yerde çalışan tek dildir: tarayıcıda, Node.js aracılığıyla sunucuda, React Native aracılığıyla mobil uygulamalarda, bulut fonksiyonlarında ve uç cihazlarda. Bu yaygınlık, kalite açısından bir bedel de beraberinde getirir. JavaScript'in dinamik tiplemesi, prototip zinciri ve eşzamansız yürütme modeli, normal koşullar altında çalışan ve koşullar değiştiğinde incelikli şekillerde başarısız olan kod yazmayı kolaylaştırır. TypeScript önemli ölçüde yardımcı olur, ancak tip güvenliği kod kalitesi, güvenlik veya mimari sağlıkla aynı şey değildir. Statik analiz bu boşluğu doldurur.

JavaScript veya TypeScript projesi için doğru statik analiz araçları kombinasyonunu seçmek tek bir karar değildir. Kod denetimi, güvenlik taraması, tip kontrolü, ölü kod tespiti ve mimari analiz, farklı araç kategorileri tarafından ele alınan farklı sorunlardır. Güvenlik tarayıcısının gerekli olduğu yerde kod denetimi kullanmak veya bağımlılık analizinin gerekli olduğu yerde tip kontrolüne güvenmek, eksik kapsama ve yanlış güven duygusuna yol açar. Bu kılavuzdaki araçlar, ekiplerin gereksiz tekrarlardan kaçınarak her kalite boyutunu kapsayan bir araç yığını oluşturabilmeleri için, gerçekte ne yaptıkları esas alınarak düzenlenmiştir.

Ne kadar SMART TS XL Kurumsal ölçekte JavaScript statik analizini destekler.

Bu kılavuzda ele alınan her araç JavaScript sınırları içinde çalışır. ESLint JavaScript dosyalarını analiz eder. TypeScript, TypeScript projesi içindeki türleri kontrol eder. Semgrep, JavaScript ve TypeScript kaynak kodlarını güvenlik açığı kalıpları açısından tarar. SonarQube, bir JavaScript kod tabanında kalite metriklerini izler. Bunların hiçbiri, JavaScript uygulamasının sınırlarının ötesine, bağımlı olduğu sistemlere veya ona bağımlı olan sistemlere erişemez.

SMART TS XL Statik analize ters yönden yaklaşır: tüm sistemden başlar ve bileşen seviyesine kadar iner. JavaScript için bu, ortamdaki diğer tüm dillerin (COBOL, JCL, Java, Python, RPG, PL/I, SQL) yanı sıra JavaScript ve TypeScript kaynak kodlarını da alıp, bunların tümü arasında yapısal ilişkileri temsil eden birleşik bir çapraz referans modeli oluşturmak anlamına gelir. Bir REST API'yi çağıran bir JavaScript modülü, bu API'nin arkasında bir Java servisi, bu servisin de bir COBOL toplu iş programı tarafından doldurulmuş bir DB2 tablosundan veri okuması gibi bir örnek verilebilir. SMART TS XL Bu harita, dört katmanın tamamını ve aralarındaki bağlantıları gösteriyor. Hiçbir JavaScript'e özgü araç bu resmi üretemez.

Özellikle JavaScript geliştirme ekipleri için, SMART TS XL Kod denetimi ve güvenlik tarama katmanını tamamlayan çeşitli yetenekler sunar:

Diller arası etki analizi. Kurumsal bir API kullanan bir JavaScript modülünü değiştirmeden önce, SMART TS XL'S etki analizi Değişikliğin etkileyeceği sistemdeki diğer tüm bileşenleri, farklı dillerde yazılmış bileşenler de dahil olmak üzere belirler. Ekipler, bir değişiklik yapılmadan önce, üretimde beklenmedik bir şeye zarar vermeden önce, değişikliğin gerçek kapsamını keşfederler.

Sistem düzeyinde ölü kod ve erişilebilirlik analizi. Knip ve ts-prune, JavaScript projesi içindeki kullanılmayan dışa aktarımları nerede bulur? SMART TS XL Sistem genelinde, Java servisleri, arka uç API'leri veya ana bilgisayar programları da dahil olmak üzere hiçbir yerde çağrı almayan JavaScript fonksiyonlarını ve modüllerini belirleyebilir. Bu sistem düzeyindeki ölü kod analizi, JavaScript ön uçlarının diğer dillerdeki arka uçlarla sıkı bir şekilde entegre olduğu kuruluşlarda önemlidir.

Dil sınırları boyunca bağımlılık görselleştirmesi. SMART TS XL'S kod görselleştirme JavaScript modüllerinin Java servislerine, COBOL programlarına, paylaşılan veritabanlarına ve harici API'lere nasıl bağlandığını ayrı ayrı dillere özgü görünümler yerine tek bir gezilebilir diyagramda gösteren bağımlılık haritaları oluşturur.

Farklı veri tipleri için birleşik kalite ölçütleri. Kod kalitesi ölçümlerini yönetim veya uyumluluk ekiplerine raporlayan kuruluşlar, yalnızca JavaScript katmanını değil, tüm yığını kapsayan ölçümlerden fayda görürler. SMART TS XL'S statik kod analizi Bu yaklaşım, JavaScript ve TypeScript'i aynı kalite boyutlarıyla, döngüsel karmaşıklık, sürdürülebilirlik endeksi ve bağımlılık bağlantısı açısından ele alır ve ortamdaki her dile tutarlı bir şekilde uygulanır.

Bağımsız olarak JavaScript uygulamaları geliştiren ekipler için, bu kılavuzdaki açık kaynaklı ve ticari araçlar kapsamlı bir çözüm sunmaktadır. Daha büyük bir kurumsal sistemin bir bileşeni olarak JavaScript uygulamaları geliştiren ekipler için ise, SMART TS XL Bu, mimari görünürlük katmanını sağlayarak analizlerin geri kalanının dosya düzeyinden ziyade sistem düzeyinde gerçekleştirilebilir olmasını mümkün kılar.

Linting Analizi ile Statik Analiz Arasındaki Fark Nedir?

Bu terimler sıklıkla birbirinin yerine kullanılır ancak farklı analiz seviyelerini tanımlarlar. Bu ayrım, araç seçimi açısından önemlidir.

Hav bırakma Statik analizin bir alt kümesi olan linter, stilistik tutarlılığa, yaygın hata kalıplarına ve kodlama kurallarının uygulanmasına odaklanır. Bir linter, kaynak kodu okur ve tanımlanmış bir kural kümesinden sapmaları işaretler. ESLint bir linter'dır. Biome ise bir linter-formatter'dır. Bunlar hataları yakalar. no-unused-vars, no-console, ve prefer-const İhlaller. Fonksiyon çağrıları arasındaki veri akışını izlemezler veya SQL enjeksiyonu gibi güvenlik açıklarını bulmazlar.

Daha geniş anlamda statik analiz, bir linter'ın yaptığı her şeyi ve daha derin analizleri kapsar: kontrol akışı analizi, veri akışı (kirlilik) analizi, çağrı grafiği oluşturma, tür düzeyinde akıl yürütme ve dosyalar ve modüller arası prosedürler arası analiz. CodeQL, kirlilik moduyla Semgrep ve SonarQube gibi araçlar bu daha kapsamlı anlamda statik analiz gerçekleştirir. Bu araçlar, yalnızca bir değişkenin tanımlanıp tanımlanmadığını değil, güvenilmeyen verilerin program içinde nasıl hareket ettiğini anlamayı gerektiren güvenlik açıklarını bulurlar.

KategorilerBuluntularTemsili Araçlar
Hav bırakmaÜslup, kurallar, sık yapılan hatalarESLint, Biome, OxcLint, StandardJS
Tip kontrolüTür hataları, eksik türler, tür uyuşmazlıklarıTypeScript (TSC), typescript-eslint
SAST / güvenlik taramasıSQL enjeksiyonu, XSS, prototip kirliliği, güvensiz bağımlılıklarSemgrep, CodeQL, Snyk Code, SonarQube
Ölü kod algılamaKullanılmayan dışa aktarımlar, erişilemeyen kod, kullanılmayan değişkenlerKnip, ts-prune, ESLint no-unused-vars
Mimari analizBağımlılık haritalama, etki analizi, çağrı grafikleriSMART TS XLCodeScene, Sourcetrail

Her olgun JavaScript projesi en az ilk üç kategoriyi kapsamalıdır. Büyük veya kurumsal projeler ise beş kategorinin tamamını kapsamalıdır.

ESLint: JavaScript Kod Denetimi için Sektör Standardı

ESLint, neredeyse her JavaScript projesinde yüklüdür. create-react-app, Next.js, Vite ve çoğu kurumsal altyapıda varsayılan kod denetleyicisidir. Eklenti ekosistemi, her büyük çerçeveyi (React, Vue, Angular, Node.js) ve dil uzantısını (TypeScript) kapsar. ESLint'i iyi anlamak, JavaScript geliştirme için bir ön koşuldur.

darbe

# Install ESLint
npm init @eslint/config@latest

# Run on the project
npx eslint src/

# Auto-fix fixable issues
npx eslint src/ --fix

ESLint v9 ve düz yapılandırmaESLint v9, eski sürümün yerini aldı. .eslintrc.* düz bir yapılandırma formatı eslint.config.js Bu, mevcut birçok projeyi etkileyen önemli bir değişikliktir. Düz yapılandırma formatı daha basittir, kademeli miras sistemini ortadan kaldırır ve yapılandırmayı açık hale getirir:

javascript

// eslint.config.js (ESLint v9 flat config)
import js from "@eslint/js";
import globals from "globals";
import tseslint from "typescript-eslint";

export default [
  js.configs.recommended,
  ...tseslint.configs.recommended,
  {
    languageOptions: {
      globals: globals.browser,
    },
    rules: {
      "no-unused-vars": "error",
      "no-console": "warn",
      "prefer-const": "error",
    },
  },
];

TypeScript için ESLint gerektirir typescript-eslint eski sürümün yerini alan paket @typescript-eslint/eslint-plugin hem de @typescript-eslint/parserBu, TSC'nin uygulamadığı 100'den fazla TypeScript'e özgü kural sağlar:

darbe

npm install --save-dev typescript-eslint

ESLint güvenlik eklentisi ESLint'e güvenlik odaklı kurallar ekleyerek, şu gibi sorunları tespit eder: eval()Güvenli olmayan düzenli ifadeler ve prototip enjeksiyonu:

darbe

npm install --save-dev eslint-plugin-security

javascript

// eslint.config.js
import security from "eslint-plugin-security";
export default [security.configs.recommended];

ESLint'in kapsadığı konular: kod stili, sık karşılaşılan hatalar (no-undef, no-unused-varsEklentiler aracılığıyla anti-kalıplar, çerçeve kuralları ve temel güvenlik kalıpları gibi unsurları içerir.

ESLint'in kapsamadığı konular : fonksiyon çağrıları genelinde veri akışı/kirlilik analizi, dosyalar arası etki analizi, bağımlılık güvenlik açıkları, mimari eşleme veya eşzamansız işlemlere özgü güvenlik açığı kalıpları.

TypeScript: Derleyici Seviyesinde Statik Güvenlik

TypeScript derleyicisi (TSC), JavaScript projeleri için mevcut en etkili statik analizi gerçekleştirir: tüm kod tabanında her fonksiyon sınırında tür doğruluğunu kanıtlar. strict modunda tsconfig.json En fazla sayıda sorunu tespit eder:

json

{
  "compilerOptions": {
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "exactOptionalPropertyTypes": true
  }
}

noUnusedLocals hem de noUnusedParameters Derleyici düzeyinde kullanılmayan değişkenleri ve fonksiyon parametrelerini yakalar, bu da ESLint'in işleviyle örtüşür. no-unused-vars Ancak TypeScript'e özgü kalıplar konusunda daha fazla hassasiyetle.

typescript-eslint TypeScript'in tür denetleyicisi ile ESLint'in kural sistemi arasındaki boşluğu doldurur. Kurallar şunları içerir: @typescript-eslint/no-floating-promises hem de @typescript-eslint/await-thenable TSC veya ESLint'in tek başına yakalayamadığı eşzamansız programlama hatalarını tespit etmek için tür bilgilerini kullanın:

javascript

// eslint.config.js -- typescript-eslint with type-checked rules
import tseslint from "typescript-eslint";

export default tseslint.config(
  ...tseslint.configs.strictTypeChecked,
  {
    languageOptions: {
      parserOptions: {
        project: true,  // enables type-aware rules
        tsconfigRootDir: import.meta.dirname,
      },
    },
    rules: {
      "@typescript-eslint/no-floating-promises": "error",
      "@typescript-eslint/await-thenable": "error",
      "@typescript-eslint/no-misused-promises": "error",
    },
  }
);

Bu üç kural, bu makaledeki Arama Konsolu verilerinde görünen async/await hata kalıplarını özel olarak ele almaktadır; yanlış Promise işleme, modern JavaScript'te en sık karşılaşılan hatalardan biridir ve typescript-eslint Ayrı bir alet gerektirmeden onları yakalar.

Biome ve OxcLint: Yeni Nesil JavaScript Araçları

ESLint, on yıldır varsayılan JavaScript kod denetleyicisiydi. Şimdi ise iki yeni araç, çok daha iyi performanslarıyla bu konuma meydan okuyor.

Biome, ESLint ve Prettier'ın yerini alan, kod denetimi, biçimlendirme ve içe aktarma organizasyonunu tek bir ikili dosyada sunan ve temel kullanım için herhangi bir yapılandırma gerektirmeyen bir araçtır. Rust dilinde yazılmıştır ve büyük kod tabanlarında ESLint'ten 25-35 kat daha hızlı çalışır. Biome, JavaScript, TypeScript, JSX ve JSON'u destekler.

darbe

# Install
npm install --save-dev --save-exact @biomejs/biome

# Initialize config
npx @biomejs/biome init

# Check (lint + format check)
npx @biomejs/biome check --write src/

OxcLint (Oxc projesinin bir parçası), ESLint ile uyumlu kuralları 50-100 kat daha hızlı çalıştıran, Rust tabanlı bir başka linter'dır. ESLint'in temel kurallarının yerine geçecek şekilde tasarlanmıştır ve tam bir geçiş gerektirmek yerine, geçiş sırasında ESLint ile birlikte çalışması amaçlanmıştır.

darbe

# Install
npm install --save-dev oxlint

# Run
npx oxlint src/

Hangisini ne zaman kullanmalı : Yeni projeler için, kod denetimi ve biçimlendirme konusunda Biome en güçlü tek araç seçeneğidir. Kapsamlı ESLint yapılandırması ve eklentileri olan mevcut projeler için, Biome'a ​​geçiş, kural kapsamının doğrulanmasını gerektirir. OxcLint, eklenti ekosisteminin hemen terk edilemeyeceği büyük mevcut projelerde ESLint'in yerini kademeli olarak almak için daha uygundur.

araçHız ve ESLint karşılaştırmasıPrettier'ın yerini alıyor.TypeScript DesteğiEklenti Ekosistemi
ESLintTemelHayır (Prettier ile eşleştirin)typescript-eslint aracılığıylaEn büyük (~3,000 eklenti)
biyom25-35 kat daha hızlıEvetGömmeSınırlı ama büyüyen
Öküz tüyü50-100 kat daha hızlıYok hayırGömmeESLint uyumlu alt küme
StandartJSESLint ile karşılaştırılabilir.KısmiSınırlıSabit kural seti

Semgrep: JavaScript Güvenliği için Desen Tabanlı SAST

Semgrep, kod kalıbı eşleştirmesi yoluyla güvenlik açıklarını bulan çok dilli bir statik analiz güvenlik testi (SAST) aracıdır. ESLint stil ve kuralları uygularken, Semgrep JavaScript ve TypeScript genelinde SQL enjeksiyonu, XSS, prototip kirliliği, sabit kodlanmış kimlik bilgileri, güvensiz Express.js yapılandırmaları ve yüzlerce diğer güvenlik modelini bulur.

ESLint'ten en önemli farkı: Semgrep kuralları, hedef dile çok benzeyen bir sözdizimi kullanılarak kod kalıpları olarak yazılır; bu da onları derin statik analiz uzmanlığına sahip olmayan geliştiriciler tarafından okunabilir ve yazılabilir hale getirir.

tatlım

# Custom Semgrep rule: flag direct use of user input in SQL queries
rules:
  - id: sql-injection-express
    patterns:
      - pattern: |
          $APP.get($ROUTE, ($REQ, $RES) => {
            ...
            $DB.query($REQ.query.$INPUT, ...);
            ...
          })
    message: User input directly used in SQL query -- use parameterized queries
    languages: [javascript, typescript]
    severity: ERROR

darbe

# Run Semgrep with the community security rule registry
semgrep scan --config=p/javascript src/

# Run with a specific rule set for Node.js
semgrep scan --config=p/nodejs src/

Semgrep ve ESLint : bunlar birbirini tamamlayıcı araçlardır, rekabetçi değillerdir. Kod kalitesi ve kurallar için ESLint kullanın. Güvenlik taraması için Semgrep kullanın. Çoğu JavaScript ekibinin CI'da her ikisini de çalıştırması gerekir. GitLab yakın zamanda SAST analiz araçlarını ESLint'ten Semgrep'e geçirdiğini, ESLint'i güvenlik tarayıcısı olarak aşamalı olarak kaldırdığını ancak lintleme için koruduğunu duyurdu; bu da ESLint'in lintleme için doğru araç, Semgrep'in ise güvenlik analizi için doğru araç olduğu yönündeki giderek artan görüşü yansıtıyor.

SonarQube ve SonarLint: Sürekli Kalite Kontrolleri

SonarQube, bir kalite kontrol modeli sunar: her çekme isteği tanımlanmış bir kalite profiline göre ölçülür ve kod eşiği karşılamazsa birleştirmeler engellenir. JavaScript ve TypeScript için hataları, kod kusurlarını, güvenlik açıklarını ve tekrarları tespit eder ve zaman içinde trend takibi yapar.

SonarLint, geliştiriciler kod yazarken SonarQube kurallarını yerel olarak ortaya çıkaran ve CI'yı beklemek yerine anında geri bildirim sağlayan bir IDE uzantısıdır.

SonarQube'un saf kod denetleme araçlarına göre değeri, sürekli ölçüm modelinde yatmaktadır: teknik borç, kod kapsamı ve güvenlik açıkları zaman içinde nasıl geliştiğini takip eder. Bu, geliştirici odaklı teşhislerin yanı sıra kod kalitesi hakkında yönetim düzeyinde raporlamaya ihtiyaç duyan ekipler için ideal bir araçtır.

JavaScript/TypeScript projeleri için temel yapılandırma :

  • Yeni bir engelleyici veya kritik güvenlik noktası oluştuğunda başarısız olacak bir kalite kontrol kapısı ayarlayın.
  • etkinleştirme Sonar Way kural profilini temel olarak kullanmak
  • Editör içi geri bildirim için SonarLint'i VS Code veya IntelliJ'de birlikte kullanın.
  • GitHub Actions veya GitLab CI ile entegrasyonu şu şekilde gerçekleştirin: SonarQube Scan aksiyon

CodeQL: Derinlemesine Güvenlik Açığı Tespiti için Semantik Kod Tarama

GitHub tarafından geliştirilen CodeQL, kodu sorgulanabilir bir veritabanına dönüştürerek ve bu veritabanı üzerinde sorgular çalıştırarak anlamsal analiz gerçekleştirir. JavaScript ve TypeScript'i destekler ve GitHub Gelişmiş Güvenlik aracılığıyla açık kaynak projeleri için ücretsiz olarak kullanılabilir.

CodeQL, verilerin tüm program boyunca nasıl aktığını anlamayı gerektiren güvenlik açıklarını bulur: kullanıcı tarafından kontrol edilen bir değerin, güvenli olmayan bir işleme ulaşmak için birden fazla fonksiyon çağrısından geçmesi gibi. Kod yolu dolaylı olduğunda Semgrep gibi kalıp eşleştirme araçlarının gözden kaçırdığı güvenlik açıklarını yakalayan araçtır.

tatlım

# .github/workflows/codeql.yml
name: CodeQL Analysis
on: [push, pull_request]
jobs:
  analyze:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: github/codeql-action/init@v3
        with:
          languages: javascript-typescript
      - uses: github/codeql-action/autobuild@v3
      - uses: github/codeql-action/analyze@v3

CodeQL'in kurulum maliyeti Semgrep'e göre daha yüksek ve daha yavaş çalışıyor, ancak farklı bir güvenlik açığı sınıfını yakalıyor: hiçbir kalıp tabanlı aracın tam veri akışı analizi olmadan tespit edemeyeceği, fonksiyonlar arası, dosyalar arası bulaşma akışları.

Ölü Kod Tespiti: Kullanılmayan Dışa Aktarımlar ve Erişilemeyen Kodlar

JavaScript ve TypeScript projelerindeki kullanılmayan kodlar özellikle sinsi bir sorundur çünkü modül sistemi kullanılmayan dışa aktarımların birikmesini engellemez. Bir fonksiyon dışa aktarılabilir, asla içe aktarılmayabilir ve özel olarak yapılandırılmadığı sürece hiçbir standart araç bu konuda uyarı vermez.

bıçak Bu iş için şu anda en yetenekli araçtır. Kullanılmayan dışa aktarımları ve kullanılmayan bağımlılıkları bulmak için tüm proje grafiğini analiz eder. package.jsonve erişilemeyen dosyalar:

darbe

npm install --save-dev knip
npx knip

ts-prune, özellikle TypeScript'i hedef alarak, hiçbir zaman içe aktarılmayan dışa aktarılmış sembolleri bulur:

darbe

npm install --save-dev ts-prune
npx ts-prune

ESLint no-unused-vars hem de @typescript-eslint/no-unused-vars Dosyalar içindeki kullanılmayan yerel değişkenleri yakalayabilirler, ancak kullanılmayan modül düzeyindeki dışa aktarımları tespit edemezler. Knip, ESLint'in bıraktığı boşlukları doldurur.

Ölü kod, ön uç uygulamalarındaki paket boyutunu ve kod tabanında çalışan geliştiricilerin bilişsel yükünü doğrudan etkiler. Ölü kodu kaldırmak, mevcut en etkili bakım faaliyetlerinden biridir ve insan inceleyiciler büyük kod tabanlarında modül düzeyindeki kullanımı güvenilir bir şekilde takip edemediğinden, yalnızca araçlar aracılığıyla keşfedilebilir.

Async/Await ve Promise'ler: Statik Analiz Zorluğu

Bu makaleye ilişkin Arama Konsolu verileri, eşzamansız JavaScript için statik analiz araçlarıyla ilgili önemli bir sorgu kümesini göstermektedir: TAJS, jelly static analyzer, SonarJS async rules ve benzerleri. Bu, araç yelpazesinde gerçek bir boşluğu yansıtmaktadır.

Standart kod denetleme araçları, Promise'ler ve asenkron fonksiyonların nasıl etkileşimde bulunduğunu modellemez. Eksik bir nokta bu. awaitEşzamanlı asenkron kodda ele alınmayan bir reddetme veya bir yarış durumu, sözdizimsel olarak geçerli görünür ve tüm lint kurallarını geçer. Bunları tespit etmek, asenkron yürütme semantiğini modelleyen araçlar gerektirir.

Mevcut pratik yaklaşım :

typescript-eslint En kullanışlı asenkron işlemlere özgü kuralları sağlar:

javascript

// Rules that catch common async mistakes
"@typescript-eslint/no-floating-promises": "error",    // await or .catch() required
"@typescript-eslint/await-thenable": "error",          // only await actual Promises
"@typescript-eslint/no-misused-promises": "error",     // Promises in non-async contexts
"@typescript-eslint/require-await": "warn",            // async functions must use await

TAJS (Type Analyzer for JavaScript), Jelly ve SAFE gibi araştırma araçları , Promise zincirleri, async/await ve olay döngüsü semantiği de dahil olmak üzere JavaScript'in eşzamansız yürütme modelini modelleyen akademik statik analiz araçlarıdır. Bunlar üretim geliştirme araçları değil, güvenlik açığı araştırmalarında ve biçimsel analiz çalışmalarında kullanılan araştırma platformlarıdır. Arama Konsolu verilerindeki "jelly static analyzer javascript async support paper" ve "TAJS async await support" sorguları, günlük geliştirme araçları arayan geliştiricileri değil, bu akademik araçları araştıran veya bunlara atıfta bulunan geliştiricileri yansıtmaktadır.

SonarQube'un javascript:S4328 ve ilgili eşzamansız kurallar, üretim kalitesi analizinde bazı yaygın eşzamansız anti-kalıpları tespit eder.

Pratik üretim kullanımı için, TypeScript'in tür denetleyicisinin, typescript-eslintSonarQube'un asenkron işlemleri dikkate alan kuralları ve kalite kapısı, günümüzde standart araçlarda bulunan en kapsamlı asenkron güvenlik kapsamını sağlar.

Snyk Code: Geliştirici Odaklı Güvenlik Taraması

Snyk Code, geliştirici deneyimine odaklanarak SAST taraması sağlar: VS Code ve JetBrains IDE'lerine entegre olur, geliştiriciler kod yazarken bulguları satır içi olarak gösterir ve her bulgunun yanında düzeltme örnekleri sunar. JavaScript ve TypeScript kod tabanlarında kirlilik izleme işlemi gerçekleştiren, tescilli bir makine öğrenimi tabanlı analiz motoru kullanır.

darbe

# Install Snyk CLI
npm install --save-dev snyk

# Authenticate and scan
npx snyk auth
npx snyk code test

Snyk Code, özellikle IDE'den ayrılmadan güvenlik geri bildirimi almak isteyen ekipler için oldukça etkilidir. Düzeltme önerileri, CodeQL'in sorgu odaklı çıktısına kıyasla geliştiriciler için daha kullanıcı dostudur ve bu da onu güvenlik açığı tespitinin yanı sıra güvenlik eğitimi için daha iyi bir seçenek haline getirir.

Katmanlı JavaScript Statik Analiz Yığını Oluşturma

JavaScript statik analizine doğru yaklaşım, tek bir araç seçmek değil, önemli ölçüde örtüşme olmaksızın farklı katmanları kapsayan araçları birleştirmektir:

tabakaaraçÇalıştığında
biçimlendirmeBiyom mu, yoksa daha mı güzel?Ön onay (hızlı)
Hav bırakmaESLint + typescript-eslintÖn taahhüt + Sürekli Entegrasyon (CI)
Tip kontrolütsc --noEmitCI
Güvenlik taramasıSemgrep veya Snyk KoduCI (her PR)
Derinlemesine güvenlik açığı taramasıKodQLCI (planlanmış veya PR)
Ölü kod algılamabıçakCI (haftalık veya aylık)
Kalite kontrol noktaları + trend takibiSonarQubeCI (her PR)
Bağımlılık güvenlik açığı taramasınpm audit + SnykCI (her derlemede)

Sıfırdan başlayan bir ekip için minimum sistem gereksinimleri: ESLint + typescript-eslint + npm auditGüvenlik gereksinimleri arttığında Semgrep veya Snyk Code ekleyin. Ekip kalite trendi görünürlüğüne ve yönetim raporlamasına ihtiyaç duyduğunda SonarQube ekleyin.

tatlım

# .github/workflows/quality.yml
name: JavaScript Code Quality
on: [push, pull_request]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: "20" }
      - run: npm ci
      - run: npx tsc --noEmit
      - run: npx eslint src/ --max-warnings 0

  security:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: "20" }
      - run: npm ci
      - run: npm audit --audit-level=high
      - run: npx semgrep scan --config=p/javascript --error src/

JavaScript Daha Büyük Bir Kurumsal Sistemde Yer Aldığında

Kurumsal ortamlarda JavaScript ve TypeScript servisleri giderek COBOL programları, Java arka uçları, Python veri işlem hatları ve eski ana bilgisayar sistemleriyle birlikte var olmaktadır. Bu bağlamlarda, yukarıda bahsedilen statik analiz araçları JavaScript sınırları içinde kapsamlı bir görünürlük sağlarken, bu sınırları aşan bağlantılara tamamen kördür.

Bir COBOL toplu işi tarafından doldurulmuş bir veritabanından veri okuyan bir Node.js servisi, hiçbir JavaScript analiz aracının göremeyeceği bir şekilde bu COBOL programına bağımlıdır. Bir Java API'sini çağıran ve bu API'nin de bir COBOL programını çağırdığı bir React ön yüzü, üç dil sınırını kapsayan bir bağımlılık zincirine sahiptir ve bunların hiçbiri tek dilli bir aracın bakış açısından görünmez.

SMART TS XL Bu, tüm uygulama portföyünde diller arası bağımlılık analizi sağlayarak bu sorunu ele alır. JavaScript modüllerinin paylaşılan veri yapılarına nasıl bağımlı olduğunu, API sözleşmelerinin ön uç ve arka uç hizmetlerini nasıl birbirine bağladığını ve sistemin bir bölümündeki değişikliklerin diğer dillerdeki bileşenlere nasıl yayıldığını gösteren birleşik bir model oluşturur. Bu, diller arası mimari analiz Bu, kurumsal mimari ekiplerinin birden fazla dil ve platformu kapsayan sistemlerde değişiklikler planlarken ihtiyaç duyduğu bir yetenektir ve bu kılavuzdaki JavaScript'e özgü araçlarla rekabet etmek yerine onları tamamlayan bir özelliktir. Açıklandığı gibi, bağımlılık grafikleri ve uygulama riskiDeğişiklik yapmadan önce bir sistemin tüm bağımlılık yapısını anlamak, güvenli yeniden düzenlemeyi, kimsenin test etmeyi düşünmediği bileşenlerde beklenmedik hatalara yol açan değişikliklerden ayıran şeydir.

Bu daha geniş ortamlarda JavaScript'e özgü analizler için, SMART TS XL'S kurumsal kod zekası Kapsam, COBOL, JCL, Java, Python ve diğer kurumsal dillerin yanı sıra JavaScript ve TypeScript'i de içererek, tek bir platformda birleşik kalite ölçütleri ve bağımlılık görünürlüğü sağlar.

Bağlamınıza Uygun Doğru Aracı Seçmek

JavaScript statik analizinin her boyutunu kapsayan tek bir araç yoktur. Karar, ekip büyüklüğüne, güvenlik gereksinimlerine, mevcut araç zincirine ve JavaScript uygulamasının bağımsız olarak mı yoksa daha büyük, çok dilli bir kurumsal sistemin parçası olarak mı çalıştığına bağlıdır.

Tek başına çalışan bir geliştirici veya yeni bir proje üzerinde çalışan küçük bir ekip için: Biome (linting + biçimlendirme) ve TypeScript katı modu ile başlayın. Ek olarak şunları ekleyin: npm audit Bağımlılık güvenliği için.

Üretim ortamına yönelik bir web uygulaması geliştiren orta ölçekli bir ekip için: ESLint (typescript-eslint ile), Prettier, TypeScript katı modu, güvenlik için CI'da Semgrep ve ölü kod tespiti için Knip.

Uyumluluk ve güvenlik gereksinimleri olan kurumsal bir ekip için: Kalite kontrolleri ve trend takibi için SonarQube, derinlemesine güvenlik açığı taraması için CodeQL, geliştiricilere yönelik güvenlik geri bildirimi için Snyk Code ve SMART TS XL JavaScript uygulaması eski veya çok dilli sistemlerle etkileşim kuruyorsa.

Tek bir depoda performans nedeniyle ESLint alternatiflerini değerlendiren bir ekip için: Hız odaklı bir çözüm olarak OxcLint veya eksiksiz bir linter-formator alternatifi olarak Biome.