Load custom Javascript file from theme #4280

New Issue

OVERLORD · 2026-02-05T08:24:53+03:00

OVERLORD commented

2026-02-05 08:24:53 +03:00

Originally created by @RobinNiemann on GitHub (Oct 26, 2023).

Attempted Debugging

I have read the debugging page

Searched GitHub Issues

I have searched GitHub for the issue.

Describe the Scenario

My theme needs a small amount of Javascript. How can I load that Javascript file from my themes folder (e.g. BookStack/themes/my_theme/js/script.js)?

What I tried and didn't work:

Put this into the Custom Head Setting on the customization page -> My customization needing that script is on the customization page itself and the Custom Head Setting is not loaded there.
Overwrite common/custom-head.blade.php or layouts/base.blade.php or layouts/parts/base-body-start.blade.php or layouts/parts/base-body-start.blade.php and add the <script> block in there -> My browser blocks inline scripts; I get the Browser-Log Message "Content-Security-Policy: The page's settings blocked the loading of a resource on inline ('script-src')"
- This was inspired by this issue wich is pretty similar but the final solution wasn't presented there and I failed to figure out the details.

What worked but is no clean solution:

I put the script.js file into the folder Bookstack/public/dist. From there it is loaded, but this would mean that I would have to create my own Docker Image just to add that one file

Exact BookStack Version

v23.08.3

Log Content

No response

Hosting Environment

Docker Compose on local machine

Originally created by @RobinNiemann on GitHub (Oct 26, 2023). ### Attempted Debugging - [X] I have read the debugging page ### Searched GitHub Issues - [X] I have searched GitHub for the issue. ### Describe the Scenario My theme needs a small amount of Javascript. How can I load that Javascript file from my themes folder (e.g. BookStack/themes/my_theme/js/script.js)? What I tried and didn't work: - Put this into the Custom Head Setting on the customization page -> My customization needing that script is on the customization page itself and the Custom Head Setting is not loaded there. - Overwrite `common/custom-head.blade.php` or `layouts/base.blade.php` or `layouts/parts/base-body-start.blade.php` or `layouts/parts/base-body-start.blade.php` and add the <script> block in there -> My browser blocks inline scripts; I get the Browser-Log Message "Content-Security-Policy: The page's settings blocked the loading of a resource on inline ('script-src')" - This was inspired by [this issue](https://github.com/BookStackApp/BookStack/issues/4581) wich is pretty similar but the final solution wasn't presented there and I failed to figure out the details. What worked but is no clean solution: - I put the script.js file into the folder `Bookstack/public/dist`. From there it is loaded, but this would mean that I would have to create my own Docker Image just to add that one file ### Exact BookStack Version v23.08.3 ### Log Content _No response_ ### Hosting Environment Docker Compose on local machine

OVERLORD added the 🐕 Support label 2026-02-05 08:24:53 +03:00

OVERLORD closed this issue

2026-02-05 08:24:56 +03:00

OVERLORD commented

2026-02-05 08:25:06 +03:00

@ssddanbrown commented on GitHub (Oct 26, 2023):

Yeah, there's no ideal option for public files right now. I have an existing open issue for this in #3904.

My browser blocks inline scripts;

So my advise would be to override base-body-start.blade.php for this kind of thing.
You will need to add tags to befriend CSP. I'd usually start with this:

<script nonce="{{ $cspNonce }}" type="module">
  // code
</script>

The nonce="{{ $cspNonce }}" makes CSP happy.
The type="module" is optional but makes the script deferred, so no need for listening to events for waiting for the DOM to be loaded before targeting elements.

I put the script.js file into the folder Bookstack/public/dist. From there it is loaded, but this would mean that I would have to create my own Docker Image just to add that one file

You may be able to instead map a volume into this directory, or use the existing public/uploads directory which is commonly provided/advised as a volume mount location.

@ssddanbrown commented on GitHub (Oct 26, 2023): Yeah, there's no ideal option for public files right now. I have an existing open issue for this in #3904. > My browser blocks inline scripts; So my advise would be to override `base-body-start.blade.php` for this kind of thing. You will need to add tags to befriend CSP. I'd usually start with this: ```html <script nonce="{{ $cspNonce }}" type="module"> // code </script> ``` The `nonce="{{ $cspNonce }}" ` makes CSP happy. The `type="module"` is optional but makes the script deferred, so no need for listening to events for waiting for the DOM to be loaded before targeting elements. > I put the script.js file into the folder Bookstack/public/dist. From there it is loaded, but this would mean that I would have to create my own Docker Image just to add that one file You may be able to instead map a volume into this directory, or use the existing `public/uploads` directory which is commonly provided/advised as a volume mount location.

OVERLORD commented

2026-02-05 08:25:09 +03:00

@RobinNiemann commented on GitHub (Oct 27, 2023):

Thank you for your quick answer. I tried the inline script in base-body-start.blade.php and it worked!

Maybe I'll try changing this into an endpoint some time. But I defenitely like the issue you linked.

@RobinNiemann commented on GitHub (Oct 27, 2023): Thank you for your quick answer. I tried the inline script in `base-body-start.blade.php` and it worked! Maybe I'll try changing this into an endpoint some time. But I defenitely like the issue you linked.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#4280