• caglararli@hotmail.com
  • 05386281520

CSP : Different hash for the same external library (Firefox vs Chrome)

Çağlar Arlı      -    10 Views

CSP : Different hash for the same external library (Firefox vs Chrome)

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/bootstrap@4.3.1/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 ?