Remove old modules and use react web components.

[stefrado]

Summary

Remove old module mounting react method and use cleaner web component mounting method.

Issue References

• Taiga User Story:
• Taiga Issue:
• Taiga Dimpact Issue:
• Github Issue:

Checklist

• CHANGELOG.rst updated
  • Deployment notes added
  • Breaking changes flagged
• Documentation updated
• Codecov report reviewed for untested lines
• Storybook component updated/created
• Vitest tests added/updated
• Updated the docker-compose.yml environment variables
  • Created an issue in https://github.com/maykinmedia/charts/ for new environment
    variables

The best way to fix this issue is to ensure the JSON data is robustly validated and sanitized after it is retrieved from the DOM, before it is parsed and used in the application. Specifically, after parsing, all fields that can influence what is rendered (such as items, selected_id, etc.) should be validated to ensure they match expected types/values, and any string outputs should be escaped or rendered safely to avoid injection.

The code for parsing JSON should be enhanced to:

• Validate the parsed data structure against the expected shape.
• Optionally strip or encode any unwanted HTML or script in string values.
• Return undefined or throw if validation fails.

We should update getJsonFromScriptTag (and/or parseJsonSafely) to perform additional schema validation. This can be achieved with a type-guard or a schema checking function, passing in a validator where we call the util. For type-safe validation, we may use a well-known external library such as zod for runtime type-checking, or we can write a custom utility that validates each field manually.

The changes are fully contained within src/open_inwoner/react/lib/getJsonScriptData.ts, adding schema or type validation and defensive error handling.

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 92.32%. Comparing base (cd3ee5f) to head (daa30b3).
⚠️ Report is 9 commits behind head on develop.

Additional details and impacted files

@@           Coverage Diff            @@
##           develop    #1986   +/-   ##
========================================
  Coverage    92.32%   92.32%           
========================================
  Files         1206     1206           
  Lines        45299    45309   +10     
========================================
+ Hits         41822    41833   +11     
+ Misses        3477     3476    -1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[swrichards]

@stefrado can we explore whether we can do away with the entire parse-JSON-from-tag approach, and pass it directly as an attribute?

Suggested change

	<action-list>
	<action-list data-items="{{ feed_item_list_json }}">

Where feed_item_list_json is json.dumps'ed in the backend.

Then in the web component you could do something like:

const items = JSON.parse(this.getAttribute('data-config'));

I think this would make the code simpler and easier to follow.

[swrichards]

(Same for the KvK branch selector)