Is it a risk to pass html in an RESTful API response and inject directly into webpage?

Question

I'm trying to understand if there is a chance for an XSS attack when our api endpoint returns a json response with a property returning html data:

e.g.

https://www.link-to-my-website.com/api/v1/data

Resp:

{
  footer: "<a href='https://www.link-to-my-website.com'>My Link</a>"
}

and then in React.js (or any js frontend) doing something like:

import React from 'react';
import PropTypes from 'prop-types';

export default class MyFooterComponent extends React.Component {
  render() {
    return (
      <div className="footer" dangerouslySetInnerHTML={{ __html: this.props.footer }} />
    );
  }
}

Am I putting my end users at risk? and should I sanitize or simply not pass data this way? Or am I too paranoid here?

Thank you!

no the footer html comes directly from a database that we manage input for — Lucas, Feb 18 '19 at 13:43

score 2 · Accepted Answer · answered Feb 18 '19 at 14:41

If there is no user input, there is no XSS issue. From the owasp link:

Flaws that allow these attacks to succeed are quite widespread and occur anywhere a web application uses input from a user within the output it generates without validating or encoding it.

If there was user input, then yes, you’d want to specifically sanitize that input before sending the response and injecting it into the html.

score 0 · Answer 2 · answered Feb 18 '19 at 14:47

Yes such implementation is prone to script injection attacks. If u are maintaining the API it might not be that big of an issue but you should never do that with a third party API. But just to be safe dont go for that implementation. You can read more about it here.

Is it a risk to pass html in an RESTful API response and inject directly into webpage?

2 Answers2