How should the nonce be properly set in the csp policy?

I've been attempting to incorporate a nonce into the csp policy but it's not functioning as anticipated.

Here's the code snippet I'm currently using for testing purposes:

server.js

  express.use(function(req, res, next) {
    res.set({
      "Content-Security-Policy":"script-src 'self' 'nonce-random1'"
    });
    return next();
  });

index.html

  <script nonce="random1" type="text/javascript" src="/script1.js"> 
  </script>

When checking the browser console, I encountered this error message: Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-random1'...

As an experiment, I attempted to add the source /script1.js as if it were a domain:

  express.use(function(req, res, next) {
    res.set({
      "Content-Security-Policy":"script-src 'self' /script1.js"
    });
    return next();
  });

Despite my efforts, the solution didn't work and I still received the same error message.

I checked the documentation and confirmed that the syntax was correct. I also searched for relevant questions or articles but couldn't find any useful information.

I prefer not to use unsafe-inline. Instead, I plan to implement a one-time hash as a nonce for each request in the future.

Does anyone have insight into why the nonce is not functioning as expected?

Answer №1

When it says 'no' to executing an inline event handler

This indicates that you have event handlers embedded in tags like <div onclick='handler()'> or

<body onload='some_javascript_here'>
, etc.
Your
<script nonce='random1'>...</script>
is being executed, which can be confirmed by adding console.log('I am done').

Replace inline event handlers with addEventListener() or utilize jQuery if feasible.

"Content-Security-Policy":"script-src 'self' /script1.js"

is deemed incorrect; relative URLs like /script1.js are not permitted in the directive.
Your initial CSP setting

"Content-Security-Policy":"script-src 'self' 'nonce-random1'"
is accurate.

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

Chip input component in React

I've recently upgraded to React 17 and encountered an issue with chip input fields like material-ui-chip-input not working properly. I've tried various npm packages, but none of them seem to be compatible with React version 17. Does anyone know ...

What is causing this error/bug to show up in Angular?

I encountered an error while working on my Angular project that incorporates both front-end and back-end development with Python Flask. Even though the page updates correctly, a database-related error is being displayed in the console. Below are the snippe ...

I am encountering an issue with running my Mocha tests. Can anyone provide assistance on how to solve this problem?

Could the issue be with the package.json file or am I not executing the proper command to run it? ...

The android webview is having trouble loading HTML that includes javascript

I have been attempting to showcase a webpage containing HTML and JavaScript in an android webview using the code below. Unfortunately, it doesn't seem to be functioning properly. Can someone provide assistance? Here is the code snippet: public class ...

Struggling to remove an image while using the onmouseover event with a button?

I am encountering an issue with hiding an image using the onmouseover event not applied directly to it, but rather to a button element. The desired functionality is for the image to appear when the mouse hovers over and disappear when it moves away. Here&a ...

When modifying v-model directly in a Vue instance, the Vuetify component on the screen may not update its displayed value

Within my Vue component example (utilizing Vue 2 and Vuetify 1), I have implemented an input field for user data entry. However, I am looking to programmatically alter the input field's data to a specific value. For instance, in this scenario, I aim ...

Replicate elements along with their events using jQuery

Every time I utilize ajax to dynamically generate new content using methods like .clone(), append(), etc., the newly created element loses all triggers and events that were programmed =( Once a copy is made, basic functionalities that work perfectly on ot ...

Reducer is not a standalone function in the realm of React Native's Redux framework

I need to implement a reducer in my react native application. The store constant is defined as follows: export const USER_PROFILE = 'USER_PROFILE'; This is the content of action.js file: import {USER_PROFILE} from '../constants/index'; ...

What is the best way to retrieve the ID of the input element using a jQuery object?

After submitting a form with checkboxes, I retrieve the jQuery object containing the checked input elements. var $form = $(e.currentTarget); var $inputs = $form.find("input.form-check-input:checked") Here is an example of how the inputs are stru ...

How come the styles in my CSS file aren't being applied to my images based on their class or ID?

When I apply a className or id to my img tag in my JavaScript (using React.js) and then add a style that references that id or class, the style does not get applied. However, when I do the same for a div, everything works perfectly fine. <--JavaScript- ...

Guide on importing npm packages without TypeScript definitions while still enabling IDE to provide intelligent code completion features

I am currently utilizing an npm package that lacks type definitions for TypeScript. Specifically, I'm working with the react-google-maps library. Following their recommended approach, I have imported the following components from the package: import ...

How come my express POST endpoint delivers a 404 error when the Content-Type is specified by the requester?

My express server configuration is: import express from "express"; const app = express() const port = 3000; app.use(express.json()) app.use((req, res, next) => { res.header("Access-Control-Allow-Origin", "*"); res.h ...

An argument error in IE 8 caused by an invalid procedure call

Is there a way to access the opener's class in a child window created using window.open? This works smoothly in W3C browsers, but fails in IE 8. On the other hand, I tested using an iframe and it seems to work fine across all browsers. The main goal o ...

Error: Unable to access the 'wsname' property of an undefined value

I am attempting to retrieve values from a database using the code below (login.js) $.post("http://awebsite.com/app/login.php",{ rep1: rep, password1:password}, function(data) { if(data=='Invalid rep.......') { $('input[type="text"]').c ...

If I type too quickly in the input field, it ends up displaying the incorrect div

I need to display two different dropdowns in my input field. To achieve this, I am using a method called shouldShowWarningBox that gets triggered every time the user updates the input and updates the value of showWarningBox accordingly. However, when I typ ...

How to customize the radio button style in Angular 11 by changing the text color

Hey guys, I'm working with these radio buttons and have a few questions: <form [formGroup]="myForm" class="location_filter"> <label style="font-weight: 500; color: #C0C0C0">Select a button: </label& ...

Regular expression designed to validate a 19 digit MasterCard number

I need assistance with adjusting the regex pattern for Mastercard to support both 19 digit and 16 digit cards. Can someone please provide guidance on how to modify it? masterCardPattern: /^(?:5[1-5][0-9]{2}|222[1-9]|22[3-9][0-9]|2[3-6][0-9]{2}|27[01][0- ...

Combining Routes in Express

I have created a basic application using node.js and express. This application features multiple routes and includes simple login/logout functionality. My goal is to ensure that all routes redirect users to a login form if they are not currently logged in. ...

Creating a state in React may lead to an endless loop

Currently, I am working on retrieving data from a Firebase real-time database and storing it in an array named 'users'. The goal is to use this array to set the "post" state. However, there seems to be an issue with the line "setPost(users);" as ...

How can I arrange the ng-class based on the clicked item's order?

http://plnkr.co/edit/pUtuZy?p=preview In this scenario, there are three different border classes available: .border1 { border: 1px solid #66FFFF; } .border2 { border: 1px solid #33CCFF; } .border3 { border: 1px solid #0099FF; } The goal is to as ...