Fix Framework/tutorial: CSP violation from inline scripts; use ES modules + docs refresh - #3039
Fix Framework/tutorial: CSP violation from inline scripts; use ES modules + docs refresh#3039Ehevi wants to merge 10 commits into
Conversation
Adjust the time-server readme Grammar fixes Remove the compatibility.js include
| <!doctype html> | ||
| <title>Tutorial - Time server</title> | ||
| <link rel="stylesheet" href="/css/src/bootstrap.css"> | ||
| <script src="/js/src/compatibility.js"></script> |
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.
Sorry, something went wrong.
| <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> |
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').
Sorry, something went wrong.
| mount(document.body, view, model, debug); | ||
| ``` | ||
|
|
||
| This avoids inline `<script>` and works with the framework’s default Content Security Policy. |
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.
Sorry, something went wrong.
| 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`) |
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.
Sorry, something went wrong.
Reviewers
At least 1 approving review is required to merge this pull request.
I DON'T have JIRA ticket
Summary
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 includes script-src 'self'. It also referenced a legacy compatibility.js that 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
Framework/docs/tutorial/public/session.js (new)
Framework/docs/tutorial/public/app.js (new)
Framework/docs/tutorial/time-server.md
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.js is a legacy shim that isn’t included by current builds and isn’t needed here; leaving it causes a 404.
Import case (Model.js vs model.js) matters on case-sensitive filesystems and previously caused a 404.
Scope / risk
Docs + tutorial assets only. No framework/runtime behavior changes. Low risk.