The inline style was rejected for not complying with the Content Security Policy, even though there is no inline style present in the application

I've been working on adding CSP to my portfolio and have already removed all inline styles, but I'm still encountering CSP errors. I am using SCSS which compiles into my main.css file, and then I import this main.css file in my index.js file. This is my first time trying out CSP, and despite reading through numerous Stack Overflow questions, nothing seems to be resolving the issue.

Here is the meta tag for my CSP:

<meta http-equiv="Content-Security-Policy" content="
    default-src 'self'; 
    img-src 'self' https://deploy-preview-12--sensational-bienenstitch-4b09b2.netlify.app; 
    frame-src https://app.netlify.com/;
    font-src fonts.gstatic.com https://cdnjs.cloudflare.com;
    style-src 'self' fonts.googleapis.com https://cdnjs.cloudflare.com ;
    script-src 'self' https://netlify-cdp-loader.netlify.app ;
    connect-src 'self' https://cdnjs.cloudflare.com;">

I am deploying my app using Netlify, and I have also included Google Fonts and Font Awesome. The error message specifies an issue on line number 22, but the code present on that line - 

background-color: var(--main-bg);
doesn't seem to be the cause.

Upon expanding a triangle, I found these images: https://i.sstatic.net/fgyfs.png

https://i.sstatic.net/ff9TN.png

htmlcsssecuritycontent-security-policy

Answer №1

It appears that you are injecting a style element into your DOM, similar to an inline style element in the document. To avoid enabling 'unsafe-inline' for styles, some adjustments will be needed. Here are some potential solutions:

  • Generate a css file with various styles and use class toggling for dynamic changes.
  • If there are limited variations of the added style element, include the hash value of each in the CSP.
  • Add a nonce attribute to the style element, requiring a unique nonce for each page load set in both the CSP and the style with necessary configurations.
  • Calculate the hash of the style and add it to the CSP, knowing the specific style element to be added at page load.

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

Step-by-step guide on incrementally counting localStorage items using jQuery

After spending an excessive amount of time on this project, I have hit a roadblock. Despite days of testing, I am unable to achieve my desired outcome. I am developing an image voting system that will track votes in localStorage. Since this is within Word ...

javascriptjqueryhtmlcsswordpress

Obtain the dropdown menu links for every row in a table using Python3 along with Selenium

Seeking assistance as a beginner in Python, I am attempting to automate the downloading process of old newspaper archives from a specific website () using the script provided below. Despite my efforts, I have encountered difficulty in getting the script t ...

htmlpython-3.xseleniumpdf

Dynamic height adjustment for Bootstrap right column

I am struggling to create a layout with a right column using bootstrap. I can't figure out how to achieve the desired arrangement shown in this image. https://i.stack.imgur.com/VaIWD.png I have attempted various methods but the right column does not ...

htmlcsstwitter-bootstrap

The browser fails to implement styling prior to a demanding workload

Is it possible to refresh a section of my webpage that contains numerous DOM elements? My ideal approach would be to hide the section using visibility: hidden;, then redraw it, and finally set visibility back to visible;. However, I've encountered an ...

javascripthtmlcssgoogle-chromedom

Establish a seamless UDP connection using JavaScript and HTML5

Is it feasible to establish a direct two-way connection with a UDP server using javascript/HTML5 (without node.js)? While WebRTC is an option, my understanding is that it does not support sending datagrams to a specific server. I am primarily focused on c ...

javascripthtmludpwebrtc

Add and remove text boxes dynamically with jQuery, retrieve the value of the dynamic text box, and show it in another text box

I have a code snippet that allows you to dynamically add or remove textboxes using the .append() and .remove() functions in jQuery. Now, I am looking to concatenate all the values of the textboxes with commas separating them and then pass this combined val ...

javascriptphpjqueryhtml

Mysterious blog entry discovered on WordPress

Recently, I observed some concerning issues on my WordPress site An advertisement in the header and footer A multitude of new blog posts that I did not publish Here are the steps I took to prevent this from occurring again Changed my server password R ...

phpwordpresssecurityspam

What is the syntax for implementing conditional statements within the style jsx of Next.js?

Recently, I've been exploring the use of <style jsx> in my Next.js project and encountered a scenario where I needed to style an element based on a conditional statement. Additionally, my project relies on tailwindCSS for styling: <div classN ...

cssnext.jsstyled-jsx

Angular CLI is not displaying CSS

I am currently using angular cli version 1.4.3, node version 6.11.3, and npm version 5.4.2. My goal is to retrieve records using angular2 and display them on localhost. I expected the output to look like this: https://i.sstatic.net/S8TVI.jpg however, the ...

htmlcssangular-cli

Bootstrap 4 - Interactive horizontal timeline for optimal viewing on all devices

I'm working on creating a responsive horizontal timeline using Bootstrap 4 for my timeline and project. The code I've developed so far is working well in terms of being responsive. timeline.html <div className="container timeline-container"& ...

cssbootstrap-4timeline

Black textures with images sourced from the same domain - Cross-origin

Despite trying numerous solutions and tips to resolve the cross-origin issue, I still can't seem to fix it. There are no errors, the images are hosted on the same domain as the webgl test, but the textures appear black. Occasionally when I refresh rep ...

javascripthtmlthree.js

Accessing and manipulating web elements using either XPath or CSS selectors

Having trouble selecting a specific piece of information using xpath or css selector. Error messages keep appearing. Can someone help identify the issue? This snippet is from my code: output = driver.find_element_by_xpath("//td[@class_= 'sku']" ...

pythonhtmlcssseleniumxpath

Floating labels in Bootstrap 4.1

While browsing Google, I came across a Bootstrap 4.1 doc example showcasing floating labels: getbootstrap.com/docs/4.1/examples/floating-labels/ Surprisingly, the example page does not provide any explanation on how to achieve this effect, and I couldn&ap ...

cssuser-interfacelabelbootstrap-4

What are some ways to eliminate the excess white space beneath the footer in HTML?

After creating a responsive webpage that works flawlessly on mobile devices and tablets, I noticed a problem with the footer when viewed on desktop. There is an empty white space at the end of the webpage, and upon inspecting the browser, it focuses on the ...

htmlcsssass

How can Angular incorporate an external JavaScript library?

I'm currently facing an issue with importing libraries like popper, jquery, and chart.js into my Angular project. After downloading them through the CLI, I made sure to reference them in both my index.html and angular.json files. index.html <hea ...

javascripthtmlangular

An empty space separating the header and the navigation bar

As a beginner in HTML and CSS, I decided to create a basic website. However, I encountered an issue with the layout - there seems to be a gap between my header image and navigation bar, but I can't figure out what's causing it. HTML <!DOCTYPE ...

htmlcss

The show-word-limit feature is malfunctioning on the element.eleme.io platform

After attempting to utilize the show-word-limit attribute of the input element, unfortunately the character count did not display. Below is the code snippet that was used: <el-input type="textarea" placeholder="Please input" ...

javascripthtmlvue.jsinputelement

Adding a background color to the body of your PHP and HTML email template is a simple way to enhance

I am currently using a confirmation email template with a white background, but I want to change it to gray. However, I'm unsure how to update the PHP file containing the email function below: $headers = "From: " . stripslashes_deep( html_entity_deco ...

phphtmlcsshtml-email

Trouble with Loading jQuery Files on Beaglebone Server

Working on a wireless robotics project that involves using node.js and jquery to create a webpage "controller". Currently, the code is set up to work with an internet connection because it downloads scripts from internet addresses. The goal is to make it ...

javascriptjqueryhtmlnode.js

How can I create the effect of text changing color automatically after a specified time period has elapsed

I am currently dealing with a timer that is functioning properly, but I have a specific CSS inquiry. Essentially, what I would like to achieve is when the timer hits 30 seconds, I want the numbers to change to red color. $(function () { var $startTimer = ...

javascriptjquerycss