Video Player - Javascript Nonce

[trumblejoe]

I'm trying to add a custom component to create a video player and I can't get the nonce to work. For clarification the basic component does somewhat render but is missing all script elements.

Console Error,

Content-Security-Policy: The page’s settings blocked an inline script (script-src-elem) from being executed because it violates the following directive: “script-src 'self' 'nonce-640784687999361223'”. Consider using a hash ('sha256-jAJ4SIM5Un6S08Qa/apxZX/M+87hG7IFTSnBnqJCxjE=') or a nonce.

The script tag for the web component,

-- Web Component definition
<script nonce="{{@csp_nonce}}">
class VideoPlayer extends HTMLElement {

That rendered in the browser console as,

-- Web Component definition
<script nonce="">
class VideoPlayer extends HTMLElement {

But from what I read, it rendering as nonce="" in the browser console might be a security feature in the Firefox.

Top-level sql from videoplayer.sql

select 
    'http_header'     as component,
    'text/html' as "Content-Type";
select 
    'shell-empty' as component,
'
-- Web Component definition
<script nonce="{{@csp_nonce}}">

[trumblejoe]

My videoplayer.sql file.

videoplayer.sql

[trumblejoe]

I was able to fix it with the following at the top of my videoplayer.sql file,

set nonce = sqlpage.random_string(64);
select 'http_header' as component, 'script-src ''self'' ''nonce-' || $nonce || '''' as "Content-Security-Policy";
select 
    'shell-empty' as component,
'
<script nonce="' || $nonce || '">

Is this proper to address at the page-level rather than script tag level or is it curmudgeonly? I was under the impression the Content Security Policy was already being set to the equivalent of script-src 'self' 'nonce by the sql-page app default settings.

[trumblejoe]

This is sort of an additional note I want to leave here, not related to the question but it's related to implementation of a video player. When trying to play video files hosted on a storage array accessed over the network, a symlink in the web_root to the storage array location will work, but you must also properly encode the special characters in the URLs.

[lovasoa]

Hello ! It looks like what you are looking for is custom components: https://sql-page.com/custom_components.sql

You should not have to use shell-empty.

[trumblejoe]

Thank you for your response. I will look into turning it into a custom component when I go to refactor this page. Right now I have it working so I'm forging ahead on some other items on this project. I really enjoy working with SQLPages, it's very easy to use and quick to develop in.

…

On Sat, Dec 20, 2025, 7:23 PM Ophir LOJKINE ***@***.***> wrote: Hello ! It looks like what you are looking for is custom components: https://sql-page.com/custom_components.sql You should not have to use shell-empty. — Reply to this email directly, view it on GitHub <#1157 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGZ55UV4QFSQMMHAK4ZSTT34CXR6VAVCNFSM6AAAAACPSWN3Q2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTKMZQHAYDMMI> . You are receiving this because you authored the thread.Message ID: ***@***.***>