1

During my implementation of a proof of concept for a CSP, I noticed that the hash value for the external library (jquery in this example) isn't the same between Firefox and Chrome and I can't figure out why.

The web pages I'm using for this test are :

test.php

<?php
    $html .= '
    <html>
        <head>
            <!-- load jquery --!>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha384-1H217gwSVyLSIfaLxHbE7dRb3v4mYCKbpQvzx0cegeju1MVsGrX5xXxAvs/HgeFs" crossorigin="anonymous"></script>

            <!-- check jquery loaded ok --!>
            <script nonce="'.$_SERVER['UNIQUE_ID'].'" >$(document).ready(function(){$("#hideme").hide();});</script>

            <!-- load bootstrap --!>
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" crossorigin="anonymous">
        </head>
        <body>
            <!-- image to hide using jquery --!>
            <img id="hideme" src="https://www.abondance.com/wp-content/uploads/2018/07/pirates-des-caraibes.jpg" width="100" height="100" alt="CSP blocked this"> <br>

            <!-- check bootstrap loaded ok --!>
            <p class="text-danger">This text represents danger.</p>
            <button id ="btn" type="button" class="btn btn-secondary">Test</button>
            <script nonce="'.$_SERVER['UNIQUE_ID'].'" src="success.js"></script>
        </body>
    </html>';

    echo $html;
?>

success.js

var btn = document.getElementById("btn");
btn.addEventListener("click", test);
function test() {
    document.getElementById("btn").className = "btn btn-success";
}

The CSP configuration for apache2 :

Header always set X-XSS-Protection: "1; mode=block"
Header always set X-Content-Type-Options: "nosniff"
Header always set X-Frame-Options: "SAMEORIGIN"
Header always set Referrer-Policy: "strict-origin-when-cross-origin"
Header always set Strict-Transport-Security: "max-age=31536000; includeSubDomains; preload"
Header always set Content-Security-Policy: "default-src 'none' ; frame-ancestors 'self' https: ; script-src 'strict-dynamic' 'self' https: 'sha384-1H217gwSVyLSIfaLxHbE7dRb3v4mYCKbpQvzx0cegeju1MVsGrX5xXxAvs/HgeFs' 'nonce-%{UNIQUE_ID}e' ; img-src 'self' https: ; style-src 'self' https: ; object-src 'none'; media-src 'self' data: https: blob: ; font-src 'self' data: https: ; frame-src 'self' https: blob: ; connect-src 'self' https: wss: ; base-uri 'self' ; form-action 'self' ; manifest-src 'self'

Accessing test.php in Chrome provides the expected result however in Firefox I get multiple errors in the console: Firefox console output

The expected result :

Hide every tag that has an id = "hideme" ; in this case the image (successful only in Chrome)
When the button Test is clicked, the button's background color changes from gray to green (successful in both browsers)

Apache version : Apache/2.4.58 (Debian)

Any idea on how to solve this issue ?

2
  • Welcome to the community. 1. This is not a programming site, we have StackOverflow for that. 2. What are you trying to achieve exactly? Apr 2 at 19:51
  • @SirMuffington the issue I'm describing isn't a programming issue but a potential CSP configuration handling. I'm simply trying to configure a content security policy that would allow the successful execution of both goals described in "The expected result" on multiple browsers.
    – Marc
    Apr 4 at 7:29

1 Answer 1

0

I cannot reproduce this problem on Firefox 124.0.1. The SHA-384 hash is calculated correctly (1H217gwSVyLSIfaLxHbE7dRb3v4mYCKbpQvzx0cegeju1MVsGrX5xXxAvs/HgeFs) and accepted. If you have an older Firefox version, then the first step is to upgrade. Support for hashes of external scripts is relatively new (supported since Firefox 116), and there may very well be bugs in earlier implementations.

If the problem occurs even in current Firefox versions, go through the usual debugging steps.

  • Disable any browser extensions that might mess with CSP
  • Create a minimal example that only contains the relevant code. Get rid of everything else.
  • Download the jquery script and include it as a local file to rule out any problems related to the Google APIs CDN
  • Use a network sniffer to check if the correct script content is transmitted to the browser
  • If you haven't found the problem so far, this could indeed be an incorrect hash calculation. File a bug report.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .