Merge pull request #332 from ezzak/css_defense

Capture dubious CSS

Author: ezzak

src/js/content/scanForCSS.ts

@@ -0,0 +1,119 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {STATES} from '../config';
+import {updateCurrentState} from './updateCurrentState';
+
+const CHECKED_STYLESHEET_HREFS = new Set<string>();
+const CHECKED_STYLESHEET_HASHES = new Set<string>();
+
+export default function scanForCSS(): void {
+  checkForStylesheetChanges();
+
+  setInterval(checkForStylesheetChanges, 1000);
+}
+
+async function checkForStylesheetChanges() {
+  [...document.styleSheets].forEach(async sheet => {
+    const isValid = await checkIsStylesheetValid(sheet);
+    updateStateOnInvalidStylesheet(isValid, sheet);
+  });
+}
+
+async function checkIsStylesheetValid(
+  styleSheet: CSSStyleSheet,
+): Promise<boolean> {
+  const potentialOwnerNode = styleSheet.ownerNode;
+  if (
+    // CSS external resource
+    styleSheet.href &&
+    potentialOwnerNode instanceof Element &&
+    potentialOwnerNode.tagName === 'LINK'
+  ) {
+    if (CHECKED_STYLESHEET_HREFS.has(styleSheet.href)) {
+      return true;
+    }
+    CHECKED_STYLESHEET_HREFS.add(styleSheet.href);
+    ensureCORSEnabledForStylesheet(styleSheet);
+  } else if (
+    // Inline css
+    potentialOwnerNode instanceof Element &&
+    potentialOwnerNode.tagName === 'STYLE'
+  ) {
+    const hashedContent = await hashString(
+      potentialOwnerNode.textContent ?? '',
+    );
+    if (CHECKED_STYLESHEET_HASHES.has(hashedContent)) {
+      return true;
+    }
+    CHECKED_STYLESHEET_HASHES.add(hashedContent);
+  }
+  return [...styleSheet.cssRules].every(isValidCSSRule);
+}
+
+function isValidCSSRule(rule: CSSRule): boolean {
+  if (
+    rule instanceof CSSKeyframeRule &&
+    rule.style.getPropertyValue('font-family') !== ''
+  ) {
+    // Attempting to animate fonts
+    return false;
+  }
+
+  if (
+    !(
+      rule instanceof CSSGroupingRule ||
+      rule instanceof CSSKeyframesRule ||
+      rule instanceof CSSImportRule
+    )
+  ) {
+    return true;
+  }
+
+  let rulesToCheck: Array<CSSRule> = [];
+
+  if (rule instanceof CSSImportRule) {
+    const styleSheet = rule.styleSheet;
+    if (styleSheet != null) {
+      ensureCORSEnabledForStylesheet(styleSheet);
+      rulesToCheck = [...styleSheet.cssRules];
+    }
+  } else {
+    rulesToCheck = [...rule.cssRules];
+  }
+
+  return rulesToCheck.every(isValidCSSRule);
+}
+
+function ensureCORSEnabledForStylesheet(styleSheet: CSSStyleSheet): void {
+  try {
+    // Ensure all non same origin stylesheets can be accessed (CORS)
+    styleSheet.cssRules;
+  } catch (e) {
+    updateStateOnInvalidStylesheet(false, styleSheet);
+  }
+}
+
+async function hashString(content: string): Promise<string> {
+  const text = new TextEncoder().encode(content);
+  const hashBuffer = await crypto.subtle.digest('SHA-256', text);
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  return hashArray.map(byte => byte.toString(16).padStart(2, '0')).join('');
+}
+
+function updateStateOnInvalidStylesheet(
+  isValid: boolean,
+  sheet: CSSStyleSheet,
+): void {
+  if (!isValid) {
+    const potentialHref = sheet.href ?? '';
+    updateCurrentState(
+      STATES.INVALID,
+      `Violating CSS stylesheet ${potentialHref}`,
+    );
+  }
+}

src/js/contentUtils.ts

@@ -36,6 +36,7 @@ import {checkWorkerEndpointCSP} from './content/checkWorkerEndpointCSP';
 import {MessagePayload} from './shared/MessageTypes';
 import {pushToOrCreateArrayInMap} from './shared/nestedDataHelpers';
 import ensureManifestWasOrWillBeLoaded from './content/ensureManifestWasOrWillBeLoaded';
+import scanForCSS from './content/scanForCSS';
 
 type ContentScriptConfig = {
   checkLoggedInFromCookie: boolean;
@@ -544,6 +545,7 @@ export function startFor(origin: Origin, config: ContentScriptConfig): void {
   if (isUserLoggedIn) {
     updateCurrentState(STATES.PROCESSING);
     scanForScripts();
+    scanForCSS();
     // set the timeout once, in case there's an iframe and contentUtils sets another manifest timer
     if (manifestTimeoutID === '') {
       manifestTimeoutID = window.setTimeout(() => {