fix: add noHtml to axe.configure (#2789)

* fix: add noHtml to axe.configure * docs * Update lib/core/utils/dq-element.js Co-authored-by: Wilco Fiers <[email protected]> * Update lib/core/utils/dq-element.js Co-authored-by: Stephen Mathieson <[email protected]> * tests Co-authored-by: Wilco Fiers <[email protected]> Co-authored-by: Stephen Mathieson <[email protected]>
dequelabs · Feb 4, 2021 · 5c8dec8 · 5c8dec8
1 parent aeb044c
commit 5c8dec8
Show file tree

Hide file tree

Showing 9 changed files with 226 additions and 7 deletions.
diff --git a/doc/API.md b/doc/API.md
@@ -189,7 +189,8 @@ axe.configure({
   standards: Object,
   locale: Object,
   axeVersion: String,
-  disableOtherRules: Boolean
+  disableOtherRules: Boolean,
+  noHtml: Boolean
 });
 ```
 
@@ -232,6 +233,7 @@ axe.configure({
   - `disableOtherRules` - Disables all rules not included in the `rules` property.
   - `locale` - A locale object to apply (at runtime) to all rules and checks, in the same shape as `/locales/*.json`.
   - `axeVersion` - Set the compatible version of a custom rule with the current axe version. Compatible versions are all patch and minor updates that are the same as, or newer than those of the `axeVersion` property.
+  - `noHtml` - Disables the HTML output of nodes from rules.
 
 **Returns:** Nothing
 

diff --git a/lib/core/base/audit.js b/lib/core/base/audit.js
@@ -30,6 +30,7 @@ function getDefaultConfiguration(audit) {
   }
 
   config.reporter = config.reporter || null;
+  config.noHtml = config.noHtml || false;
   config.rules = config.rules || [];
   config.checks = config.checks || [];
   config.data = { checks: {}, rules: {}, ...config.data };
@@ -298,6 +299,7 @@ class Audit {
     this.brand = 'axe';
     this.application = 'axeAPI';
     this.tagExclude = ['experimental'];
+    this.noHtml = audit.noHtml;
     unpackToObject(audit.rules, this, 'addRule');
     unpackToObject(audit.checks, this, 'addCheck');
     this.data = {};

diff --git a/lib/core/public/configure.js b/lib/core/public/configure.js
@@ -110,6 +110,10 @@ function configure(spec) {
   if (spec.standards) {
     configureStandards(spec.standards);
   }
+
+  if (spec.noHtml) {
+    audit.noHtml = true;
+  }
 }
 
 export default configure;
diff --git a/lib/core/utils/dq-element.js b/lib/core/utils/dq-element.js
@@ -39,8 +39,14 @@ function DqElement(element, options, spec) {
    * The generated HTML source code of the element
    * @type {String}
    */
-  this.source =
-    this.spec.source !== undefined ? this.spec.source : getSource(element);
+  // TODO: es-modules_audit
+  if (axe._audit.noHtml) {
+    this.source = null;
+  } else if (this.spec.source !== undefined) {
+    this.source = this.spec.source;
+  } else {
+    this.source = getSource(element);
+  }
 
   /**
    * The element which this object is based off or the containing frame, used for sorting.

diff --git a/test/core/base/audit.js b/test/core/base/audit.js
@@ -95,6 +95,13 @@ describe('Audit', function() {
     assert.isFunction(Audit);
   });
 
+  describe('defaults', function() {
+    it('should set noHtml', function() {
+      var audit = new Audit();
+      assert.isFalse(audit.noHtml);
+    });
+  });
+
   describe('Audit#_constructHelpUrls', function() {
     it('should create default help URLS', function() {
       var audit = new Audit();
@@ -423,6 +430,13 @@ describe('Audit', function() {
       axe._audit.resetRulesAndChecks();
       assert.deepEqual(axe._audit.tagExclude, ['experimental']);
     });
+
+    it('should reset noHtml', function() {
+      var audit = new Audit();
+      audit.noHtml = true;
+      audit.resetRulesAndChecks();
+      assert.isFalse(audit.noHtml);
+    });
   });
 
   describe('Audit#addCheck', function() {

diff --git a/test/core/public/configure.js b/test/core/public/configure.js
@@ -292,6 +292,14 @@ describe('axe.configure', function() {
     assert.equal(axe._audit.rules[3].enabled, true);
   });
 
+  it("should allow overriding an audit's noHtml", function() {
+    axe._load({});
+    assert.isFalse(axe._audit.noHtml);
+
+    axe.configure({ noHtml: true });
+    assert.isTrue(axe._audit.noHtml);
+  });
+
   describe('given a locale object', function() {
     beforeEach(function() {
       axe._load({});

diff --git a/test/core/utils/dq-element.js b/test/core/utils/dq-element.js
@@ -6,9 +6,7 @@ describe('DqElement', function() {
   var fixtureSetup = axe.testUtils.fixtureSetup;
 
   afterEach(function() {
-    fixture.innerHTML = '';
-    axe._tree = undefined;
-    axe._selectorData = undefined;
+    axe.reset();
   });
 
   it('should be a function', function() {
@@ -87,6 +85,26 @@ describe('DqElement', function() {
       );
       assert.equal(result.source, 'woot');
     });
+
+    it('should return null if audit.noHtml is set', function() {
+      axe.configure({ noHtml: true });
+      fixture.innerHTML = '<div class="bar" id="foo">Hello!</div>';
+      var result = new DqElement(fixture.firstChild);
+      assert.isNull(result.source);
+    });
+
+    it('should not use spec object over passed element if audit.noHtml is set', function() {
+      axe.configure({ noHtml: true });
+      fixture.innerHTML = '<div id="foo" class="bar">Hello!</div>';
+      var result = new DqElement(
+        fixture.firstChild,
+        {},
+        {
+          source: 'woot'
+        }
+      );
+      assert.isNull(result.source);
+    });
   });
 
   describe('selector', function() {

diff --git a/test/integration/full/configure-options/configure-options.js b/test/integration/full/configure-options/configure-options.js
@@ -1,12 +1,14 @@
 describe('Configure Options', function() {
   'use strict';
 
+  var target = document.querySelector('#target');
+
   afterEach(function() {
     axe.reset();
+    target.innerHTML = '';
   });
 
   describe('Check', function() {
-    var target = document.querySelector('#target');
     describe('aria-allowed-attr', function() {
       it('should allow an attribute supplied in options', function(done) {
         target.setAttribute('role', 'separator');
@@ -157,4 +159,115 @@ describe('Configure Options', function() {
       });
     });
   });
+
+  describe('noHtml', function() {
+    it('prevents html property on nodes', function(done) {
+      target.setAttribute('role', 'slider');
+      axe.configure({
+        noHtml: true,
+        checks: [
+          {
+            id: 'aria-required-attr',
+            options: { slider: ['aria-snuggles'] }
+          }
+        ]
+      });
+      axe.run(
+        '#target',
+        {
+          runOnly: {
+            type: 'rule',
+            values: ['aria-required-attr']
+          }
+        },
+        function(error, results) {
+          try {
+            assert.isNull(results.violations[0].nodes[0].html);
+            done();
+          } catch (e) {
+            done(e);
+          }
+        }
+      );
+    });
+
+    it('prevents html property on nodes from iframes', function(done) {
+      axe.configure({
+        noHtml: true,
+        rules: [
+          {
+            id: 'div#target',
+            // purposefully don't match so the first result is from
+            // the iframe
+            selector: 'foo'
+          }
+        ]
+      });
+
+      var iframe = document.createElement('iframe');
+      iframe.src = '/test/mock/frames/context.html';
+      iframe.onload = function() {
+        axe.run(
+          '#target',
+          {
+            runOnly: {
+              type: 'rule',
+              values: ['div#target']
+            }
+          },
+          function(error, results) {
+            try {
+              assert.deepEqual(results.passes[0].nodes[0].target, [
+                'iframe',
+                '#target'
+              ]);
+              assert.isNull(results.passes[0].nodes[0].html);
+              done();
+            } catch (e) {
+              done(e);
+            }
+          }
+        );
+      };
+      target.appendChild(iframe);
+    });
+
+    it('prevents html property in postMesage', function(done) {
+      axe.configure({
+        noHtml: true,
+        rules: [
+          {
+            id: 'div#target',
+            // purposefully don't match so the first result is from
+            // the iframe
+            selector: 'foo'
+          }
+        ]
+      });
+
+      var iframe = document.createElement('iframe');
+      iframe.src = '/test/mock/frames/noHtml-config.html';
+      iframe.onload = function() {
+        axe.run('#target', {
+          runOnly: {
+            type: 'rule',
+            values: ['div#target']
+          }
+        });
+      };
+      target.appendChild(iframe);
+
+      window.addEventListener('message', function(e) {
+        var data = JSON.parse(e.data);
+        if (Array.isArray(data.message)) {
+          try {
+            assert.isNull(data.message[0].nodes[0].node.source);
+            done();
+          } catch (e) {
+            done(e);
+          }
+        }
+      });
+    });
+  });
 });
diff --git a/test/mock/frames/noHtml-config.html b/test/mock/frames/noHtml-config.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <title>Context Fixture</title>
+  </head>
+  <body>
+    <div id="foo">
+      <div id="bar"></div>
+    </div>
+    <div id="target"></div>
+    <script src="/axe.js"></script>
+    <script>
+      axe._load({
+        rules: [
+          {
+            id: 'div#target',
+            selector: '#target',
+            any: ['has-target']
+          },
+          {
+            id: 'first-div',
+            selector: 'div',
+            any: ['first-div']
+          }
+        ],
+        checks: [
+          {
+            id: 'has-target',
+            evaluate: function() {
+              return true;
+            }
+          },
+          {
+            id: 'first-div',
+            evaluate: function(node) {
+              this.relatedNodes([node]);
+              return false;
+            },
+            after: function(results) {
+              if (results.length) {
+                results[0].result = true;
+              }
+              return [results[0]];
+            }
+          }
+        ],
+        messages: {}
+      });
+      axe.configure({ noHtml: true });
+    </script>
+  </body>
+</html>