XSS (or parse error) in react-error-overlay with specific coding style #2789

Activity

1. ccloli

   changed the title [-]XSS in `react-error-overlay` with specific coding style[/-] [+]XSS (or parse error) in `react-error-overlay` with specific coding style[/+] on Jul 14, 2017
2. gaearon

   added

   issue: bug

   on Jul 14, 2017
3. gaearon

   added this to the 1.0.11 milestone on Jul 14, 2017
4. gaearon commented on Jul 14, 2017

   

   gaearon

   on Jul 14, 2017

   Contributor

   More actions

   That's great, thanks for reporting.

   I expect this to be solved by the React rewrite (haven't reviewed it yet) but happy to take a fix for current code.
5. ccloli commented on Jul 15, 2017

   

   ccloli

   on Jul 15, 2017

   ContributorAuthor

   More actions

   Seems the source code is escaped by codeFrame() at line 44 of lib/components/code.js, then assigns it to variable ansiHighlight, then passes it to generateAnsiHtml() (react-dev-utils/ansiHTML)

   This is the sourceCode.join('\n') that passed to codeFrame() and the parsed result ansiHighlight of the third section (no alert dialog):

   // sourceCode
       `item-input-field ${
           data.checked ? 'checked-field' : ''
       }`.trim() }>
       <input type="checkbox" onclick="alert(/XSS/)" checked={ data.checked } onChange={ (event) => { this.onCheckboxChange(data.id); } } />
       {/* Should be `this.props.onCheckboxChange` */}
       { data.content }
   </label>
   
   // ansiHighlight
   ←[0m ←[90m 47 | ←[39m    ←[32m`item-input-field ${←[39m
    ←[90m 48 | ←[39m←[32m        data.checked ? 'checked-field' : ''←[39m
    ←[90m 49 | ←[39m←[32m    }`←[39m←[33m.←[39mtrim() }←[33m>←[39m
   ←[31m←[1m>←[22m←[39m←[90m 50 | ←[39m    ←[33m<←[39m←[33minput←[39m type←[33m=←[39m←[32m"checkbox"←[39m onclick←[33m=←[39m←[32m"alert(/XSS/)"←[39m checked←[33m=←[39m{ data←[33m.←[39mchecked } onChange←[33m=←[39m{ (event) ←[33m=>←[39m { ←[36mthis←[39m←[33m.←[39monCheckboxChange(data←[33m.←[39mid)←[33m;←[39m } } ←[33m/←[39m←[33m>←[39m
    ←[90m 51 | ←[39m    {←[90m/* Should be `this.props.onCheckboxChange` */←[39m}
    ←[90m 52 | ←[39m    { data←[33m.←[39mcontent }
    ←[90m 53 | ←[39m←[33m<←[39m←[33m/←[39m←[33mlabel←[39m←[33m>←[39m←[0m
   

   And this is the first section (shows /XSS/ alert dialog):

   // sourceCode
           data.checked ? 'checked-field' : ''
       }`.trim()
   }>
       <input type="checkbox" onclick="alert(/XSS/)" checked={ data.checked } onChange={ (event) => { this.onCheckboxChange(data.id); } } />
       {/* Should be `this.props.onCheckboxChange` */}
       { data.content }
   </label>
   
   // ansiHighlight
   ←[0m ←[90m 10 | ←[39m        data←[33m.←[39mchecked ←[33m?←[39m ←[32m'checked-field'←[39m ←[33m:←[39m ←[32m''←[39m
    ←[90m 11 | ←[39m    }←[32m`.trim()←[39m
    ←[90m 12 | ←[39m←[32m}>←[39m
   ←[31m←[1m>←[22m←[39m←[90m 13 | ←[39m←[32m    <input type="checkbox" onclick="alert(/XSS/)" checked={ data.checked } onChange={ (event) => { this.onCheckboxChange(data.id); } } />←[39m
    ←[90m 14 | ←[39m←[32m    {/* Should be `←[39m←[36mthis←[39m←[33m.←[39mprops←[33m.←[39monCheckboxChange←[32m` */}←[39m
    ←[90m 15 | ←[39m←[32m    { data.content }←[39m
    ←[90m 16 | ←[39m←[32m</label>←[39m←[0m
   

   It shows that the 4th line doesn't fully parsed by codeFrame() (thought seems that all the content of section is not fully parsed), and codeFrame is imported from babel-code-frame. So it's probably a bug of babel-code-frame...?
6. ccloli commented on Jul 15, 2017

   

   ccloli

   on Jul 15, 2017

   ContributorAuthor

   More actions

   Looks like the sourceCode is not fully parsed by codeFrame is because the sourceCode doesn't include the begin back-tick (`) of template literals, so it treats the latter tokens (begins from `.trim()) as a string. You can see that the screenshot of Expected Behavior parses the source code as JSX, while Actual Behavior is as string.

   It maybe hard for babel-code-frame to fix this, because the source code is not complete, and the fragment of source code miss some important lexical items. At least we can fix the bug of parsing HTML tags in source code, simply replace the angle brackets in react-dev-utils/ansiHTML.
7. Timer

   closed this as completedin #2796on Aug 2, 2017
8. lock

   locked and limited conversation to collaborators on Jan 21, 2019