Gets DNS servers, and checks for DoH/DoT compatibility

src/components/Results/DnsServer.tsx

@@ -0,0 +1,38 @@
+
+import { Card } from 'components/Form/Card';
+import Heading from 'components/Form/Heading';
+import Row, { ExpandableRow, RowProps } from 'components/Form/Row';
+import colors from 'styles/colors';
+
+const cardStyles = `
+  small {
+    margin-top: 1rem;
+    opacity: 0.5;
+    display: block;
+    a { color: ${colors.primary}; }
+  }
+`;
+
+const DnsServerCard = (props: {data: any, title: string, actionButtons: any }): JSX.Element => {
+  const dnsSecurity = props.data;
+  console.log(dnsSecurity);
+  return (
+    <Card heading={props.title} actionButtons={props.actionButtons} styles={cardStyles}>
+      {dnsSecurity.dns.map((dns: any, index: number) => {
+        return (<>
+          <Heading as="h4" size="small" color={colors.primary}>DNS Server #{index+1}</Heading>
+          <Row lbl="IP Address" val={dns.address} />
+          <Row lbl="Hostname" val={dns.hostname} />
+          <Row lbl="DoH Support" val={dns.dohDirectSupports ? '✅ Yes*' : '❌ No*'} />
+        </>);
+      })}
+      {dnsSecurity.dns.length > 0 && (<small>
+        * DoH Support is determined by the DNS server's response to a DoH query.
+        Sometimes this gives false negatives, and it's also possible that the DNS server supports DoH but does not respond to DoH queries.
+        If the DNS server does not support DoH, it may still be possible to use DoH by using a DoH proxy.
+      </small>)}
+    </Card>
+  );
+}
+
+export default DnsServerCard;

src/pages/Results.tsx

@@ -35,6 +35,7 @@ import SiteFeaturesCard from 'components/Results/SiteFeatures';
 import DnsSecCard from 'components/Results/DnsSec';
 import HstsCard from 'components/Results/Hsts';
 import DomainLookup from 'components/Results/DomainLookup';
+import DnsServerCard from 'components/Results/DnsServer';
 import SelfScanMsg from 'components/misc/SelfScanMsg';
 
 import ProgressBar, { LoadingJob, LoadingState, initialJobs } from 'components/misc/ProgressBar';
@@ -380,6 +381,14 @@ const Results = (): JSX.Element => {
     fetchRequest: () => fetch(`/whois-lookup?url=${address}`).then(res => parseJson(res)),
   });
 
+  // Get the DNS server(s) for a domain, and test DoH/DoT support
+  const [dnsServerResults, updateDnsServerResults] = useMotherHook({
+    jobId: 'dns-server',
+    updateLoadingJobs,
+    addressInfo: { address, addressType, expectedAddressTypes: urlTypeOnly },
+    fetchRequest: () => fetch(`/dns-server?url=${address}`).then(res => parseJson(res)),
+  });
+
   /* Cancel remaining jobs after  10 second timeout */
   useEffect(() => {
     const checkJobs = () => {
@@ -424,6 +433,7 @@ const Results = (): JSX.Element => {
     { id: 'txt-records', title: 'TXT Records', result: txtRecordResults, Component: TxtRecordCard, refresh: updateTxtRecordResults },
     { id: 'hsts', title: 'HSTS Check', result: hstsResults, Component: HstsCard, refresh: updateHstsResults },
     { id: 'whois', title: 'Domain Info', result: whoIsResults, Component: WhoIsCard, refresh: updateWhoIsResults },
+    { id: 'dns-server', title: 'DNS Server', result: dnsServerResults, Component: DnsServerCard, refresh: updateDnsServerResults },
     { id: 'features', title: 'Site Features', result: siteFeaturesResults, Component: SiteFeaturesCard, refresh: updateSiteFeaturesResults },
     { id: 'carbon', title: 'Carbon Footprint', result: carbonResults, Component: CarbonFootprintCard, refresh: updateCarbonResults },
   ];