topic Content Security Policy and Embedded Hubspot Forms in APIs & Integrations

Content Security Policy and Embedded Hubspot Forms

sm_kt — Thu, 20 Feb 2020 21:40:04 GMT

Hey all, we are working to deploy a more robust CSP for one of our sites. This site hosts a hubspot form, and this form is loaded via inline JavaScript, and is declared directly in the HTML markup. I want to avoind allowing "unsafe-inline" in my CSP, as this allows malicious actors to inject Javascript. Thus, am trying to move all the inline stuff to a specific .js file that I host and which is included in our CSP file. This is working for the most part, but not for the embedded form. Is there anything special I need to bind the function to, so it knows where in the page to render itself? When I call the form.Create() function from my .js file, I get no error, but the form is not rendered (or at least not rendered in the correct location to correspond with its modal).

Any advice / best practices on moving inline-embedded Hubspot forms to an external .js file?

Thanks,

Kevin

Re: Content Security Policy and Embedded Hubspot Forms

Willson — Fri, 21 Feb 2020 10:17:12 GMT

Hi @sm_kt

I can confirm that this is currently something we do not directly support. We've seen solutions implemented in the past that temporarily provide this functionality but future updates can cause these features to stop functioning.

And so, we recommend sticking with using the standard embed code rather than a custom method.

I hope this helps!

Re: Content Security Policy and Embedded Hubspot Forms

sm_kt — Fri, 21 Feb 2020 13:49:30 GMT

Ok, thanks for the info.

Re: Content Security Policy and Embedded Hubspot Forms

cfinholt — Wed, 15 Jul 2020 15:23:08 GMT

For anyone who might stumble upon this later, the HubSpot form code can be moved into a separate .js file. It's not widely documented, but the `target` attribute on this page is how you specify the location you want to render the form

window.hbspt.forms.create({
  portalId: "#######",
  formId: "########-####-####-####-############",
  target: "#element-form-should-render-in",
});

Re: Content Security Policy and Embedded Hubspot Forms

TTeam8 — Sun, 05 Nov 2023 07:02:51 GMT

I tried, but it does lose all the CSS formatting. How did you solve that?

Re: Content Security Policy and Embedded Hubspot Forms

TTeam8 — Sun, 05 Nov 2023 07:03:45 GMT

The issue is with the standard embedded code option. It does not align to CSP policies. What do you suggest as CSP policies that is not unsafe-inline?

Re: Content Security Policy and Embedded Hubspot Forms

TTeam8 — Tue, 07 Nov 2023 06:59:22 GMT

Hi @wilson the error happen with the standard embedded JS.

You can test it with a simple HTML and JS. The v2.js code does do inline script styling and as such breaks standard CSP policy.

You can test it with a simple HTML page

<!DOCTYPE html>

<head>

<title>Contact Us</title>

script-src 'self' https://js.hs-banner.com https://js.hsforms.net/forms/embed/v2.js https://js.hs-scripts.com https://js.hscollectedforms.net https://js.hs-analytics.net;

style-src 'self' https://fonts.googleapis.com https://js.hsforms.net/forms/embed/v2.js ;

style-src-elem 'self' https://fonts.googleapis.com https://js.hsforms.net/forms/embed/v2.js ;

object-src 'none';

base-uri 'self';

connect-src 'self' https://forms.hscollectedforms.net https://forms.hsforms.com/ https://hubspot-forms-static-embed.s3.amazonaws.com;

font-src 'self' https://fonts.gstatic.com;

frame-src 'self';

img-src 'self' https://track.hubspot.com https://forms.hsforms.com/ https://forms-na1.hsforms.com;

manifest-src 'self';

media-src 'self';

worker-src 'none';">

<title>Contact Us CSP issue</title>

</head>

<body>

<h1>Simple embedded form</h1>

</div>

</body>

</html>

with JS

window.hbspt.forms.create({

region: "na1",

portalId: "XXXXXXX",

formId: "XXXXXXXX-XXXX-XXXX-XXXXX-XXXXXXXXX",

target: "#hubspot-contactus-form-target",

});

It works If I use the "unsafe-inline" in

style-src-elem 'self' 'unsafe-inline' https://fonts.googleapis.com https://js.hsforms.net/forms/embed/v2.js ;

But it opens a big security hole. What can I do to use an embedded form and still be secure?

Re: Content Security Policy and Embedded Hubspot Forms

TTeam8 — Tue, 07 Nov 2023 07:00:54 GMT

I meant that it happens embedded forms as the v2.js code does do inline script styling and as such breaks standard CSP policy.

You can test it with a simple HTML page

<!DOCTYPE html>

<head>

<title>Contact Us</title>

script-src 'self' https://js.hs-banner.com https://js.hsforms.net/forms/embed/v2.js https://js.hs-scripts.com https://js.hscollectedforms.net https://js.hs-analytics.net;

style-src 'self' https://fonts.googleapis.com https://js.hsforms.net/forms/embed/v2.js ;

style-src-elem 'self' https://fonts.googleapis.com https://js.hsforms.net/forms/embed/v2.js ;

object-src 'none';

base-uri 'self';

connect-src 'self' https://forms.hscollectedforms.net https://forms.hsforms.com/ https://hubspot-forms-static-embed.s3.amazonaws.com;

font-src 'self' https://fonts.gstatic.com;

frame-src 'self';

img-src 'self' https://track.hubspot.com https://forms.hsforms.com/ https://forms-na1.hsforms.com;

manifest-src 'self';

media-src 'self';

worker-src 'none';">

<title>Contact Us CSP issue</title>

</head>

<body>

<h1>Simple embedded form</h1>

</div>

</body>

</html>

with JS

window.hbspt.forms.create({

region: "na1",

portalId: "XXXXXXX",

formId: "XXXXXXXX-XXXX-XXXX-XXXXX-XXXXXXXXX",

target: "#hubspot-contactus-form-target",

});

It works If I use the "unsafe-inline" in

style-src-elem 'self' 'unsafe-inline' https://fonts.googleapis.com https://js.hsforms.net/forms/embed/v2.js ;

But it opens a big security hole. What can I do to use an embedded form and still be secure?

Re: Content Security Policy and Embedded Hubspot Forms

cfinholt — Wed, 08 Nov 2023 15:54:32 GMT

It's been a few years, but if I recall correctly, my company was more comfortable with using `unsafe-inline` for `style-src` as long as I could avoid using it for `script-src`, so that's why I didn't run into the issue that you are

Apologies for not really having an answer for ya!

Re: Content Security Policy and Embedded Hubspot Forms

rjlynchdev — Fri, 05 Jan 2024 10:10:48 GMT

> we recommend sticking with using the standard embed code rather than a custom method.

So how do we work around the content security policy with out permitting unsafe_inline for styles?

For context the problem we're running into is the hubspot feedback widget injects styles into the document head but these are blocked by our csp.