# Content Security Policy and Embedded Hubspot Forms

**URL:** <https://community.hubspot.com/t/content-security-policy-and-embedded-hubspot-forms/18937>\
**Category:** APIs & Integrations\
**Tags:** forms\
**Created:** [February 20, 2020, 9:40pm UTC](https://community.hubspot.com/t/content-security-policy-and-embedded-hubspot-forms/18937 "2020-02-20T21:40:04Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![sm\_kt](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sm_kt/32/51304_2.png) [@sm\_kt](https://community.hubspot.com/u/sm_kt)\
**Post date:** [February 20, 2020, 9:40pm UTC](https://community.hubspot.com/t/content-security-policy-and-embedded-hubspot-forms/18937/1 "2020-02-20T21:40:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Willson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/willson/32/84663_2.png) [@Willson](https://community.hubspot.com/u/Willson)\
**Post date:** [February 21, 2020, 10:17am UTC](https://community.hubspot.com/t/content-security-policy-and-embedded-hubspot-forms/18937/2 "2020-02-21T10:17:12Z")

</div>

Hi [@sm\_kt](https://community.hubspot.com/t5/user/viewprofilepage/user-id/80855)

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!

---

<div class="post-metadata">

**Author:** ![sm\_kt](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sm_kt/32/51304_2.png) [@sm\_kt](https://community.hubspot.com/u/sm_kt)\
**Post date:** [February 21, 2020, 1:49pm UTC](https://community.hubspot.com/t/content-security-policy-and-embedded-hubspot-forms/18937/3 "2020-02-21T13:49:30Z")

</div>

Ok, thanks for the info.

---

<div class="post-metadata">

**Author:** ![TTeam8](https://avatars.discourse-cdn.com/v4/letter/t/779978/32.png) [@TTeam8](https://community.hubspot.com/u/TTeam8)\
**Post date:** [November 7, 2023, 7:00am UTC](https://community.hubspot.com/t/content-security-policy-and-embedded-hubspot-forms/18937/4 "2023-11-07T07:00:54Z")

</div>

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.hs-banner.com/) [https://js.hsforms.net/forms/embed/v2.js](https://js.hsforms.net/forms/embed/v2.js) [https://js.hs-scripts.com](https://js.hs-scripts.com/) [https://js.hscollectedforms.net](https://js.hscollectedforms.net/) [https://js.hs-analytics.net](https://js.hs-analytics.net/);

style-src ‘self’ [https://fonts.googleapis.com](https://fonts.googleapis.com/) [https://js.hsforms.net/forms/embed/v2.js](https://js.hsforms.net/forms/embed/v2.js) ;

style-src-elem ‘self’ [https://fonts.googleapis.com](https://fonts.googleapis.com/) [https://js.hsforms.net/forms/embed/v2.js](https://js.hsforms.net/forms/embed/v2.js) ;

object-src ‘none’;

base-uri ‘self’;

connect-src ‘self’ [https://forms.hscollectedforms.net](https://forms.hscollectedforms.net/) [https://forms.hsforms.com/](https://forms.hsforms.com/? __hstc=20629287.e1bb87f3758ad8b2e8eb2fa4919e0ffb.1697576855387.1699331435109.1699338202759.18&__ hssc=20629287.5.1699338202759&__hsfp=3290891933) [https://hubspot-forms-static-embed.s3.amazonaws.com](https://hubspot-forms-static-embed.s3.amazonaws.com/);

font-src ‘self’ [https://fonts.gstatic.com](https://fonts.gstatic.com/);

frame-src ‘self’;

img-src ‘self’ [https://track.hubspot.com](https://track.hubspot.com/) [https://forms.hsforms.com/](https://forms.hsforms.com/? __hstc=20629287.e1bb87f3758ad8b2e8eb2fa4919e0ffb.1697576855387.1699331435109.1699338202759.18&__ hssc=20629287.5.1699338202759&__hsfp=3290891933) [https://forms-na1.hsforms.com](https://forms-na1.hsforms.com/?__hstc=20629287.e1bb87f3758ad8b2e8eb2fa4919e0ffb.1697576855387.1699331435109.1699338202759.18& __hssc=20629287.5.1699338202759&__ hsfp=3290891933);

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](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://fonts.googleapis.com/) [https://js.hsforms.net/forms/embed/v2.js](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?

---

<div class="post-metadata">

**Author:** ![TTeam8](https://avatars.discourse-cdn.com/v4/letter/t/779978/32.png) [@TTeam8](https://community.hubspot.com/u/TTeam8)\
**Post date:** [November 5, 2023, 7:03am UTC](https://community.hubspot.com/t/content-security-policy-and-embedded-hubspot-forms/18937/5 "2023-11-05T07:03:45Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![TTeam8](https://avatars.discourse-cdn.com/v4/letter/t/779978/32.png) [@TTeam8](https://community.hubspot.com/u/TTeam8)\
**Post date:** [November 7, 2023, 6:59am UTC](https://community.hubspot.com/t/content-security-policy-and-embedded-hubspot-forms/18937/6 "2023-11-07T06:59:22Z")

</div>

Hi [@wilson](https://community.hubspot.com/t5/user/viewprofilepage/user-id/25804) 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.hs-banner.com/) [https://js.hsforms.net/forms/embed/v2.js](https://js.hsforms.net/forms/embed/v2.js) [https://js.hs-scripts.com](https://js.hs-scripts.com/) [https://js.hscollectedforms.net](https://js.hscollectedforms.net/) [https://js.hs-analytics.net](https://js.hs-analytics.net/);

style-src ‘self’ [https://fonts.googleapis.com](https://fonts.googleapis.com/) [https://js.hsforms.net/forms/embed/v2.js](https://js.hsforms.net/forms/embed/v2.js) ;

style-src-elem ‘self’ [https://fonts.googleapis.com](https://fonts.googleapis.com/) [https://js.hsforms.net/forms/embed/v2.js](https://js.hsforms.net/forms/embed/v2.js) ;

object-src ‘none’;

base-uri ‘self’;

connect-src ‘self’ [https://forms.hscollectedforms.net](https://forms.hscollectedforms.net/) [https://forms.hsforms.com/](https://forms.hsforms.com/? __hstc=20629287.e1bb87f3758ad8b2e8eb2fa4919e0ffb.1697576855387.1699331435109.1699338202759.18&__ hssc=20629287.5.1699338202759&__hsfp=3290891933) [https://hubspot-forms-static-embed.s3.amazonaws.com](https://hubspot-forms-static-embed.s3.amazonaws.com/);

font-src ‘self’ [https://fonts.gstatic.com](https://fonts.gstatic.com/);

frame-src ‘self’;

img-src ‘self’ [https://track.hubspot.com](https://track.hubspot.com/) [https://forms.hsforms.com/](https://forms.hsforms.com/? __hstc=20629287.e1bb87f3758ad8b2e8eb2fa4919e0ffb.1697576855387.1699331435109.1699338202759.18&__ hssc=20629287.5.1699338202759&__hsfp=3290891933) [https://forms-na1.hsforms.com](https://forms-na1.hsforms.com/?__hstc=20629287.e1bb87f3758ad8b2e8eb2fa4919e0ffb.1697576855387.1699331435109.1699338202759.18& __hssc=20629287.5.1699338202759&__ hsfp=3290891933);

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](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://fonts.googleapis.com/) [https://js.hsforms.net/forms/embed/v2.js](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?

---

<div class="post-metadata">

**Author:** ![rjlynchdev](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/rjlynchdev/32/201132_2.png) [@rjlynchdev](https://community.hubspot.com/u/rjlynchdev)\
**Post date:** [January 5, 2024, 10:07am UTC](https://community.hubspot.com/t/content-security-policy-and-embedded-hubspot-forms/18937/7 "2024-01-05T10:07:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![cfinholt](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/cfinholt/32/84489_2.png) [@cfinholt](https://community.hubspot.com/u/cfinholt)\
**Post date:** [July 15, 2020, 3:23pm UTC](https://community.hubspot.com/t/content-security-policy-and-embedded-hubspot-forms/18937/8 "2020-07-15T15:23:08Z")

</div>

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](https://legacydocs.hubspot.com/docs/methods/forms/advanced_form_options) is how you specify the location you want to render the form

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

```

---

<div class="post-metadata">

**Author:** ![TTeam8](https://avatars.discourse-cdn.com/v4/letter/t/779978/32.png) [@TTeam8](https://community.hubspot.com/u/TTeam8)\
**Post date:** [November 5, 2023, 7:02am UTC](https://community.hubspot.com/t/content-security-policy-and-embedded-hubspot-forms/18937/9 "2023-11-05T07:02:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![cfinholt](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/cfinholt/32/84489_2.png) [@cfinholt](https://community.hubspot.com/u/cfinholt)\
**Post date:** [November 8, 2023, 3:54pm UTC](https://community.hubspot.com/t/content-security-policy-and-embedded-hubspot-forms/18937/10 "2023-11-08T15:54:32Z")

</div>

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!