Remove inline styling from provided JS

[levinmr]

Including touchpoints JS in the analytics.usa.gov site with the following:

<script async type="text/javascript" src="https://touchpoints.app.cloud.gov/touchpoints/15ca967f.js"></script>

caused the site's CSP to block multiple items from loading due to unsafe inline styling being applied.

The CSP header for the site (set by NGINX):

# Add https://touchpoints.app.cloud.gov and https://cg-1b082c1b-3db7-477f-9ca5-bd51a786b41e.s3-us-gov-west-1.amazonaws.com to account for scripts/images loaded by Touchpoints

add_header Content-Security-Policy "default-src 'self' https://dap.digitalgov.gov https://www.google-analytics.com https://www.googletagmanager.com https://touchpoints.app.cloud.gov https://cg-1b082c1b-3db7-477f-9ca5-bd51a786b41e.s3-us-gov-west-1.amazonaws.com; form-action 'none'; frame-ancestors 'none';" always;

I worked around the issue by including the Touchpoints JS/CSS in the hosting for the site and updating the JS/HTML that was setting inline styles.

It would be nice to have some guidance on how to do the workaround above, or provide a CSS file in addition to the Touchpoints JS to avoid the inline styling

[ryanwoldatwork]

@levinmr - happy to chat about the details you're seeing.

There shouldn't be much inline to the html. Are you referring to a different type of inline? I also have a branch pending to refactor the .js, but its a refactor and html inline styles aren't changed.

And here's some guidance.
https://github.com/GSA/touchpoints/wiki/Delivery-Options

[levinmr]

Excerpts from the JS referenced above that were flagged as issues in the CSP;

loadCss: function() {
			var style = document.createElement('style');
			style.innerHTML = this.css;
			d.head.appendChild(style);
		},
		loadHtml: function() {

			this.dialogEl = document.createElement('div');
			this.dialogEl.setAttribute("hidden", true);
			this.dialogEl.setAttribute('class', 'fba-modal');

			this.dialogEl.innerHTML = "<div id=\"fba-modal-dialog\"\n  class=\"fba-modal-dialog\"\n  role=\"dialog\"\n  aria-label=\"Feedback modal dialog\"\n  aria-modal=\"true\">\n  <div class=\"touchpoints-form-wrapper open-ended\"\n  id=\"touchpoints-form-15ca967f\"\n  data-touchpoints-form-id=\"15ca967f\" tabindex=\"-1\">\n  <div class=\"wrapper\">\n    <h2 class=\"word-break fba-modal-title\">\n  <div class=\"margin-bottom-2 text-center\">\n      <img alt=\"General Services Administration logo\" class=\"form-header-logo-square\" src=\"https://cg-1b082c1b-3db7-477f-9ca5-bd51a786b41e.s3-us-gov-west-1.amazonaws.com/uploads/form/logo/3746/logo_square_analytics-fav.jpg\" />\n  <\/div>\n  Feedback for analytics.usa.gov\n<\/h2>\n\n\n      <a class=\"fba-modal-close\"\n        type=\"button\"\n        href=\"#\"\n        aria-label=\"Close this window\">×<\/a>\n\n    <p class=\"fba-instructions\">\n      Please let us know how we can improve this site and product.\n    <\/p>\n    <p class=\"required-questions-notice\">\n      <small>\n        A red asterisk (<abbr title=\"required\" class=\"usa-hint--required\">*<\/abbr>) indicates a required field.\n      <\/small>\n    <\/p>\n    <div class=\"fba-alert usa-alert usa-alert--success\" role=\"status\" hidden>\n  <div class=\"usa-alert__body\">\n    <h3 class=\"usa-alert__heading\">\n      Success\n    <\/h3>\n    <div class=\"usa-alert__text\">\n      Thank you for your feedback!\n    <\/div>\n  <\/div>\n<\/div>\n<div class=\"fba-alert-error usa-alert usa-alert--error\" role=\"alert\" hidden>\n  <div class=\"usa-alert__body\">\n    <h3 class=\"usa-alert__heading\">\n      Error\n    <\/h3>\n    <p class=\"usa-alert__text\">\n      alert message\n    <\/p>\n  <\/div>\n<\/div>\n\n    \n<form\n  action=\"https://touchpoints.app.cloud.gov/touchpoints/15ca967f/submissions.json\"\n  class=\"usa-form usa-form--large margin-bottom-2\"\n  method=\"POST\">\n  <div class=\"touchpoints-form-body\">\n        <input type=\"hidden\" name=\"fba_location_code\" id=\"fba_location_code\" autocomplete=\"off\" />\n    <input type=\"text\"\n      name=\"fba_directive\"\n      id=\"fba_directive\"\n      title=\"fba_directive\"\n      aria-hidden=\"true\"\n      style=\"display:none !important\"\n      tabindex=\"-1\"\n      autocomplete=\"off\">\n      <div class=\"section visible\">\n\n\n\n        <div class=\"questions\">\n\n          <div class=\"question white-bg\">\n              \n<div role=\"group\">\n  <label class=\"usa-label\" for=\"answer_01\">\n  Name\n<\/label>\n\n  <input type=\"text\" name=\"answer_01\" id=\"answer_01\" class=\"usa-input\" maxlength=\"10000\" />\n\n<\/div>\n\n          <\/div>\n\n          <div class=\"question white-bg\">\n              \n<div role=\"group\">\n  <label class=\"usa-label\" for=\"answer_02\">\n  Email\n<\/label>\n\n  <input type=\"text\" name=\"answer_02\" id=\"answer_02\" class=\"usa-input\" maxlength=\"10000\" />\n\n<\/div>\n\n          <\/div>\n\n          <div class=\"question white-bg\">\n              <div role=\"group\">\n  <label class=\"usa-label\" for=\"answer_03\">\n  Response body\n  <abbr title=\"required\" class=\"usa-hint--required\">*<\/abbr>\n<\/label>\n\n  <textarea name=\"answer_03\" id=\"answer_03\" class=\"usa-textarea\" required=\"required\" maxlength=\"2500\">\n<\/textarea>\n  <span class=\"counter-msg usa-hint usa-character-count__message\" aria-live=\"polite\">\n    2500 characters allowed\n  <\/span>\n<\/div>\n\n          <\/div>\n        <\/div>\n\n          <button type=\"submit\" class=\"usa-button submit_form_button\">Submit<\/button>\n      <\/div>\n  <\/div>\n<\/form>\n\n  <\/div>\n  \n    <div class=\"touchpoints-form-disclaimer\">\n  <hr style=\"border: none; border-top: 1px solid #E5E5E5;\">\n  <div class=\"grid-container\">\n    <div class=\"grid-row\">\n      <div class=\"grid-col-12\">\n        <small class=\"fba-dialog-privacy\">\n          <a href=\"https://www.gsa.gov/reference/gsa-privacy-program/privacy-act-statement-for-design-research\" target=\"_blank\" rel=\"noopener\">Privacy Act Statement for Design Research<\/a>\n        <\/small>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<div class=\"usa-banner\">\n  <footer class=\"usa-banner__header touchpoints-footer-banner\">\n    <div class=\"usa-banner__inner\">\n      <div class=\"grid-col-auto\">\n        <img\n            aria-hidden=\"true\"\n            class=\"usa-banner__header-flag\"\n            src=\"https://touchpoints.app.cloud.gov/img/us_flag_small.png\"\n            alt=\"U.S. flag\"\n          />\n      <\/div>\n      <div class=\"grid-col-fill tablet:grid-col-auto\" aria-hidden=\"true\">\n        <p class=\"usa-banner__header-text\">\n          An official form of the United States government.\n          Provided by\n          <a href=\"https://touchpoints.digital.gov\" target=\"_blank\" rel=\"noopener\" class=\"usa-link--external\">Touchpoints<\/a>\n          <br>\n\n        <\/p>\n      <\/div>\n    <\/div>\n  <\/footer>\n<\/div>\n\n\n<\/div>\n<\/div>\n";

The loadCss function appending a style tag was one. Also there are a few inline styles in the load HTML function (you can see them by grepping the HTML there for style=)

[ryanwoldatwork]

@levinmr - can you load the latest and let me know how it looks. A style tag is still being added, but inline styles have been removed.

[levinmr]

That eliminated all but one CSP issue. I deployed to our dev environment with the script tag, so you can inspect it. https://analytics-develop.app.cloud.gov/

[levinmr]

What I see in chrome:

[ryanwoldatwork]

hi @levinmr - are you willing to try a CSP tag allowing touchpoints styling? style-src with unsafe-inline should do it.

another option is for touchpoints to provide a separate css file, or for you to host that css locally.
and finally, depending on USWDS version, touchpoints can be set to not provide CSS, but it assumes USWDS 3.x is in place on the site.

[levinmr]

I hosted the CSS/JS locally to avoid the unsafe-inline directive in the CSP. Touchpoints providing a CSS file was the feature request that I was suggesting.