Content Security Policy and Embedded Hubspot Forms

Develop, Build & Integrate APIs & Integrations
1

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

2

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!

3

Ok, thanks for the info.

4

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>

<html lang=“en”>

<head>

<meta charset=“UTF-8”>

<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

<!-- Title -->

<title>Contact Us</title>

<!-- Security Headers -->

<meta http-equiv=“Content-Security-Policy” content="default-src ‘self’;

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’;">

<meta http-equiv=“X-Content-Type-Options” content=“nosniff”>

<meta http-equiv=“X-XSS-Protection” content=“1; mode=block”>

<meta http-equiv=“Strict-Transport-Security” content=“max-age=31536000; includeSubDomains; preload”>

<meta http-equiv=“Referrer-Policy” content=“strict-origin-when-cross-origin”>

<title>Contact Us CSP issue</title>

</head>

<body>

<!-- Contact form structure -->

<h1>Simple embedded form</h1>

<div id=“hubspot-contactus-form-target”>

</div>

<script charset=“utf-8” type=“text/javascript” src=“https://js.hsforms.net/forms/embed/v2.js”></script>

<script type=“text/javascript” src=“hubspot-form.js”></script>

</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?

5

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?

6

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>

<html lang=“en”>

<head>

<meta charset=“UTF-8”>

<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

<!-- Title -->

<title>Contact Us</title>

<!-- Security Headers -->

<meta http-equiv=“Content-Security-Policy” content="default-src ‘self’;

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’;">

<meta http-equiv=“X-Content-Type-Options” content=“nosniff”>

<meta http-equiv=“X-XSS-Protection” content=“1; mode=block”>

<meta http-equiv=“Strict-Transport-Security” content=“max-age=31536000; includeSubDomains; preload”>

<meta http-equiv=“Referrer-Policy” content=“strict-origin-when-cross-origin”>

<title>Contact Us CSP issue</title>

</head>

<body>

<!-- Contact form structure -->

<h1>Simple embedded form</h1>

<div id=“hubspot-contactus-form-target”>

</div>

<script charset=“utf-8” type=“text/javascript” src=“https://js.hsforms.net/forms/embed/v2.js”></script>

<script type=“text/javascript” src=“hubspot-form.js”></script>

</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?

7

> 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.

8

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",
});
9

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

10

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!