Fix Framework/tutorial: CSP violation from inline scripts; use ES modules + docs refresh #3039
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Adjust the time-server readme Grammar fixes Remove the compatibility.js include
Ehevi
force-pushed
the
time-server-tutorial-fix
branch
from
26eb435 to
8ef7244
Compare
Ehevi
commented
Sep 6, 2025
| <!doctype html> | ||
| <title>Tutorial - Time server</title> | ||
| <link rel="stylesheet" href="/css/src/bootstrap.css"> | ||
| <script src="/js/src/compatibility.js"></script> |
Author
There was a problem hiding this comment.
compatibility.js is a legacy shim that isn’t shipped by current@aliceo2/web-ui builds and isn’t needed for this tutorial; keeping it produced a 404, so it’s removed.
Ehevi
commented
Sep 6, 2025
Comment on lines
-7
to
+9
| <script type="module"> | ||
| import sessionService from '/js/src/sessionService.js'; | ||
| sessionService.loadAndHideParameters(); | ||
| </script> | ||
| <script type="module" src="./session.js"></script> | ||
|
|
||
| <!-- Main application controller --> | ||
| <script type="module"> | ||
| // Import MVC | ||
| import {mount} from '/js/src/index.js'; | ||
| import view from './view.js'; | ||
| import Model from './Model.js'; | ||
|
|
||
| // Start application | ||
| const model = new Model(); | ||
| const debug = true; // shows when redraw is done | ||
| mount(document.body, view, model, debug); | ||
|
|
||
| // Expose model to interract with it the browser's console | ||
| window.model = model; | ||
| </script> | ||
| <script type="module" src="./app.js"></script> |
Author
There was a problem hiding this comment.
Loading the controller via ES modules avoids inline <script> so the tutorial works under the default CSP (script-src 'self').
Ehevi
commented
Sep 6, 2025
| mount(document.body, view, model, debug); | ||
| ``` | ||
|
|
||
| This avoids inline `<script>` and works with the framework’s default Content Security Policy. |
Author
There was a problem hiding this comment.
Added a short CSP explanation to preempt confusion if someone tries to inline scripts and hits browser blocks.
Ehevi
commented
Sep 6, 2025
| The following `this._prepareWebSocket()` method (note that by convention all method names prepended with `_` are private) listens to two events: | ||
| - `authed` - notifies that client has successfully authorized by the server (automatically generated by server) | ||
| - `server-date` - custom message that includes server's time (as defined in the [Explaining server side](#explaining-server-side) section - look for `wsServer.bind`) | ||
| - `server-date` - custom message that includes server's time (as defined in the [Server side explained](#server-side-explained) section - look for `wsServer.bind`) |
Author
There was a problem hiding this comment.
It looks like the correct section to link to is:
https://github.com/AliceO2Group/WebUi/blob/dev/Framework/docs/tutorial/time-server.md#server-side-explained
The previous anchor #explaining-server-side does not exist.
Ehevi
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I DON'T have JIRA ticket
if it is new feature explain how plan to use ittest are addedFLP integration tests were ran successfulSummary
Make the tutorial run under the framework’s default Content Security Policy (CSP) and align the docs with the actual files. The previous tutorial used an inline
<script>which modern browsers block when CSP includesscript-src 'self'. It also referenced a legacycompatibility.jsthat isn’t shipped, causing a 404. This PR moves controller code into ES modules, removes the unused script, fixes a case-sensitive import, and updates the tutorial document.What changed
Framework/docs/tutorial/public/index.html<script src="/js/src/compatibility.js"></script>(not shipped; produced 404).Framework/docs/tutorial/public/session.js(new)sessionService.loadAndHideParameters().Framework/docs/tutorial/public/app.js(new)viewandModeland callsmount(document.body, view, model, true).window.modelfor easy console debugging in the tutorial (non-production).Framework/docs/tutorial/time-server.mdsession.jsandapp.js.Modelimport case (./Model.js) to match the file name.Why
Default CSP includes
script-src 'self', which blocks inline modules; external ES modules keep the example secure and working out-of-the-box.compatibility.jsis a legacy shim that isn’t included by current builds and isn’t needed here; leaving it causes a 404.Import case (
Model.jsvsmodel.js) matters on case-sensitive filesystems and previously caused a 404.Scope / risk
Docs + tutorial assets only. No framework/runtime behavior changes. Low risk.