feat: html support

Author: remy

.gitignore

@@ -5,3 +5,4 @@ dist/
 !test/fixtures/yarn-workspace/node_modules
 .cache/
 tmp/
+*.vsix

package.json

@@ -3,7 +3,7 @@
   "displayName": "Vulnerability Cost",
   "description": "Display imported vulnerabilities in VS Code",
   "license": "MIT",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.4",
   "publisher": "snyk",
   "scripts": {
     "DISABLED_postinstall": "node ./node_modules/vscode/bin/install",
@@ -24,7 +24,8 @@
     "onLanguage:javascript",
     "onLanguage:javascriptreact",
     "onLanguage:typescript",
-    "onLanguage:typescriptreact"
+    "onLanguage:typescriptreact",
+    "onLanguage:html"
   ],
   "keywords": [
     "import",
@@ -53,17 +54,17 @@
           ],
           "description": "File extensions to be parsed by the JavaScript parser"
         },
-        "vulnCost.javascriptExtensions": {
+        "vulnCost.htmlExtensions": {
           "type": "array",
           "default": [
             "\\.html?$"
           ],
           "description": "File extensions to be parsed by the HTML parser"
         },
-        "vulnCost.showCalculatingDecoration": {
+        "vulnCost.showDecoration": {
           "type": "boolean",
           "default": true,
-          "description": "Display the 'calculating' decoration when starting to check vulnerability"
+          "description": "Display the decoration when starting to check vulnerability"
         },
         "vulnCost.debug": {
           "type": "boolean",

src/decorator.js

@@ -1,6 +1,5 @@
 import { workspace, window, Range, Position, ThemeColor } from 'vscode';
-
-// import logger from './logger';
+import logger from './logger';
 
 const decorations = {};
 
@@ -10,7 +9,7 @@ export function flushDecorations(fileName, packages) {
   packages.forEach(packageInfo => {
     if (packageInfo.vulns === undefined) {
       const configuration = workspace.getConfiguration('vulnCost');
-      if (configuration.showCalculatingDecoration) {
+      if (configuration.showDecoration) {
         decorate('Scanning for vulns...', packageInfo);
       }
     } else {
@@ -26,6 +25,11 @@ export function calculated(packageInfo) {
 }
 
 function getDecorationMessage(packageInfo) {
+  logger.log(
+    `getDecorationMessage - has object? ${!!packageInfo}, has prop? ${!!packageInfo.vulns}, for ${
+      packageInfo.name
+    }`
+  );
   if (!packageInfo.vulns || !packageInfo.vulns.count) {
     return '';
   }

src/extension.js

@@ -3,6 +3,7 @@ import {
   getImports,
   JAVASCRIPT,
   TYPESCRIPT,
+  HTML,
 } from './getImports';
 import * as vscode from 'vscode';
 import { calculated, flushDecorations, clearDecorations } from './decorator';
@@ -29,25 +30,17 @@ export function activate(context) {
       logger.log('🔓 Using anonymous API');
     }
 
-    context.subscriptions.push(
-      vscode.languages.registerCodeActionsProvider(
-        JAVASCRIPT,
-        new SnykVulnInfo(),
-        {
-          providedCodeActionKinds: SnykVulnInfo.providedCodeActionKinds,
-        }
-      )
-    );
-
-    context.subscriptions.push(
-      vscode.languages.registerCodeActionsProvider(
-        TYPESCRIPT,
-        new SnykVulnInfo(),
-        {
-          providedCodeActionKinds: SnykVulnInfo.providedCodeActionKinds,
-        }
-      )
-    );
+    [JAVASCRIPT, TYPESCRIPT, HTML].forEach(language => {
+      context.subscriptions.push(
+        vscode.languages.registerCodeActionsProvider(
+          language,
+          new SnykVulnInfo(),
+          {
+            providedCodeActionKinds: SnykVulnInfo.providedCodeActionKinds,
+          }
+        )
+      );
+    });
 
     const diagnostics = vscode.languages.createDiagnosticCollection(
       'snyk-vulns'
@@ -84,9 +77,7 @@ export function activate(context) {
     );
 
     context.subscriptions.push(
-      commands.registerCommand('vulnCost.showOutput', () => {
-        logger.show();
-      })
+      commands.registerCommand('vulnCost.showOutput', () => logger.show())
     );
 
     context.subscriptions.push(
@@ -116,7 +107,7 @@ export function activate(context) {
               }
             })
             .catch(e => {
-              logger.log(e.message);
+              logger.log(e.stack);
               window.showErrorMessage(e.message);
             });
         });
@@ -155,15 +146,17 @@ async function processActiveFile(document, diagnostics) {
     if (emitters[fileName]) {
       emitters[fileName].removeAllListeners();
     }
-    // const { timeout } = workspace.getConfiguration('vulnCost');
+
     emitters[fileName] = getImports(
       fileName,
       document.getText(),
       language(document)
     );
 
     emitters[fileName].on('package', createPackageWatcher);
-    emitters[fileName].on('error', e => logger.log(`vulnCost error: ${e}`));
+    emitters[fileName].on('error', e =>
+      logger.log(`vulnCost error: ${e.stack}`)
+    );
     emitters[fileName].on('start', packages => {
       flushDecorations(fileName, packages);
     });
@@ -184,19 +177,26 @@ function language({ fileName, languageId }) {
   const javascriptRegex = new RegExp(
     configuration.javascriptExtensions.join('|')
   );
+  const htmlRegex = new RegExp(configuration.htmlExtensions.join('|'));
   if (
     languageId === 'typescript' ||
     languageId === 'typescriptreact' ||
     typescriptRegex.test(fileName)
   ) {
     return TYPESCRIPT;
-  } else if (
+  }
+
+  if (
     languageId === 'javascript' ||
     languageId === 'javascriptreact' ||
     javascriptRegex.test(fileName)
   ) {
     return JAVASCRIPT;
-  } else {
-    return undefined;
   }
+
+  if (languageId === 'html' || htmlRegex.test(fileName)) {
+    return HTML;
+  }
+
+  return undefined;
 }

src/getImports/htmlParser.js

@@ -0,0 +1,101 @@
+// import htmlparser2 from 'htmlparser2';
+const htmlparser2 = require('htmlparser2');
+
+const JQUERY = 'https://code.jquery.com/';
+const MAXCDN = 'https://maxcdn.bootstrapcdn.com/';
+const YANDEX = 'https://yastatic.net/';
+const pathBased = [MAXCDN, YANDEX];
+
+const JSDELIVR = 'https://cdn.jsdelivr.net/npm/';
+const UNPKG = 'https://unpkg.com/';
+const atBased = [JSDELIVR, UNPKG];
+
+// packageFromUrl('https://code.jquery.com/jquery-3.0.0-rc1.js') // ?
+
+function packageFromUrl(url) {
+  let i = url.toLowerCase().indexOf('/ajax/libs/');
+  url = url.replace(/(.slim)?(\.min)?.js$/, '');
+
+  if (i !== -1) {
+    i += '/ajax/libs/'.length;
+    let pkg = url.substring(i); // ?
+    const [name, version = 'latest'] = pkg.split('/'); // ?
+    return `${name}@${version}`;
+  }
+
+  const isPathBased = pathBased.find(_ => url.toLowerCase().startsWith(_));
+
+  if (isPathBased) {
+    let pkg = url.substring(isPathBased.length); // ?
+    const [name, version = 'latest'] = pkg.split('/');
+    return `${name}@${version}`; // ?
+  }
+
+  if (url.toLowerCase().startsWith(JQUERY)) {
+    let pkg = url.substring(JQUERY.length); // ?
+    const [name, ...version] = pkg.split('-');
+    return `${name}@${version.join('-')}`; // ?
+  }
+
+  const isAtBased = atBased.find(_ => url.toLowerCase().startsWith(_));
+
+  if (isAtBased) {
+    let pkg = url
+      .substring(isAtBased.length)
+      .split('/')
+      .shift(); // ?
+    return pkg;
+  }
+  return null;
+}
+
+function indexToLineNumber(index, source) {
+  return source.substring(0, index).split('\n').length;
+}
+
+export function getPackages(fileName, html) {
+  const packages = [];
+  const parser = new htmlparser2.Parser(
+    {
+      onopentag(name, attribs) {
+        if (
+          name === 'script' &&
+          attribs.src &&
+          (attribs.type || 'javascript/text').toLowerCase() ===
+            'javascript/text'
+        ) {
+          const res = packageFromUrl(attribs.src);
+
+          if (res) {
+            const [name, version] = res.split('@');
+            const line = indexToLineNumber(parser.startIndex, html);
+            let startCol = html
+              .substring(parser.startIndex)
+              .indexOf(attribs.src);
+            if (startCol === -1) startCol = 0;
+            packages.push({
+              loc: {
+                start: {
+                  line,
+                  column: startCol,
+                },
+                end: {
+                  line,
+                  column: startCol + attribs.src.length,
+                },
+              },
+              fileName,
+              line,
+              name,
+              version,
+            });
+          }
+        }
+      },
+    },
+    { decodeEntities: true }
+  );
+  parser.write(html);
+  parser.end();
+  return packages;
+}

src/getImports/index.js

@@ -2,7 +2,9 @@ import {
   getPackages,
   TYPESCRIPT as TYPESCRIPT_LANG,
   JAVASCRIPT as JAVASCRIPT_LANG,
+  HTML as HTML_LANG,
 } from './parser';
+import nativePackages from './native';
 import {
   getPackageInfo,
   clearPackageCache as _clearPackageCache,
@@ -13,6 +15,7 @@ import validate from 'validate-npm-package-name';
 
 export const TYPESCRIPT = TYPESCRIPT_LANG;
 export const JAVASCRIPT = JAVASCRIPT_LANG;
+export const HTML = HTML_LANG;
 export const clearPackageCache = _clearPackageCache; // this is weird…
 
 export function getImports(fileName, text, language) {
@@ -25,6 +28,10 @@ export function getImports(fileName, text, language) {
     }
     try {
       const imports = getPackages(fileName, text, language).filter(info => {
+        if (nativePackages.includes(info.name.toLowerCase())) {
+          return false;
+        }
+
         if (info.name.startsWith('.')) {
           return false;
         }
@@ -63,6 +70,7 @@ export function getImports(fileName, text, language) {
       const packages = await Promise.all(promises);
       emitter.emit('done', packages);
     } catch (e) {
+      console.log(e);
       emitter.emit('error', e);
     }
   }, 0);

src/getImports/native.js

@@ -0,0 +1,44 @@
+export default [
+  'assert',
+  'async_hooks',
+  'buffer',
+  'child_process',
+  'cluster',
+  'console',
+  'constants',
+  'crypto',
+  'dgram',
+  'dns',
+  'domain',
+  'events',
+  'fs',
+  'http',
+  'http2',
+  'https',
+  'inspector',
+  'internal',
+  'module',
+  'net',
+  'os',
+  'path',
+  'perf_hooks',
+  'process',
+  'punycode',
+  'querystring',
+  'readline',
+  'repl',
+  'stream',
+  'string_decoder',
+  'sys',
+  'timers',
+  'tls',
+  'trace_events',
+  'tty',
+  'url',
+  'util',
+  'v8',
+  'vm',
+  'wasi',
+  'worker_threads',
+  'zlib',
+];