Blocked the loading of scripts due to non-compliance with the Content Security Policy directive

Encountering an error with externally loaded scripts:

Refusing to load the script 'https://code.jquery.com/jquery-3.4.1.slim.min.js' due to violating the Content Security Policy directive: "script-src 'self' https://ajax.googleapis.com 'sha256-V8KVL4e3S2PwNnwHfycBcJMRnRhyyPiEpdxcGNLxzvk='". It seems that 'script-src-elem' was not explicitly set, so 'script-src' is being used as a fallback.

Researching solutions for this issue, however all suggestions involve adding 'unsafe-eval' 'unsafe-inline'.

It appears that I need to include a meta tag. Something similar to this:

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' http://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'" />

After removing unsafe-inline and unsafe-eval, the problem still persists. Any thoughts?

This is what's defined in my header:

<head>
    <link rel="icon" href="img/am.png">
    <meta charset="utf-8">
    <!-- Required meta tags -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,600,700i" rel="stylesheet">
    <link rel="stylesheet" href="style.css">

    <title>Title</title>

</head>

Prior to the closing body tags, additional scripts are included

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed9d829d9d889fc3879eaddcc3dcddb991adacdb96d97a9cd8da85fce680d59dea88d9858c878883ca89bd968689898b86">[email protected]</a>/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
    crossorigin="anonymous"></script>

A total of four blocked scripts - one in the header (fontawesome) and three others before the closing body tag.

javascripthtmlcsscontent-security-policy

Answer №1

By setting the script-src directive to 'self' and https://ajax.googleapis.com with a specific hashed value, your CMS or server is already implementing a Content Security Policy.

This policy can be established through various methods such as:

  • Using PHP's header() function
  • Adding rules to the .htaccess file
  • Utilizing the <meta http-equiv="Content-Security-Policy"> tag
  • Configuring settings on the web-server (less common)

To enhance security, you should identify where this policy is being set, often done through a plugin in the CMS that manages HTTP headers. Once located, you can expand the script-src directive by including:

  • Either allowing host-sources which are less secure:

    , , ,

  • Or specifying single quoted hashes obtained from integrity attributes of your scripts for greater security:

    'sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n', 'sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo', ... (additional hashes)

  • Or a combination of both approaches:

    'sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n', 'sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo', 'sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6',

In the case of using hashed values, include the integrity= attribute within the script tag in the head section like below:

<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"
integrity="sha384-0AJY8UERsBUKdWcyF3o2kisLKeIo6G4Tbd8Y6fbyw6qYmn4WBuqcvxokp8m2UzSD"
  crossorigin="anonymous"></script>

Update: A mixed option involving a combination of rules was included as an alternative if modifying the script in the <head> section is not feasible.

<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

Answer №2

It seems that there might be a duplicate CSP response header along with your meta tag CSP on your website. Having multiple CSPs can increase the security measures but it also means that any resources have to meet the requirements of both CSPs. To solve this issue, you should adjust the header CSP and include code.jquery.com in the script-src directive.

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

Do I have to cram all the content onto a single page just to use a scroll effect?

I'm currently facing a dilemma as I work on building my portfolio. My goal is to primarily use html5 and css3, along with a bit of js, jquery, and other tools if necessary. Although I am not an expert in web development, I wanted to push myself to cre ...

javascripthtmlcssscroll

How to eliminate a hyperlink from an HTML element with the help of JQuery

Recently, I was assigned to revamp a website for the company I work for. However, upon closer inspection, I realized that the website is quite messy and relies heavily on templates, resulting in certain elements being auto-generated as active links. The i ...

javascriptjqueryhtmlcss

jQuery is successfully manipulating pagination on CodeIgniter, however, the link is being updated as well

I've been working on a HTML page called view_closing.php. It includes a table with pagination, and my aim is to ensure that the table can move to another record without refreshing the entire page, all while remaining at the same address: http://localh ...

javascriptphpjqueryajaxpagination

What could be causing my div element to not inherit its parent div's width?

My query revolves around a header div that I'm struggling to align with the same width as its parent div, while keeping the content centered. Currently, the div is only as wide as its content, causing it to be off-center. https://i.stack.imgur.com/E1 ...

csscss-position

What is the best way to display numerical data within an inline list format?

Here is a list I have: <ol> <li>Login</li> <li>Address</li> <li>Shipping</li> </ol> The numbers in the list display correctly as decimals. However, when I change the <li> tag to inline or ...

csshtml-lists

Embed the YouTube video using the URL in the video tag

I tried using the <video> tag, but I'm having trouble getting it to play videos from YouTube. Even though I found this http://jsfiddle.net/wCrNw/, it doesn't seem to work as expected. I also consulted Show Youtube video source into HTML5 ...

htmlvideoyoutube

Is there a way to adjust the background hues of a React component when a click event is triggered?

Currently, I have 3 React components that each consist of a div element. When I click on one component, I want to change its background color to black. If I then select another component, the previously selected component should return to its normal back ...

cssreactjs

A unique string containing the object element "this.variable" found in a separate file

Snippet of HTML code: <input class="jscolor" id="color-picker"> <div id="rect" class="rect"></div> <script src="jscolor.js"></script> <script src="skrypt.js"></script> Javascript snippet: function up ...

javascripthtmlthis

Disappearing table borders in print view on Firefox

I have been working on creating a printable table that displays correctly in Chrome. However, when viewed in Firefox, the table borders are not showing up. <body> <table> <tbody> <tr> ...

htmlfirefoxprinting-web-page

Use jQuery to display the first 5 rows of a table

I recently posted a query on show hide jquery table rows for imported xml data regarding how to toggle visibility of specific table rows using jQuery. Now, I am seeking advice on how to make the first 5 elements always visible within the same context. Belo ...

javascriptjqueryhtmlxmlshow-hide

How can I choose which button to click in selenium if there are multiple buttons on the page with the same name, value, and id?

This particular button actually opens a popup, even though it is located on the same page. ![click here for image description][1] I attempted to interact with the element using the following code: driver.findElement(By.tagName("td")).findElement(By.id( ...

javajavascriptselenium

Error encountered when URLSearchParams attempts to add an array

Hi, I'm encountering a problem when attempting to send an array using URLSearchParams. Here is the code snippet in question: const worker = async(endpoint, method, parameters) => { let body; if (typeof parameters === 'object' &am ...

javascriptexpressurlsearchparams

Strategies for transferring information to a different component in a React application

Building a movie site where users can search for films, click on a card, and access more details about the film is proving challenging. The problem lies in transferring the film details to the dedicated details page once the user clicks on the card. An onc ...

javascriptreactjsreact-router

Is it better to specify one root element or render the entire layout in ReactDOM.render()?

Currently in the process of learning React.js and I have a question. Is it more beneficial to keep my ReactDOM.render() as it is currently set up: ReactDOM.render( <div className="container"> <div className="row"> <div className ...

javascriptreactjs

How can you make a Tempory Drawer wider in Material Components Web?

Increasing the Width of a Temporary Drawer in Material-components-web Greetings! I am currently facing an issue with Material-components-web In the provided demo here, I would like to extend the width of the Temporary drawer to accommodate additional co ...

javascripthtmlcssmaterial-designfrontend

The methodology of executing a Javascript function

I have the following code snippet: (function() { $(document).ready(function() { //Event handlers $('.project-delete').on('click', function() { deleteProject($(this)); }); $('.keyword-delete').on(&ap ...

javascriptjquery

How to incorporate markdown files as strings in Next.js

Is there a way to bring in markdown files as strings in Next.js for use on both the client and server sides? ...

javascriptreactjsmarkdownnext.js

Why is it that lists always begin outside of the enclosing element?

I've always found this incredibly frustrating. Why do lists behave this way? When you set the margin and padding to 0, you would expect them to align normally with the surrounding text on the left, right? But no. That's where the text within the ...

htmlcsshtml-lists

Tips for maintaining the fixed size of a table header and preventing it from resizing in width

My goal was to create a table using divs with fixed headers while scrolling vertically. However, I encountered an issue where the header width seemed to shrink and became misaligned with the rows. Even setting the width to 100% did not resolve this probl ...

htmlcss

Click the button in Javascript to add new content

I am currently experimenting with JavaScript to dynamically add new content upon clicking a button. Although I have successfully implemented the JavaScript code to work when the button is clicked once, I would like it to produce a new 'hello world&ap ...

javascripthtml