CSP violation in Stimulus implementation

[Mat-Sedkowski]

Are you requesting a feature, reporting a bug or asking a question?

Reporting a bug / Asking a question

What is the current behavior?

I have an issue with your library after we turned on CSP. Current implementation in rails app via Stimulus controller is prone to CSP violation both in inline styles and script.

What is the expected behavior?

Implementation where I don't need to apply inline code/styles or a method to fetch nonce from page meta

How would you reproduce the current behavior (if this is a bug)?

1. Add survey-jquery in package json
2. Import it into your stimulus controller
3. Use in app

Provide the test code and the tested page URL (if applicable)

Test code

// Stimulus controller 
import { Controller } from '@hotwired/stimulus';
import { Helpers } from '../../utils/helpers';
import * as Survey from 'survey-jquery';

export class SurveyjsQuestionnaireFormControllerShared extends Controller {

connect() {
    Survey.FunctionFactory.Instance.register('age', this.age);
    Survey.FunctionFactory.Instance.register('ageByMonth', this.ageByMonth);
    Survey.FunctionFactory.Instance.register('ageByDays', this.ageByDays);
    // Survey.StylesManager.Enabled = false; <- Tried this doesn't work 
    // Problematic line 1 - inline styles issue
    Survey.StylesManager.applyTheme('bootstrap');

    this.survey = this.buildSurvey();
}

buildSurvey = () => {
    const requiresQuestionnaire = this.data.get('requires-questionnaire') == 'true';
    // Problematic line 2 - inline script issue
    const survey = new Survey.Model(this.data.get('configuration'));

    survey.ignoreValidation = !requiresQuestionnaire;
    survey.checkErrorsMode = 'onValueChanged';

    return survey;
  };
}

Specify your

• browser: chrome
• browser version: 125.0.6422.60
• surveyjs platform (angular or react or jquery or knockout or vue): jquery
• surveyjs version: 1.11.2

[andrewtelnov]

@Mat-Sedkowski We are currently using knockoutJS in survey-jquery. You can use survey-jquery-ui with survey-core that we have just released. It uses pReact version of our library.
knockoutJS is an old library and it uses eval inside the library. There is nothing wrong with it since it uses eval for their templates.

Thank you,
Andrew

[Mat-Sedkowski]

Thank you, CSP issue solved.

[marat-y]

I've switched to survey-jquery-ui and our survey.render(container) seems to stopped working.

I've compared render method definitions between libraries and here's what I've found:

survey-jquery:

function(element) {
                      if (element === void 0) {
                        element = null;
                      }
                      this.implementor.render(element);
                    }

survey-jquery-ui:

function(element) {
                      if (element === void 0) {
                        element = null;
                      }
                      if (this.renderCallback) {
                        this.renderCallback();
                      }
                    }

Any ideas on what I'm missing to make survey-jquery-ui render surveys properly? Currently nothing's rendered and I don't see any JS console errors.

    "survey-core": "^1.11.5",
    "survey-jquery-ui": "^1.11.5",

[tsv2013]

@marat-y Thank you for pointing this out. We'll fix it. Meanwhile we decided to deprecate the survey-jquery-ui package: actually it is the survey-react-ui package with the preact engine embedded. It uses jQuery to add three rendering functions to it. We decided to replase this package with the survey-ui one that will not reference jQuery and can be uased as a blackbox in vanilla JS projects.