ngx-datatable
ngx-datatable copied to clipboard
swimlane
HTML Content is parsed in the body-cell
I'm submitting a ... (check one with "x")
[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter
Current behavior When I create a datatable with a column like: columns = [{ prop: 'foo' }]; and a row like: rows = [{ foo: '<strong>some text</strong>'}]; The text of the foo property is displayed as: some text instead of: <strong>some text</strong> as it is bound to the innerHTML of the span inside the BodyCellComponent.
Expected behavior The property value should be set as the spans textContent so the HTML won't get parsed.
Reproduction of the problem create a datatable like this: <ngx-datatable [rows]="rows" [columns]="columns">
with public columns = [{ prop: 'foo' }]; and public rows = [{ foo: '<strong>some text</strong>' }];
What is the motivation / use case for changing the behavior? Users can edit the data displayed in the table so html content should not be parsed.
Please tell us about your environment:
-
Table version: 9.3.1
-
Angular version: 4.2.6
-
Browser: Chrome 62
-
Language: TypeScript 2.3.4
This makes column cells vulnerable to XSS attacks. Is this issue going to be fixed ? @amcdnl
The tooltip is paste like a sanitizedValue, why not sanitize [innerHTML] ? https://github.com/swimlane/ngx-datatable/blob/master/src/components/body/body-cell.component.ts#L28
There is workaround of passing a template or escaping pipe, but both of them create a performance overhead.
I noticed this yesterday as well, would be nice if this could be managed somehow.
What's the problem here? If you need to show html as a text add column template for that column. This use case is rare. IMHO innerHtml is safer, and since you always can pass a template with whatever you wan't theres no issue
When you use the [innerHtml] directive, as ngx-datatable does, Angular already sanitizes the html content beforehand, so no vulnerability to XSS attacks.
See: https://angular.io/guide/security https://angular.io/api/platform-browser/DomSanitizer
@jeremyben There are no security for XSS or CSRF attacks in the table
For example: I have a list of entities received from the API
there are one field with content like this
and when the datatable renders this list it does the HTTP GET request to this site
Hello
As you said @jeremyben Angular does indeed sanitizes the html content with [innerHtml], so components like for example are indeed removed from the cell contents.
But as @default23 said, a cell containing a <img src="x"/> is still parsed as html and a request is automatically made to 'x' URL when the table is loaded, which could result in a XSS attack.
@jeremyben do you have a further explanation for this? Should we do something else?
@default23 How did you end up resolving your problem?
