Content Security Policy without unsafe-inline or unsafe-hashes

[OldMarketingDev]

Hi, the company I work for is in need of a stricter CSP. We use HubSpot for forms and the cookie consent banner.

I have added all the HubSpot domains(from here) to the appropriate content types in my Content-Security-Policy but there are still issues caused by v2.js and banner.js.

For v2.js the issue seems to be the inline-styles for the captcha being added. I am including the `cssRequired: ''` in the form config object and that fixed all inline style related errors except for the inline style elements with an id of `hs-form-style{uniquevalue}` that contain styling for `#hs-outer-captcha-target` and it's children. Is there a way around this without either disabling the captcha or adding `unsafe-inline` defeating the entire purpose of a CSP?

With banner.js the issue seems to be with the use of `createContextualFragment()`. Is there a way to disable this in the settings for the banner or is there an alternate way to include the banner that won't ask for 'unsafe-inline`?

I cannot believe how many posts I've seen that just say "use `unsafe-inline`" as if that is a good practice.

Is there anything we can do here becuase this has been driving me insane.

[TomM2]

Hey @OldMarketingDev I'd say you know a lot more than me about good CSP practice, but just out of curiosity what is it you're looking to not pull from? 

Even if you use a raw html form in HubSpot, it's going to pull some inline styling from the HubSpot servers. v2.js is always going to call HubSpot and there's no way to edit HubSpot's CSP as it's a fully managed system. 

Recaptcha will also always call google's servers and they don't provide a way to change their CSP either. 

Banner.js doesn't have any customisation options. 

They all do however have apis, if you need full control over what's called/can't call upon any external resources you'll need to create your own frontend and integrate is through the apis. 

Cookie banner api. 

Forms api. 

Outside of this, HubSpot is always going to load their scripts with their own CSP and there's no way to change this. 

[OldMarketingDev]

Hi Tom,
Thanks for your response.

For clarity, the site I develop and mange is built with WordPress hosted on AWS and does not use HubSpot CMS. HubSpot is used for marketing purposes such as forms throughout the site and as a simple, GDPR compliant cookie consent banner with events we can listen for. So I'm not asking to "not pull" from any source, as I have required third party scripts allowlisted(including the HubSpot ones listed here).

For the CSP(Content Security Policy), I'm only concerned about the CSP for the site I manage - it shouldn't be effected by HubSpot's or Googles CSP. The issue is related to HubSpot adding extra inline elements that are blocked(or will be) by the CSP of the site I manage. Adding "unsafe-inline" or "unsafe-hashes" or anything with "unsafe" is not going to work.

I've looked into both the form and banner APIs a little bit but have been hesitant to spend time building out a custom form submission or banner solutions when I see notes in the documentation along the lines of not being able to programatically submit forms that include ReCaptcha(see this endpoint, specifically the "Before you get started" section). I cannot use forms without ReCaptcha as it's important for preventing spam - this is a marketing site directing people to self-service sales or connecting a potential client with the appropriate member of the sales team via responses in some forms. The unwanted styling seems purely to hide the ReCaptcha - which I could do myself with CSS and no need for HubSpot to add this. I do not understand why an inline style block is being added to forms that have requested no additonal css(via the config option `cssRequired`). 

For the banner, the original appeal of using HubSpot for was reducing our need on extra services(geolocation, etc) to ensure visitors from the EU or California received the banner. This is less of an issue since we're now displaying the banner to all visitors so I will probably roll custom banner into the existing codebase instead of using HubSpot.

So is there any way to disable the insertion of this unwanted inline style element? Or will the site forever have errors about it being blocked by the CSP and in turn negatively impacting the PageSpeed Insights score(important for SEO) for having errors in the console.

[TomM2]

Hi @OldMarketingDev apologies it might not have been the right terminology, but HubSpot is still always going to pull from their servers to render their forms. This includes some inline styling which can't be blocked from the v2.js script. It will always load these. 

I actually wasn't aware of the lack of support for recaptcha on these. The only two options I would really see here would be: 

Create a third party form, with recaptcha and process the submission somewhere on your side with the recaptcha, then send the processed submission to the HubSpot endpoint. 

Customise the v2.js script, this would be completely unsupported and would stop any HubSpot form updates, it would likely break in the future too but it would be the only way to remove any styling injections the script is adding. 

[OldMarketingDev]

Hi Tom, sorry if this sounds blunt. I'm aware that HubSpot is going to pull from their servers when I request v2.js from them and use the form create function - that isn't an issue. It's expected and is easily added to the allowlist for a CSP. That works as described and matches expectations as it's standard practice.

My only issue is only related to the extra inline CSS being added when there are 1.) config options that exist specifically to not include the CSS and 2.) The inline style element created here via a JavaScript function in v2.js is not necessary for the form to function, it exists purely to hide the display of the captcha, something someone who is already asking for the CSS-less version of a form can probably handle.

If there is no way to disable or remove the extra inline style element created by v2.js it is ridiculous. Captchas area best practice and a necessity for any high traffic sites so removing it isn't an option. HubSpots seemingly arbitrary restrictions 1.) disallowing form submission programmaticly via the api if a form includes a captcha 2.) disallowing a self-hosted or edited version of v2.js(that adds the unnessary and unwanted code) 3.) not inlcuding an option in the HubSpot admin to disable the css when a captcha is added to a form.

[Jaycee_Lewis]

Hey, @OldMarketingDev 👋 Please note @TomM2 is not a HubSpot engineer nor is he responsible for product updates. He is a community member, community champion, and all around awesome and helpful human. 

For your feedback on the product, you have two options:

• you can create an idea in the Ideas forum
• the fine folks on our Dev Rel team just rolled out this feedback form for the exact type of feedback you shared. You can find the form and other details here https://community.hubspot.com/t5/Developer-Announcements/%EF%B8%8FAnnouncing-the-new-Developer-Feedb... 

Best,

Jaycee

[OldMarketingDev]

Hi @Jaycee_Lewis  I appreciate the links to the Ideas Forum and post announcing the feedback tool.
I'm sure @TomM2 is a great guy and community member. I can see that he is not a member of the HubSpot team and only trying to help in his responses.

I was trying to clarify my issue and I apologize if my verbose response could be misinterpreted in some way as a demand that he personally fix my problem.

Any stylized text in italics or bold is purely to draw attention to the original ask and not any attempt to add an aggressive tone towards another community member or HubSpot.

Thanks,
Jamie