JQuery 3.7.1: CSP script nonce policy violation error cause being traced to the inline script element created by jquery #5734
Description
I have a very basic web-app in which there is a very basic form on the home page. That form is supposed to be submitted through AJAX and the AJAX response is supposed to contain inline script. The app needs CSP policy for script directive to be applied and thus to allow inline scripts nonce strategy should be used. When implementing it the CSP policy is being found violated by jQuery. In https://stackoverflow.com/a/79832641/936494 I have shown screenshots proving the same.
For reference purpose showing code (from my context) with a hope that it might prove helpful in coming up with a prototype which can help in reproducing the problem.
test-project/app.rb
showing the routes available and the response headers being set
before do
headers['Access-Control-Allow-Methods'] = 'GET, POST, PUT, DELETE, OPTIONS'
headers['Access-Control-Allow-Origin'] = '*'
headers['Access-Control-Allow-Headers'] = 'accept, authorization, origin'
headers "Content-Security-Policy" => "script-src 'self' 'nonce-1234';"
end
options '*' do
response.headers['Allow'] = 'HEAD,GET,PUT,DELETE,OPTIONS,POST'
response.headers['Access-Control-Allow-Headers'] = 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Cache-Control, Accept'
end
get '/' do
haml :index
end
post '/save_details' do
content_type :js
# layout: false is important. Without the layout-generated markup will be returned
haml :save_details, layout: false
end
test-project/views/layout.haml
!!!
%html{:lang => "en"}
%head
%meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}
%meta{:charset => "UTF-8"}
%meta{:content => "width=device-width, initial-scale=1.0", :name => "viewport"}
%meta{:content => "ie=edge", "http-equiv" => "X-UA-Compatible"}
%title Sinatra Test App
%body
= yield
%script{ src: "/js/jquery.min.js" }
%script{ src: "/js/test.js" }
test-project/views/index.haml
%p Home page
.form-container<
%form{ id: 'my_form', method: :post }<
.form-control<
%label Name
%input{ name: 'name', type: 'text', class: 'name-field', id: 'name-field' }
%button.button-primary.save-btn{ id: 'save-btn', 'type': 'button' } Save
test-project/views/save_details.haml
%script{ nonce: '1234' }
console.log("js from haml invoked using CSP nonce");
test-project/public/js/test.js
(function( $ ){
testFunc1 = function() {
console.log('hello world');
};
testFunc2 = function() {
var saveBtn = $('.save-btn');
saveBtn.off('click').on('click', function() {
testFunc3();
})
};
testFunc3 = function() {
$.ajax({
type: "POST",
url: "/save_details",
success: function(response) {
// Nothing to handle here. Need HAML to invoke a JS function.
},
});
};
})( jQuery );
$(document).ready(function() {
testFunc1();
testFunc2();
});
I could also find a related issue #3541 which I found from https://stackoverflow.com/questions/42450608/jquery-3-1-1-violation-of-csp-directive.
Thanks.