compat-table icon indicating copy to clipboard operation
compat-table copied to clipboard

Invalid characters on generated HTML

Open afmenez opened this issue 8 years ago • 2 comments

I have run an HTML validator on some pages: https://validator.w3.org/nu/?doc=http%3A%2F%2Fkangax.github.io%2Fcompat-table%2Fesnext%2F

There are a lot of problems with invalid characters ([, ], #, %), which seem serious to me:

  • Bad value for attribute href on element a: Illegal character in fragment: # is not allowed; <td><span><a class="anchor" href="#test-SIMD_(Single_Instruction,_Multiple_Data)_a_href=_https://tc39.github.i…on_img_src=_../mdn.png_alt=_MDN_(Mozilla_Development_Network)_logo_width=_15_height=_13_/_/a_nbsp;">&#xA7;
  • Bad value for attribute href on element a: Percentage ("%") is not followed by two hexadecimal digits; <td><span><a class="anchor" href="#test-SIMD_(Single_Instruction,_Multiple_Data)_SIMD.%type%.store1_a_href=_ht…on_img_src=_../mdn.png_alt=_MDN_(Mozilla_Development_Network)_logo_width=_15_height=_13_/_/a_nbsp;">&#xA7;
  • Bad value #test-Observable_Observable.prototype[Symbol.observable] for attribute href on element a: Illegal character in fragment: [ is not allowed; <td><span><a class="anchor" href="#test-Observable_Observable.prototype[Symbol.observable]">&#xA7;

The fisrt one seems to be just wrong, is it fixed later via js? The other two seem to need escaping.

These may be preventing the pages to work on older browsers (see #1127).

afmenez avatar Aug 01 '17 20:08 afmenez

I believe the strigs above are escaped by the escapeTestName() function in build.js:

function escapeTestName(name) {
    return name.replace(/^[\s<>&"',]+|[\s<>&"',]+$/g, '').replace(/[\s<>&"]+/g, '_');
}

I tried adding further filtering for '%', '[', ']': .replace(/%/g, '&&#37;').replace(/\[/g, '&&#91;').replace(/\]/g, '&&#93;') But these & are further escaped to &amp; somewhere else, so it doesn't work.

afmenez avatar Aug 02 '17 17:08 afmenez

The '#' seems to be explicitly added by this line in build.js: append('<span><a class="anchor" href="#' + getHtmlId(id) + '">&sect;</a>' + name + footnoteHTML(t) + '</span></td>') But I am not sure why it is illegal.

afmenez avatar Aug 02 '17 17:08 afmenez