Allowing inline scripts with CSP SHA-256 in Firefox

I am having trouble getting whitelisting by checksum to work in Firefox (52.0.2, windows). Despite Firefox supporting content security policy version 2 according to caniuse, the checksumming feature seems to not be accepted.

When Chrome blocks an inline script, it provides the necessary sha-256 code on the console. Adding this code to the CSP rules successfully whitelists the script. Interestingly, the checksum matches the one calculated at .

However, Firefox refuses to acknowledge it.

I have noticed that the example in the MDN docs uses base-16 encoding instead of base-64 for the checksum. https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src

Even when using the MDN example, I encounter the same issue. (Chrome also rejects with the base-16 encoding). I have tried various iterations similar to the following:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy"
          content="script-src 'sha256-076c8f1ca6979ef156b510a121b69b6265011597557ca2971db5ad5a2743545f'">
    <title>Hello CSP</title>
</head>
<body>
    <script type="text/javascript">var inline = 1;</script>
</body>
</html>

Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src 'sha256-076c8f1ca6979ef156b510a121b69b6265011597557ca2971db5ad5a2743545f'”). Source: var inline = 1;.

Answer №1

To make it function properly, simply adjust the hash value like this:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Security-Policy"
        content="script-src 'sha256-B2yPHKaXnvFWtRChIbabYmUBFZdVfKKXHbWtWidDVF8='">
  <title>Hello CSP</title>
</head>
<body>
  <script type="text/javascript">var inline = 1;</script>
</body>
</html>

It's unclear why Chrome was behaving unexpectedly in your case; when I tested the provided example on Chrome, it correctly blocked the script and displayed an error message instructing to use the specified hash value

sha256-B2yPHKaXnvFWtRChIbabYmUBFZdVfKKXHbWtWidDVF8=
.

Additionally, generates the same value for var inline = 1;.

Answer №2

I couldn't quite put this issue to bed as there seemed to be some peculiarities and perplexities at play. Upon further investigation, an intriguing discovery was made:

  • Take a valid sha-256 that is compatible with both Chrome and Firefox.
  • Replace every + with -, and each / with _.

Behold! You now have a checksum that functions on Chrome but not on Firefox. Considering the various Base64 variants, this format seems plausible.

Interestingly, it appears that the Dartium browser, which is built on Chrome 45, generates the checksum in the "alternative format," potentially explaining how it ended up on my clipboard.

This method is exclusive to Chrome:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'sha256-LqkgOOr2rKDFd7Yl4hZ4H8nB0Stbc-RDo573pA7E/XU='">

    <title>Hello CSP</title>

    <script type="text/javascript">alert("running");</script>
</head>
</html>

Answer №3

Update on August 22nd, 2022: A bug was reported in Bugzilla at this link, and it appears that a fix is currently in the draft stage.

Encountered this issue today. It appears that Firefox only supports base64 url-safe encodings, while Chrome is more lenient in its support.

According to the w3c specification found at this URL:

Note: The base64-value syntax allows for both base64 and base64url encodings. Although treated as equivalent during processing of hash-source values, nonces strictly require a string match. Browsers are expected to support both types of encoding, hence why mdemonic's solution may produce results.

I have brought this issue to the attention of the Firefox team. Perhaps there will be some adjustments made in this area!

In conclusion, when creating CSP hashes, opt for the base64 url-safe variant. If issues arise in Chrome, consider utilizing both the safe and unsafe variants.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble loading a JSON file in three.js?

I have been trying to load a JSON image in Three.js by following a tutorial video. However, despite copying the code exactly as shown in the video, I am not able to see anything in the browser when using my own images. The JSON file is downloaded from clar ...

Obtain the session value in React

Currently, I am working on a React app along with a server-side application. I have successfully created a user session on the server side and now I want to retrieve its value in my React app. Can someone guide me on how to achieve this? const [user,setUse ...

Extract JSON data from a web address using JavaScript

A unique system has been created to parse JSON and style it using CSS. Instead of outputting the data within the script, the goal is to retrieve data from a local or remote URL. <script type='text/javascript'> $(window).load(function(){ va ...

Is it necessary to compile the React JavaScript project before uploading it to npm?

Hey there, I'm currently in the process of publishing a React JavaScript component on npm. I have a question regarding whether or not I need to build the project and deploy the build folder. Your input would be greatly appreciated. Thanks! ...

Navigate directly to a designated element in a React component without the need to scroll when clicking a link

When viewing a user's profile in React, clicking on an image currently scrolls to that specific image within the entire images page. However, I am looking to modify this behavior so that it navigates directly to the image element without any scrolling ...

Error opening infowindow with Google Maps API V2 when using data stored in local storage

Currently, I am in the process of integrating local storage into the map feature for GeoDirectory on WordPress. This functionality allows the storing of map marker and WordPress post data in local storage, which can then be loaded when a user returns to th ...

To display the user's input value in the console log upon clicking

Having trouble displaying the user's input value in the console when the button is clicked. function submit(){ var userInput = document.getElementById('input_text').value; console.log(userInput); } ...

Use the 'url' parameter to pass into the ajax function when using jQuery for online requests

I am working with an ajax code that retrieves data from an XML file locally. <script> function myFunction() { $("#dvContent").append("<ul></ul>"); $.ajax({ type: "GET", url: "test.xml", ...

Tips for enhancing a search algorithm

I am currently working on implementing 4 dropdown multi-select filters in a row. My goal is to render these filters and update a new array with every selected option. Additionally, I need to toggle the 'selected' property in the current array of ...

What is the best way to anticipate a return phone call?

Looking to retrieve the largest date from a folder by reading its contents. https://i.stack.imgur.com/KYren.png Here is the code snippet to read the folder, extract filenames, and determine the largest date (excluding today): async function getLastDate ...

How to eliminate the validation icon from a select tag in Bootstrap 5?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="23414c4c57505751425363160d110d11" ...

Converting Django templates with HTML and CSS into downloadable PDF files

Struggling to convert HTML & CSS into a downloadable PDF page using Django and Weasyprint. The current tutorial isn't working as expected - I need the PDF to render the current page when the user clicks on the download button, automatically downloadin ...

JavaScript format nested data structure

For my latest project, I am working on a blog using Strapi combined with Nuxt. To fetch the categories and articles data for my blog, I send a JSON object from my front-end application using Axios. { "data": [ { "id": 1, ...

Designing this unique shape using CSS3 to create a sleek drop-down container

My goal is to design something that resembles the following: The challenge lies in my preference to contain it within a single div, considering the drop-down features an inner shadow and a drop shadow. Thank you in advance, and please feel free to ask fo ...

Disappear all nested div elements

In my current webpage project, I am attempting to achieve the following functionality: When a user clicks on a link with the id min_reg, it should trigger an animation for the div with the id ftr_form_cntr, and simultaneously display another div called tcr ...

Listening to a sequence of mp3 tracks consecutively

I'm currently working on a project that involves playing a series of mp3 files consecutively. However, I've encountered an issue with my code snippet below: Here's the code snippet: function playAudio(){ var au = document.getElementById( ...

What is the best method to determine the current scroll position using JavaScript?

Presently, I am focusing on implementing scroll to top button functionality. The button appears when the content is scrolled to the bottom. My goal is to store the last position when the scroll to top button is clicked so that the user can return to that ...

Having trouble choosing an item from the Select2 drop-down menu

I have been developing an application that incorporates Select2 (version 3.5.1). The HTML used to create the dropdown / autocomplete field is as follows: <input id="mySelect" class="form-control" type="hidden"> The snippet above includes the form-c ...

Enabling communication between two single file components

Is there a way for two single file components to communicate with each other? Consider this scenario: I have two components, Content.vue and Aside.vue I want to be able to trigger an update in the Content.vue component when a button inside Aside.vue is c ...

What is the best way to implement multilanguage support in nodejs without relying on cookies or external modules?

Currently, I am in the process of transitioning all my projects to node.js in order to enhance my JavaScript skills. Using Node.js along with the Express module, one of my clients who runs a translation company has requested that I incorporate two language ...