Breaking: Make content-type use proper fonts types

The `content-type` rule uses `mime-db` which currently doesn't¹
contain the standard² font media types.

This commit fixes that by introducing code that overwrites the
non-standard font media types with the standard ones.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

¹ jshttp/mime-db#77
² https://www.iana.org/assignments/media-types/media-types.xhtml#font

Close #425

src/lib/rules/content-type/content-type.ts

@@ -172,6 +172,27 @@ const rule: IRuleBuilder = {
             return null;
         };
 
+        const overwriteMediaType = (mediaType: string): string => {
+
+            // TODO Temporary fix until the following issue is fixed:
+            //      https://github.com/jshttp/mime-db/issues/77
+
+            switch (mediaType) {
+                case 'application/x-font-otf':
+                    return 'font/otf';
+                case 'application/font-sfnt':
+                    return 'font/sfnt';
+                case 'application/x-font-ttf':
+                    return 'font/ttf';
+                case 'application/font-woff':
+                    return 'font/woff';
+                case 'application/font-woff2':
+                    return 'font/woff2';
+                default:
+                    return mediaType;
+            }
+        };
+
         const validate = async (fetchEnd: IFetchEnd) => {
             const { element, resource, response }: { element: IAsyncHTMLElement, resource: string, response: IResponse } = fetchEnd;
 
@@ -227,11 +248,13 @@ const rule: IRuleBuilder = {
 
             // Try to determine the media type and charset of the resource.
 
-            const mediaType: string =
+            let mediaType: string =
                 determineMediaTypeBasedOnElement(element) ||
                 determineMediaTypeBasedOnFileType(response.body.rawContent) ||
                 determineMediaTypeBasedOnFileExtension(resource);
 
+            mediaType = overwriteMediaType(mediaType);
+
             const charset: string = determineCharset(mediaType, originalMediaType);
 
             // Check if the determined values differ

tests/lib/rules/content-type/tests.ts

@@ -11,6 +11,7 @@ const ruleName = getRuleName(__dirname);
 
 const pngFileContent = fs.readFileSync(`${__dirname}/fixtures/image.png`); // eslint-disable-line no-sync
 const svgFileContent = '<svg xmlns="http://www.w3.org/2000/svg"><path d="M1,1"/></svg>';
+// const woff2FileContent = fs.readFileSync(`${__dirname}/fixtures/test.woff2`);
 
 const incorrectCharsetMessage = `'content-type' header should have 'charset=utf-8' (not 'iso-8859-1')`;
 const invalidMediaTypeMessage = `'content-type' header value is invalid (invalid media type)`;
@@ -145,6 +146,30 @@ const testsForDefaults: Array<IRuleTest> = [
 
     // `Content-Type` value contain wrong `media type`.
 
+    // TODO: Enable if `jsdom` supports downloading fonts, or #250 is implemented.
+    // {
+    //     name: `WOFF2 font is served with 'Content-Type' header with the wrong media type`,
+    //     reports: [{ message: generateIncorrectMediaTypeMessage('font/woff2', 'application/font-woff2') }],
+    //     serverConfig: {
+    //         '/': generateHTMLPageData(generateHTMLPage(`
+    //             <style>
+    //                 @font-face {
+    //                     font-family: 'Open Sans';
+    //                     font-style: normal;
+    //                     font-weight: 400;
+    //                     src: local('Open Sans Regular'), local('OpenSans-Regular'), url(test.woff2) format('woff2');
+    //                 }
+    //
+    //                 body {
+    //                     font-family: 'Open Sans';
+    //                 }
+    //             </style>`, 'a')),
+    //         '/test.woff2': {
+    //             content: woff2FileContent,
+    //             headers: { 'Content-Type': 'application/font-woff2' }
+    //         }
+    //     }
+    // },
     {
         name: `Image is served with 'Content-Type' header with the wrong media type`,
         reports: [{ message: generateIncorrectMediaTypeMessage('image/png', 'font/woff') }],