Question T19657
Visible to All Users

Inline Styles are Breaking CSP Support

created 4 months ago

Hi,

Can I ask you to take a look at SurveyJS usage of style attribute of some form elements? We've raised this on Github but response was that it's going to backlog - https://github.com/surveyjs/survey-library/issues/8714

When do you think something like this could be fixed?

Answers approved by surveyjs Support

created 4 months ago

Hello,
We've already discussed the issue you've reported, and our developer Serge has been in touch with you.

However, I would like to follow up and understand the reason behind your decision to strictly prohibit all inline styles. Inline styles can serve functional purposes that are difficult to replace in some cases. In the specific code you mentioned, it would be relatively easy to move the style to an external CSS file.

However, we use inline styles in other parts of our codebase. For example, the updateRootStyle() function within survey-element.ts calculates various CSS attributes dynamically, and these calculations cannot be easily replaced by CSS classes.

Furthermore, many modern frameworks, such as Vue, dynamically insert inline styles through directives like v-show for conditional rendering. These frameworks rely on inline styles to provide essential functionality, and blocking them might disrupt these functionalities and affect the overall performance and behavior of web applications. This being said, we're curious whether a blanket ban on inline styles is necessary.

Could you share more about what led to the strict policy decision? Understanding your specific concerns would help us better address your needs.

I look forward to your reply.

    Comments (2)

      Hi,

      It’s a recommended practice to not to use “unsafe-inline” . Please take a look at this documentation: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src#unsafe_inline_styles

      Code
      Unfortunately it’s not possible to allow only inline styles withstyleattributes and disallow styles with “<style />”. Latter should be created with “nonce” attribute.

      I don’t know details of Vue framework but looks like they’re not using “style” attribute - just use “v-style” to keep styles that should be applied to element. That’s not automatically processed by browser.

      So in a nutshell - it’s a security thing and CSP recommendation is not to allow them.

      Best Regards,

      Krzysztof Adamski
      kris.adamski@medihive.com

      On 3 Sep 2024, at 15:28, 'Jane [surveyjs Support]' via Admin for Technology accounts <techadmin@webdoctor.ie> wrote:

        Hello Krzysztof,
        Thank you for the follow-up.

        Eliminating inline styles may require significant changes to how styles are currently managed in certain parts of our codebase. As such, fully eliminating inline styles might take some time. We’ve noted down this inquiry for further consideration.

        Please let me know if you have any further questions.