APIs & Integrations

Search APIs & Integrations for solutions or ask a question
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
sm_kt

‎Feb 20, 2020 4:40 PM

Participant

Content Security Policy and Embedded Hubspot Forms

SOLVE

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

Forms
0 Upvotes
1 Accepted solution
Willson
Solution
HubSpot Employee

‎Feb 21, 2020 5:17 AM

HubSpot Employee

Content Security Policy and Embedded Hubspot Forms

SOLVE

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!

Product Manager @ HubSpot

View solution in original post

0 Upvotes
9 Replies 9
cfinholt

‎Jul 15, 2020 11:23 AM

Member

Content Security Policy and Embedded Hubspot Forms

SOLVE

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

‎Nov 5, 2023 2:02 AM

Participant

Content Security Policy and Embedded Hubspot Forms

SOLVE

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

0 Upvotes
cfinholt

‎Nov 8, 2023 10:54 AM

Member

Content Security Policy and Embedded Hubspot Forms

SOLVE

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!

0 Upvotes
Willson
Solution
HubSpot Employee

‎Feb 21, 2020 5:17 AM

HubSpot Employee

Content Security Policy and Embedded Hubspot Forms

SOLVE

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!

Product Manager @ HubSpot
0 Upvotes
rjlynchdev

‎Jan 5, 2024 5:07 AM - edited ‎Jan 5, 2024 5:10 AM

Participant

Content Security Policy and Embedded Hubspot Forms

SOLVE

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

0 Upvotes
TTeam8

‎Nov 7, 2023 1:59 AM

Participant

Content Security Policy and Embedded Hubspot Forms

SOLVE

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';
object-src 'none';
base-uri 'self';
font-src 'self' https://fonts.gstatic.com;
frame-src 'self';
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
 


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

‎Nov 5, 2023 2:03 AM

Participant

Content Security Policy and Embedded Hubspot Forms

SOLVE

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?

sm_kt

‎Feb 21, 2020 8:49 AM

Participant

Content Security Policy and Embedded Hubspot Forms

SOLVE

Ok, thanks for the info.

0 Upvotes
TTeam8

‎Nov 7, 2023 2:00 AM

Participant

Content Security Policy and Embedded Hubspot Forms

SOLVE

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';
object-src 'none';
base-uri 'self';
font-src 'self' https://fonts.gstatic.com;
frame-src 'self';
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
 


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

Sign up for the Developer Newsletter

Fresh content delivered to your inbox every month.
Content Security Policy and Embedded Hubspot Forms
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...
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...
Developers
Jan 5, 2024