Icycoide/searxng
1
0
Fork 1
mirror of https://github.com/searxng/searxng.git synced 2025-09-03 08:48:35 +02:00
Code Issues Projects Releases Packages Wiki Activity

[fix] move initial "JS is enabled?" (no-js) to client side

Browse source 
To avoid an `unsafe-inline` in the CSP header, the JS code must be moved to the
client side [1].

The `<script>` tag at the end of the HTML originates from the old implementation
of the JS client. Since PR-5073 [2] was merged, the `type` is now `module`, and
the tag must be moved to the beginning of the HTML.

> We need to inline this "JS is enabled?" thing to prevent layout shifts and
> temporary "no JS enabled" visuals as ESM scripts loads and evals everything
> deferred from initial DOM render [3]

That's true in theory, but in practice, this effect is unnoticeable because it's
masked by another effect (which we can't avoid): If we load the page with a
severely throttled connection, the HTML (result list) takes a long time to
load. Then the CSS is loaded, which also takes longer. Until the CSS has loaded,
there's no layout. A layout shift is therefore largely determined by the loading
of the HTML and CSS itself.

The running times of the ESM script can be neglected compared to the loading
times of HTML & CSS.

[1] https://github.com/searxng/searxng-docker/pull/424#issuecomment-3199494256
[2] https://github.com/searxng/searxng/pull/5073
[3] https://github.com/searxng/searxng-docker/pull/424#issuecomment-3199622504
This commit is contained in:
Markus Heiser 2025-08-19 10:05:42 +02:00 • committed by Markus Heiser
parent 41a4a3e224
commit d2b3c92e81
3 changed files with 10 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

1
client/simple/src/js/core/index.ts
View file

@ -1,5 +1,6 @@
// SPDX-License-Identifier: AGPL-3.0-or-later
import "./nojs.ts";
import "./router.ts";
import "./toolkit.ts";
import "./listener.ts";

8
client/simple/src/js/core/nojs.ts Normal file
View file

@ -0,0 +1,8 @@
// SPDX-License-Identifier: AGPL-3.0-or-later
import { ready } from "./toolkit.ts";
ready(() => {
document.documentElement.classList.remove("no-js");
document.documentElement.classList.add("js");
});

7
searx/templates/simple/base.html
View file

@ -10,6 +10,7 @@
<meta name="robots" content="noarchive">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}{% endblock %}{{ instance_name }}</title>
<script type="module" src="{{ url_for('static', filename='js/searxng.core.min.js') }}" client_settings="{{ client_settings }}"></script>
{% block meta %}{% endblock %}
{% if rtl %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/searxng-rtl.min.css') }}" type="text/css" media="screen">
@ -19,11 +20,6 @@
{% if get_setting('server.limiter') or get_setting('server.public_instance') %}
<link rel="stylesheet" href="{{ url_for('client_token', token=link_token) }}" type="text/css">
{% endif %}
<script>
// update the css
document.documentElement.classList.remove('no-js');
document.documentElement.classList.add('js');
</script>
{% block head %}
<link title="{{ instance_name }}" type="application/opensearchdescription+xml" rel="search" href="{{ opensearch_url }}">
{% endblock %}
@ -83,6 +79,5 @@
{% endfor %}
</p>
</footer>
<script type="module" src="{{ url_for('static', filename='js/searxng.core.min.js') }}" client_settings="{{ client_settings }}"></script>
</body>
</html>