Inquiry Regarding Security of Embed Code for Forms and CTAs

[ClaudiaOliveira]

Good afternoon,

I wanted to discuss an important matter concerning the security of the embed code for the forms and CTAs from HubSpot.

Currently, the code is provided within a script tag <script>, and we have some concerns regarding its safety and potential vulnerabilities.

Please see image:

As you may be aware, using script tags can pose security risks, and it’s essential for us to ensure the utmost security for our website.

The use of script tags can potentially expose our site to various security threats, as they can be manipulated or exploited by malicious parties. This poses a significant concern for us, especially when the link to the admin panel is visible, as it could lead to unauthorized access and potential security breaches.

To enhance our website’s security, we would like to explore the possibility of utilizing iframes instead of script tags for embedding forms and CTAs. Iframes can provide an additional layer of security and isolation, reducing the risk of unauthorized access and potential vulnerabilities.

I believe that addressing this security concern is of utmost importance, and I would appreciate your insights and guidance on how we can proceed with implementing iframes for our forms and CTAs.

Best Regards

[evaldas]

Hi @ClaudiaOliveira,

It is certainly good to think about security when implementing external scripts.

Firstly, this script will not provide a link to the admin panel. Even if it did (or could be guessed), as long as your users have 2FA enabled for HubSpot login, you should be safe.

Also, when you place the script on your page, it will actually generate and embed the form in an iframe on your page.

To address your main concern of using script tags in general, you can use a Content Security Policy header on your website and apply a nonce to the script-src directive. This can be quite technical and sometimes require a complex set up, but once implemented, the script for creating the form would be modified to include a nonce, which would look something like this:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js" nonce="unique_random_value"></script>
<script>
 hbspt.forms.create({
 region: "na1",
 portalId: "xxxxxxxx",
 formId: "xxxxxx-xxxxxx-xxxxx-xxxxx"
 });
</script>

Just to note: if this was to be implemented, the nonce would need to be applied to every script tag on the website, as it will communicate to the browser that the script is safe and not something that is an attemped injection by an attacker, for example.

Hopefully this helps addressing some of the concerns!

[ClaudiaOliveira]

Hello @evaldas ,

First of all thank you so much for your reply.

The admin panel that I was talking about is not from HubSpot. We’re working on Strapi for our website.

These steps are for implementing a static embed code directly in the code, unlike our case, which is dynamic and can be changed from the admin panel.

We don’t want to paste the embed code in our code directly it will be pasted in a input and from that input will be saved in the Database and then we get it from the Database to display it as a html that’s why script tags it’s dangerous for us

An example is the youtube embed code (see below)

Thank you again and best regards.

[evaldas]

Thank you for clarifying the situation.

While there is no method to get an embed or iframe code directly from HubSpot, there are a few more different ways you could approach this.

(1) Without inline scripts

This might still not work for your use case, but just in case.

To avoid inline styles, you can place the contents of the second script tag in a js file that you host on your platform and add a target attribute to place the form in a specific HTML element on your page.

Assuming you have a div with an id of myNewForm, we would create a file called hubspot-create-form.js and add the following code there:

hbspt.forms.create({ 
 region: "na1", 
 portalId: "44152290", 
 formId: "0f64900d-bOf2-4d41-a824-4f783b56b600", 
 target: "#myNewForm" 
}); 

Then you would place these two script tags somewhere on the page:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script> 
<script charset="utf-8" type="text/javascript" src="../hubspot-create-form.js"></script> 

(2) Use non-HubSpot forms

You can have a non-HubSpot form on your website and still record that form submission in HubSpot.

Note that this method requires HubSpot tracking code to be present on your website, which also comes in a script tag. This is something that is often placed on the entire website and can help collect more data in general.

Here is the knowledge base article describing the steps to make it work.

(3) HubSpot API

This would be the most complex solution and would require developer support, but this would allow creating contacts and recording their form submissions with the help of HubSpot CRM API.

For more information, you can take a look at the API documentation for Contacts.

---

Did my post help answer your query? Help the community by marking it as a solution.