search

mozilla / blurts-server

Mozilla Monitor arms you with tools to keep your personal information safe. Find out what hackers already know about you and learn how to stay a step ahead of them.
https://monitor.mozilla.org
Mozilla Public License 2.0
725 stars 204 forks source link

htmllint results #2455

Closed pdehaan closed 7 months ago

pdehaan commented 2 years ago

I was working on an HTMLLint linter for remote HTML pages and found a few issues w/ Monitor. All 3 violations on the homepage seem to be around the VPN header. They may or may not be bugs, and we could tweak the htmllint rules accordingly, but thought it was better to err on the side of caution and call it out.

{
  "href": "https://monitor.firefox.com/",
  "date": "2022-01-13T19:56:23.833Z",
  "__version__": {
    "commit": "c7529c23d630b669a1a7c80fbeda5c0a28670c48",
    "version": "v14.2.6",
    "source": "https://github.com/mozilla/blurts-server",
    "build": "https://circleci.com/gh/mozilla/blurts-server/24605"
  },
  "htmllint": [
    {
      "line": 26,
      "column": 7,
      "code": "E020",
      "data": {},
      "rule": "label-req-for"
    },
    {
      "line": 30,
      "column": 7,
      "code": "E020",
      "data": {},
      "rule": "label-req-for"
    },
    {
      "line": 48,
      "column": 13,
      "code": "E058",
      "data": {},
      "rule": "link-req-noopener"
    }
  ]
}

INPUT

26:    <label>
27:      <span class="protected-txt"><em>Protected</em> with Mozilla VPN.</span>
28:      <span class="protected-txt"><em>Protect yourself</em> with Mozilla VPN.</span>
29:    </label>
30:    <label class="vpn-banner-chevron" data-expand="Expand" data-close="Close"></label>
...
48:    <li><a class="vpn-banner-cta" href="https://vpn.mozilla.org/?utm_source=firefox-monitor&amp;utm_medium=banner&amp;utm_campaign=ip" target="_blank">Get Mozilla VPN</a>

RULES

https://github.com/htmllint/htmllint/wiki/Options#label-req-for:

If set, each label tag must have a for attribute. This practice helps screen readers, and improves form element selection by allowing the user to focus an input by clicking on the label.

https://github.com/htmllint/htmllint/wiki/Options#link-req-noopener:

If set, each a tag with target="_blank" must have a rel="noopener" or rel="noreferrer" attribute.

pdehaan commented 2 years ago

The /breaches/ page seems to have similar results:

{
  "href": "https://monitor.firefox.com/breaches/",
  "date": "2022-01-13T19:56:24.653Z",
  "__version__": {
    "commit": "c7529c23d630b669a1a7c80fbeda5c0a28670c48",
    "version": "v14.2.6",
    "source": "https://github.com/mozilla/blurts-server",
    "build": "https://circleci.com/gh/mozilla/blurts-server/24605"
  },
  "htmllint": [
    {
      "line": 27,
      "column": 7,
      "code": "E020",
      "data": {},
      "rule": "label-req-for"
    },
    {
      "line": 31,
      "column": 7,
      "code": "E020",
      "data": {},
      "rule": "label-req-for"
    },
    {
      "line": 49,
      "column": 13,
      "code": "E058",
      "data": {},
      "rule": "link-req-noopener"
    }
  ]
}
pdehaan commented 2 years ago

The /breach-details/{{ breach.Name }}/ page seems to have one additional error (another target="_blank" without rel="noopener noreferrer"):

{
  "href": "https://monitor.firefox.com/breach-details/linkedin/",
  "date": "2022-01-13T19:56:25.266Z",
  "__version__": {
    "commit": "c7529c23d630b669a1a7c80fbeda5c0a28670c48",
    "version": "v14.2.6",
    "source": "https://github.com/mozilla/blurts-server",
    "build": "https://circleci.com/gh/mozilla/blurts-server/24605"
  },
  "htmllint": [
    {
      "line": 26,
      "column": 7,
      "code": "E020",
      "data": {},
      "rule": "label-req-for"
    },
    {
      "line": 30,
      "column": 7,
      "code": "E020",
      "data": {},
      "rule": "label-req-for"
    },
    {
      "line": 48,
      "column": 13,
      "code": "E058",
      "data": {},
      "rule": "link-req-noopener"
    },
    {
      "line": 209,
      "column": 9,
      "code": "E058",
      "data": {},
      "rule": "link-req-noopener"
    }
  ]
}

HTML

209:    <a class="product-promo-wrapper  open-oauth" href="https://monitor.firefox.com/oauth/init?utm_source=fx-monitor&amp;utm_medium=referral&amp;utm_campaign=promo-banner&amp;utm_content=desktop" data-event-category="Product Promotions" data-analytics-label="promo-monitor" data-entrypoint="fx-monitor-promo" data-flow-id="" data-flow-begin-time="" target="_blank">
pdehaan commented 2 years ago

The /about/ page has another target="_blank" error:

{
  "href": "https://monitor.firefox.com/about/",
  "date": "2022-01-13T19:56:26.469Z",
  "__version__": {
    "commit": "c7529c23d630b669a1a7c80fbeda5c0a28670c48",
    "version": "v14.2.6",
    "source": "https://github.com/mozilla/blurts-server",
    "build": "https://circleci.com/gh/mozilla/blurts-server/24605"
  },
  "htmllint": [
    {
      "line": 26,
      "column": 7,
      "code": "E020",
      "data": {},
      "rule": "label-req-for"
    },
    {
      "line": 30,
      "column": 7,
      "code": "E020",
      "data": {},
      "rule": "label-req-for"
    },
    {
      "line": 48,
      "column": 13,
      "code": "E058",
      "data": {},
      "rule": "link-req-noopener"
    },
    {
      "line": 151,
      "column": 23,
      "code": "E058",
      "data": {},
      "rule": "link-req-noopener"
    }
  ]
}
151:    <a class="btn-violet-secondary btn-transparent btn-small about-cta send-ga-ping" data-event-category="About Page: Download Firefox" data-event-label="About Page" data-event-action="Click" target="_blank" href="https://www.mozilla.org/firefox">Download Firefox</a>
pdehaan commented 2 years ago

Finally the /security-tips/ page has a few [potential] issues:

{
  "href": "https://monitor.firefox.com/security-tips/",
  "date": "2022-01-13T19:56:25.946Z",
  "__version__": {
    "commit": "c7529c23d630b669a1a7c80fbeda5c0a28670c48",
    "version": "v14.2.6",
    "source": "https://github.com/mozilla/blurts-server",
    "build": "https://circleci.com/gh/mozilla/blurts-server/24605"
  },
  "htmllint": [
    {
      "line": 26,
      "column": 7,
      "code": "E020",
      "data": {},
      "rule": "label-req-for"
    },
    {
      "line": 30,
      "column": 7,
      "code": "E020",
      "data": {},
      "rule": "label-req-for"
    },
    {
      "line": 48,
      "column": 13,
      "code": "E058",
      "data": {},
      "rule": "link-req-noopener"
    },
    {
      "line": 344,
      "column": 48,
      "code": "E041",
      "data": {
        "classes": "al-cntr"
      },
      "rule": "class-no-dup"
    },
    {
      "line": 580,
      "column": 128,
      "code": "E058",
      "data": {},
      "rule": "link-req-noopener"
    },
    {
      "line": 601,
      "column": 92,
      "code": "E058",
      "data": {},
      "rule": "link-req-noopener"
    },
    {
      "line": 611,
      "column": 48,
      "code": "E041",
      "data": {
        "classes": "al-cntr"
      },
      "rule": "class-no-dup"
    },
    {
      "line": 662,
      "column": 48,
      "code": "E041",
      "data": {
        "classes": "al-cntr"
      },
      "rule": "class-no-dup"
    },
    {
      "line": 685,
      "column": 48,
      "code": "E041",
      "data": {
        "classes": "al-cntr"
      },
      "rule": "class-no-dup"
    },
    {
      "line": 708,
      "column": 48,
      "code": "E041",
      "data": {
        "classes": "al-cntr"
      },
      "rule": "class-no-dup"
    }
  ]
}

HTML

344:    <p class="flx flx-row al-cntr al-cntr st-headline"><span class="bold">SECURITY TIP</span> Steer clear of the 100 most-used passwords.</p>
...
580:    <p class="article-paragraph">Instead, we recommend using a Virtual Private Network (like <a target="_blank" href="https://vpn.mozilla.org/?utm_source=monitor.firefox.com&amp;utm_medium=referral&amp;utm_campaign=monitor-security-tips">Mozilla VPN</a>), which lets you use public Wi-Fi more securely and keeps your online behavior private. A VPN routes your connection through a secure server that encrypts your data before you land on a web page. </p>
...
601:    <li class="article-list-item">Use a VPN (like&nbsp;<a target="_blank" href="https://vpn.mozilla.org/?utm_source=monitor.firefox.com&amp;utm_medium=referral&amp;utm_campaign=monitor-security-tips">Mozilla VPN</a>) when using public Wi-Fi</li>
...
611:    <p class="flx flx-row al-cntr al-cntr st-headline"><span class="bold">SECURITY TIP</span> Turn on automatic updates.</p>
...
662:    <p class="flx flx-row al-cntr al-cntr st-headline"><span class="bold">SECURITY TIP</span> How to create strong passwords</p>
....
685:    <p class="flx flx-row al-cntr al-cntr st-headline"><span class="bold">SECURITY TIP</span></p>
....
708:    <p class="flx flx-row al-cntr al-cntr st-headline"><span class="bold">SECURITY TIP</span></p>

RULES

https://github.com/htmllint/htmllint/wiki/Options#class-no-dup:

If set, the same class name cannot be repeated within a class attribute.

We can see the SECURITY TIP duplicates the al-cntr class which causes 5 errors.

The other two errors are missing rel="noopener noreferrer" attributes on a couple external https://vpn.mozilla.org links.

pdehaan commented 2 years ago

I still need to find an easy way to scrape the authed Data Removal pages using my LDAP account or something.

EMMLynch commented 7 months ago

Closing since we've redesigned the site and functionality since this was created. If you feel that this is still needed, please let me know.