2Nis
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:
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 ?
