CODEWITHSUNDEEP
javascripthtmlcontent-security-policy
brio97
brio97

Reputation: 91

Loading script and manifest violates Content Security Policy directives

I'm trying to develop a Progressive Web App which includes an external JavaScript, an external CSS, JQuery library and manifest and service worker.

I set up Content Security Policy to load these and I'm running it on localhost and Google Chrome.

Here is my HTML head:

<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' https://*; manifest-src 'self'">
    <script src="example.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 
    <!-- <script src="jquery.min.js"></script> -->
    <link rel="stylesheet" type="text/css" href="example.css">
    <link rel="manifest" href="manifest.json">
    <script>
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('sw.js').then(function(registration) {
                console.log('Service worker successfully installed. Scope:', registration.scope);
            }).catch(function(error) {
                console.log('Service worker installation failed:', error);
            });
        }
    </script>
    <link rel="icon" href="../images/favicon.ico" type="image/x-icon" />
    <title>xxx</title>
</head>

I would expect everything to run correctly, but instead I'm getting these errors that go against my declaration:

Refused to load the script 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('xxx'), or a nonce ('nonce-...') is required to enable inline execution.

Refused to load manifest from 'http://localhost:7681/manifest.json' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'manifest-src' was not explicitly set, so 'default-src' is used as a fallback.

Even if I included the 'unsafe-inline' keyword, enabled loading scripts from https and I did not declared "default-src 'none'", so I think I'm missing something. What is blocking my scripts from loading?

EDIT
I understood what was going wrong: the server is running on libwebsockets, which by default uses a very strict content security policy. Changing lws options, the CSP directives are correctly loaded from the HTML head.

Upvotes: 5

Views: 16890

Answers (1)

jro
jro

Reputation: 940

The source for CSP directives is specified here.

Quoting from the source above:

The site's address may include an optional leading wildcard (the asterisk character, '*')

However, this still requires a valid site address. Therefore https://* is not a valid CSP source and is hence ignored.

To allow scripts to be loaded from all https sites:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' https:; manifest-src 'self'">

Upvotes: 4

Related Questions