Adding runtime element filtering (#283)

* Adding runtime element filtering

Author: jonathanKingston

integration-test/test-runtime-checks.js

@@ -199,4 +199,100 @@ describe('Runtime checks: should allow element modification', () => {
             type: 'application/javascript'
         })
     })
+
+    it('Script that should filter props', async () => {
+        const port = server.address().port
+        const page = await browser.newPage()
+        await gotoAndWait(page, `http://localhost:${port}/blank.html`, {
+            site: {
+                enabledFeatures: ['runtimeChecks']
+            },
+            featureSettings: {
+                runtimeChecks: {
+                    taintCheck: 'enabled',
+                    matchAllDomains: 'enabled',
+                    matchAllStackDomains: 'enabled',
+                    overloadInstanceOf: 'enabled',
+                    tagModifiers: {
+                        script: {
+                            filters: {
+                                property: ['madeUpProp1', 'madeUpProp3'],
+                                attribute: ['madeupattr1', 'madeupattr3']
+                            }
+                        }
+                    }
+                }
+            }
+        })
+        // And now with a script that will execute
+        const scriptResult4 = await page.evaluate(
+            () => {
+                function getAttributeValues (el) {
+                    const attributes = {}
+                    for (const attribute of el.getAttributeNames()) {
+                        attributes[attribute] = el.getAttribute(attribute)
+                    }
+                    return attributes
+                }
+                function getProps (el) {
+                    const props = {}
+                    for (const prop of Object.keys(el)) {
+                        props[prop] = el[prop]
+                    }
+                    return props
+                }
+                // @ts-expect-error https://app.asana.com/0/1201614831475344/1203979574128023/f
+                window.scripty4Ran = false
+                const scriptElement = document.createElement('script')
+                scriptElement.innerText = 'window.scripty4Ran = true'
+                scriptElement.id = 'scripty4'
+                scriptElement.setAttribute('type', 'application/javascript')
+                // @ts-expect-error made up prop is unknown to TS
+                scriptElement.madeUpProp1 = 'val'
+                // @ts-expect-error made up prop is unknown to TS
+                scriptElement.madeUpProp2 = 'val'
+                scriptElement.setAttribute('madeUpAttr1', '1')
+                scriptElement.setAttribute('madeUpAttr2', '2')
+                document.body.appendChild(scriptElement)
+                const hadInspectorNode = !!document.querySelector('ddg-runtime-checks')
+                // Continue to modify the script element after it has been added to the DOM
+                // @ts-expect-error made up prop is unknown to TS
+                scriptElement.madeUpProp1 = 'val'
+                // @ts-expect-error made up prop is unknown to TS
+                scriptElement.madeUpProp2 = 'val'
+                scriptElement.setAttribute('madeUpAttr3', '3')
+                scriptElement.setAttribute('madeUpAttr4', '4')
+                const instanceofResult = scriptElement instanceof HTMLScriptElement
+                const scripty = document.querySelector('script#scripty4')
+                const nodeAndFakeNodeMatch = scripty === scriptElement
+
+                return {
+                    // @ts-expect-error https://app.asana.com/0/1201614831475344/1203979574128023/f
+                    scripty4: window.scripty4Ran,
+                    hadInspectorNode,
+                    instanceofResult,
+                    attributes: getAttributeValues(scripty),
+                    props: getProps(scripty),
+                    nodeAndFakeNodeMatch
+                }
+            }
+        )
+        expect(scriptResult4).toEqual({
+            scripty4: true,
+            hadInspectorNode: true,
+            instanceofResult: true,
+            attributes: {
+                id: 'scripty4',
+                type: 'application/javascript',
+                // madeupattr1: undefined,
+                madeupattr2: '2',
+                // madeupattr3: undefined,
+                madeupattr4: '4'
+            },
+            props: {
+                madeUpProp2: 'val'
+            },
+            nodeAndFakeNodeMatch: false
+        })
+    })
 })

src/features/runtime-checks.js

@@ -4,6 +4,20 @@ let stackDomains = []
 let matchAllStackDomains = false
 let taintCheck = false
 let initialCreateElement
+let tagModifiers = {}
+
+/**
+ * @param {string} tagName
+ * @param {'property' | 'attribute' | 'handler' | 'listener'} filterName
+ * @param {string} key
+ * @returns {boolean}
+ */
+function shouldFilterKey (tagName, filterName, key) {
+    if (filterName === 'attribute') {
+        key = key.toLowerCase()
+    }
+    return tagModifiers?.[tagName]?.filters?.[filterName]?.includes(key)
+}
 
 let elementRemovalTimeout
 const featureName = 'runtimeChecks'
@@ -37,12 +51,15 @@ class DDGRuntimeChecks extends HTMLElement {
     monitorProperties (el) {
         // Mutation oberver and observedAttributes don't work on property accessors
         // So instead we need to monitor all properties on the prototypes and forward them to the real element
-        const propertyNames = []
+        let propertyNames = []
         let proto = Object.getPrototypeOf(el)
         while (proto && proto !== Object.prototype) {
             propertyNames.push(...Object.getOwnPropertyNames(proto))
             proto = Object.getPrototypeOf(proto)
         }
+        const classMethods = Object.getOwnPropertyNames(Object.getPrototypeOf(this))
+        // Filter away the methods we don't want to monitor from our own class
+        propertyNames = propertyNames.filter(prop => !classMethods.includes(prop))
         propertyNames.forEach(prop => {
             if (prop === 'constructor') return
             // May throw, but this is best effort monitoring.
@@ -52,6 +69,7 @@ class DDGRuntimeChecks extends HTMLElement {
                         return el[prop]
                     },
                     set (value) {
+                        if (shouldFilterKey(this.#tagName, 'property', prop)) return
                         el[prop] = value
                     }
                 })
@@ -74,23 +92,27 @@ class DDGRuntimeChecks extends HTMLElement {
 
         // Reflect all attrs to the new element
         for (const attribute of this.getAttributeNames()) {
+            if (shouldFilterKey(this.#tagName, 'attribute', attribute)) continue
             el.setAttribute(attribute, this.getAttribute(attribute))
         }
 
         // Reflect all props to the new element
         for (const param of Object.keys(this)) {
+            if (shouldFilterKey(this.#tagName, 'property', param)) continue
             el[param] = this[param]
         }
 
         // Reflect all listeners to the new element
         for (const [...args] of this.#listeners) {
+            if (shouldFilterKey(this.#tagName, 'listener', args[0])) continue
             el.addEventListener(...args)
         }
         this.#listeners = []
 
         // Reflect all 'on' event handlers to the new element
         for (const propName in this) {
             if (propName.startsWith('on')) {
+                if (shouldFilterKey(this.#tagName, 'handler', propName)) continue
                 const prop = this[propName]
                 if (typeof prop === 'function') {
                     el[propName] = prop
@@ -123,6 +145,7 @@ class DDGRuntimeChecks extends HTMLElement {
     }
 
     setAttribute (name, value) {
+        if (shouldFilterKey(this.#tagName, 'attribute', name)) return
         const el = this.getElement()
         if (el) {
             return el.setAttribute(name, value)
@@ -131,6 +154,7 @@ class DDGRuntimeChecks extends HTMLElement {
     }
 
     removeAttribute (name) {
+        if (shouldFilterKey(this.#tagName, 'attribute', name)) return
         const el = this.getElement()
         if (el) {
             return el.removeAttribute(name)
@@ -139,6 +163,7 @@ class DDGRuntimeChecks extends HTMLElement {
     }
 
     addEventListener (...args) {
+        if (shouldFilterKey(this.#tagName, 'listener', args[0])) return
         const el = this.getElement()
         if (el) {
             return el.addEventListener(...args)
@@ -147,6 +172,7 @@ class DDGRuntimeChecks extends HTMLElement {
     }
 
     removeEventListener (...args) {
+        if (shouldFilterKey(this.#tagName, 'listener', args[0])) return
         const el = this.getElement()
         if (el) {
             return el.removeEventListener(...args)
@@ -272,6 +298,7 @@ export function init (args) {
     matchAllStackDomains = getFeatureSettingEnabled(featureName, args, 'matchAllStackDomains')
     stackDomains = getFeatureSetting(featureName, args, 'stackDomains') || []
     elementRemovalTimeout = getFeatureSetting(featureName, args, 'elementRemovalTimeout') || 1000
+    tagModifiers = getFeatureSetting(featureName, args, 'tagModifiers') || {}
 
     overrideCreateElement()
 

src/features/windows-permission-usage.js

@@ -87,6 +87,7 @@ export function init () {
     const videoTracks = new Set()
     const audioTracks = new Set()
 
+    // @ts-expect-error https://app.asana.com/0/1201614831475344/1203979574128023/f
     function getTracks (permission) {
         switch (permission) {
         case Permission.Camera:

tsconfig.json

@@ -5,7 +5,8 @@
     "alwaysStrict": true,
     "allowJs": true,
     "checkJs": true,
-    "noEmit": true
+    "noEmit": true,
+    "noImplicitReturns": true
   },
   "include": [
     "src",