How come this inline JavaScript isn't being blocked by the content security policy?

I've implemented a content security policy on a page by setting the script-src directive as follows:

script-src 'self' *.uservoice.com *.intuit.com ajax.googleapis.com localhost:*

Upon testing with a hard-coded inline script, it was correctly blocked due to CSP restrictions:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' *.uservoice.com *.intuit.com ajax.googleapis.com localhost:* ". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

Surprisingly, when I dynamically insert a new script tag like this, it still executes without being blocked:

$("body").append("<script>alert('xss');</script>")

My testing browser is Chrome. It raises concerns for me that this type of script injection isn't being prevented. Is there anything I can adjust in my settings to block these scripts as well?

javascriptgoogle-chromexsscontent-security-policy

Answer №1

If you use append or innerHtml to add a script, it will not run unless you specifically call eval(). This does not violate CSP guidelines.

Even though it may appear like a cross-site scripting attack, the action is actually harmless. HTML5 dictates that a script tag inserted via innerHTML should not execute. 1

Refer to script elements added through innerHTML do not run upon insertion.

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

Modify the value of Bootstrap's collapse button when it is clicked

Even after extensively searching the forum and Google, as well as reading numerous articles, I am still unable to successfully achieve what I want. My aim is to change the value of a button upon clicking it. Specifically, if the content is currently visibl ...

javascripthtmlbootstrap-4

Find the differences between two arrays and eliminate any matching items

In my Vue project, I am working with two arrays. The first array, TempId, contains the following data: [{"id":47},{"id":45},{"id":48}] The second array is called multiprices and it looks like this: multiprices: [ { ...

javascriptarraysvue.jsarray-splice

Shifting Angular Component Declarations to a New Location

Here's a question that might sound silly: In my Angular project, I am looking to reorganize my component declarations by moving them from angular.module.ts to modules/modules.modules.ts. The goal is to structure my src/app directory as follows: src ...

javascriptangulartypescriptangular-componentsangular-module

Change the colors and messages shown when the button is clicked or hovered over

I'm seeking assistance in getting this code to function properly, specifically to display different colors and messages when specific buttons are clicked or hovered over. My goals are: To change the background color of the page when the button &apo ...

javascripthtmlcss

Angular $compile encountering issues when attempting to compile a string containing non-HTML characters

I am faced with a challenge of utilizing $compile to insert HTML content provided by a user into a directive. module.directive('foo', ["$compile", function($compile) { return { // ... link: function($scope, el) { ...

javascriptjqueryangularjsangularjs-directive

Why isn't the document.getElementById().value() function functioning properly within my PHP code?

When working on my PHP code, I included the following: <select class="ht__select" onchange="sorting('<?php echo $id ?>')" id="sorting"> <option value="">Default sorting</option> <option value="low_price">Sor ...

javascriptphphtml

What makes Safari for Windows stand out when it comes to AJAX?

What sets Safari for Windows apart when it comes to handling AJAX requests? Moreover, are there any potential issues or challenges I should be aware of? ...

javascriptwindowsajaxbrowsersafari

Guide on excluding a specific element using an Xpath expression

I am seeking a solution to craft an XPath expression that can target all <p> elements except for p[6] and p[7]. Currently, I have formulated this expression: //div[@class="Job-Description app-responsive-jd"]/p[1], which is functioning corre ...

javascripthtmlxpathscreen-scraping

collect information from text box

Is it possible to retrieve data entered into input fields that have not been submitted and display that data in another div by clicking a button? Can this task be accomplished using scripting languages? HTML <form> <div class="div1">< ...

javascriptjqueryajax

Adjusting the transparency of each segment within a THREE.LineSegments object

I am following up on a question about passing a color array for segments to THREE.LineSegments, but I am looking for a solution that does not involve low-level shaders. I am not familiar with shaders at all, so I would prefer to avoid them if possible. I ...

javascriptthree.js

What steps should I take to pinpoint the fundamental mistake in my webpage dedicated to clocks?

Exploring an intriguing clock project that utilizes ancient timekeeping methods found at . Recently encountered a puzzling error in Chrome, where it claims to be unable to call a method on undefined. Strangely enough, the error message is not located near ...

javascriptdebugginggoogle-chrome

Is there a way to automatically redirect a webpage based on the URL that is entered

Looking for a solution where a page checks a typed link upon loading, such as: www.test.com/myphp.php=10 If it detects a specific number, it should redirect to another link. For example: Upon finding www.test.com/myphp.php=10, it redirects to www. ...

javascriptphpjqueryhtmlajax

Text that changes within a set-sized box

I'm working with a fixed-size div that contains dynamically generated text. Is there an easy method using DOJO or plain Javascript to truncate the text before the end of the div and add "..."? How can I accomplish this regardless of the font size bein ...

javascripthtmldojo

Using HTML and JavaScript to automatically update one input date based on changes made to another

Currently, I am developing an Angular application and encountered a challenge with two date input fields: <div class="col-lg-3"> <div> {{ dataInizioLabel }} </div> <input required type="datetime-local" ...

javascripthtmlangular

Tips for passing the indexes of an array within nested ngFor loops in Angular

I have a 2D grid in my component that is created using nested ngFor loops, and I want to make certain grid elements clickable under specific conditions so they can call a function. Is there a way for me to pass the index of the clicked array element to the ...

javascriptangulartypescriptngfor

Steps for obtaining the target element during a 'selectionchange' DOM event

I am currently faced with a situation where I need to determine the target element that triggered the selectionChange dom event. After reviewing https://developer.mozilla.org/en-US/docs/Web/Events/selectionchange, it appears that in the normal case (non-i ...

javascripthtmldom-events

I can't figure out why I keep getting the error message saying that $ is not

Looking to execute a PHP file using AJAX, I attempted the following: <html> <script type="text/javascript"> setInterval(function(){ test(); },3000); function test(){ $.ajax({ type: "POST", url: "GetMachineDetail.php", data: ...

javascriptphpjqueryajaxcall

Pay attention to modifications in a property within an object in the React environment

Below is a React Context Provider containing a simple Counter class with methods stored in the context. import { createContext, useContext } from "react"; class Counter { public count: number = 0; getCount = () => { return this.count ...

javascriptreactjstypescript

The checkbox saves all options collectively into the database, rather than individually storing each one

At the moment, my checkbox values are saved as ["A","B","C"] in the database even when I only select one option (e.g. C). I also have a question - is there a way to store it as ABC instead? $(document).ready(function() { "use strict"; var role; }); ...

javascriptphp

Is it possible to move between textboxes using arrow keys in HTML?

Is there a way to navigate through textboxes using arrow keys in HTML without relying on jQuery? Possibly utilizing JavaScript, HTML, CSS, or another method? Thank you for your help! <body> <form> <input type="text"&g ...

javascripthtmlcss