failed attempts to poison .href setting and using eslint no-restricted-properties

Author: paulirish

.eslintrc.js

@@ -29,6 +29,12 @@ module.exports = {
         'CallExpression > ArrowFunctionExpression > :expression.body',
       ],
     }],
+
+    'no-restricted-properties': [2, {
+      'property': 'href',
+      'message': 'Please use allowedObjectName.allowedPropertyName.',
+    }],
+
     'no-floating-decimal': 2,
     'max-len': [2, 100, {
       ignoreComments: true,

lighthouse-viewer/test/test-helpers.js

@@ -19,6 +19,19 @@ function setupJsDomGlobals() {
   global.window = window;
   global.logger = console;
   global.logger.hide = () => {/* noop */};
+
+  const anchorElem = document.createElement('a');
+  const propDesc = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(anchorElem), 'href');
+  Object.defineProperty(window.HTMLAnchorElement, 'href', {
+    enumerable: propDesc.enumerable,
+    configurable: propDesc.configurable,
+    get: propDesc.get,
+    set: _ => {
+      const stack = new Error().stack;
+      console.log({stack});
+      throw new Error('Setting .href directly is verboten!');
+    },
+  });
 }
 
 function cleanupJsDomGlobals() {

report/test/renderer/details-renderer-test.js

@@ -19,10 +19,39 @@ describe('DetailsRenderer', () => {
   let renderer;
 
   function createRenderer(options) {
-    const {document} = new jsdom.JSDOM(reportAssets.REPORT_TEMPLATES).window;
-    const dom = new DOM(document);
+    const {window} = new jsdom.JSDOM(reportAssets.REPORT_TEMPLATES);
+    const dom = new DOM(window.document);
     renderer = new DetailsRenderer(dom, options);
     renderer.setTemplateContext(dom.document());
+    global.window = window;
+
+    // hack to avoid setting .href directly.
+    const anchorElem = window.document.createElement('a');
+    const propDesc = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(anchorElem), 'href');
+    Object.defineProperty(Object.getPrototypeOf(anchorElem), 'href', {
+      enumerable: propDesc.enumerable,
+      configurable: propDesc.configurable,
+      get: propDesc.get,
+      set: value => {
+        const err = new Error();
+
+        // Was .href set from safelySetHref ?
+        let isFound = false;
+        const prevPrepare = Error.prepareStackTrace;
+        Error.prepareStackTrace = (error, stack) => {
+          isFound = stack.some(callsite => callsite.getFunctionName().includes('safelySetHref'));
+        };
+        const _ = err.stack; // Triggers call to prepareStackTrace
+        Error.prepareStackTrace = prevPrepare;
+
+
+        if (isFound) {
+          propDesc.set.call(propDesc, value);
+        } else {
+          throw new Error('Setting .href directly is verboten!');
+        }
+      },
+    });
   }
 
   beforeAll(() => {
@@ -313,7 +342,7 @@ describe('DetailsRenderer', () => {
       assert.strictEqual(thumbnailEl.alt, '');
     });
 
-    it('renders link values', () => {
+    it.only('renders link values', () => {
       const linkText = 'Example Site';
       const linkUrl = 'https://example.com/';
       const link = {
@@ -355,7 +384,7 @@ describe('DetailsRenderer', () => {
       assert.equal(linkEl.textContent, linkText);
     });
 
-    it('renders link value as text if URL is invalid', () => {
+    it.only('renders link value as text if URL is invalid', () => {
       const linkText = 'Invalid Link';
       const linkUrl = 'link nonsense';
       const link = {
@@ -368,9 +397,9 @@ describe('DetailsRenderer', () => {
         headings: [{key: 'content', itemType: 'link', text: 'Heading'}],
         items: [{content: link}],
       };
-
       const el = renderer.render(details);
       const linkEl = el.querySelector('td.lh-table-column--link > .lh-text');
+
       assert.equal(linkEl.localName, 'div');
       assert.equal(linkEl.textContent, linkText);
     });