form.js

export default class NewsletterForm extends React.Component {

  constructor(props: NewsletterFormProps) {
    super(props);
    this.handleEmailChange = this.handleEmailChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  componentDidMount () {
    if (this.form) {
      this.form.addEventListener("submit", this.handleSubmit);
    }
  }
  
  handleSubmit(evt: Object) {
    evt.preventDefault();
    evt.stopPropagation();
    if (typeof this.props.subscribe !== "undefined") {
      this.props.subscribe(this.props.email);
    }
  }

  render() {
    return (
      <form className={ classnames("newsletter-form", { "newsletter-form-modal": this.props.isModal }) } ref={(el) => this.form = el} data-no-csrf>
        {this.renderEmailField()}
        {this.renderPrivacyField()}
        {this.renderSubmitButton()}
        {this.renderDisclaimer()}
      </form>
    );
  }
}

Since moving to adding the event listener to actual element via ref:

Content Security Policy: The page’s settings blocked the loading of a resource at https://example.com:8000/ (“form-action”).
[Show/hide message details.] XHRPOST
https://basket.mozilla.org/news/subscribe/

When using the react's built in onSubmit listener, I get the error after the https://basket.mozilla.org/news/subscribe/ log