CSP Violation : Inline Style in innerHTML of a library - content-security-policy

I have set up the Content Security Policy in my header. Everything is working fine.
Problem: One of the libraries I use, use innerHtml with inline CSS. This generates a CSP error:
svgbundle.ts:53 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'sha256-0EZqoz+oBhx7gF4nvY2bSqoGyy4zLjNF+SDQXGp/ZrY='. Either the 'unsafe-inline' keyword, a hash ('sha256-0EZqoz+oBhx7gF4nvY2bSqoGyy4zLjNF+SDQXGp/ZrY='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.
The code that generates the error (which I can't modify, it's a lib) :
I added the hash in my style-src, but I guess it doesn't work according to the last sentence of the error
unsafe-hashes is really the last possible solution?

Try to add this rule :
style-src 'unsafe-inline' 'self';
All my CSP rules with which innerHTML is accepted :
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self';
img-src 'self' data: https://* ;
child-src 'none';
frame-src 'self' https://*;
style-src 'unsafe-inline' 'self';
script-src 'nonce-azerty123' 'unsafe-eval' 'unsafe-inline';
script-src-elem 'nonce-azerty123' 'unsafe-eval' 'unsafe-inline';
worker-src 'self';
base-uri 'self'"
/>

Related

How to bind events such as onchange in razor views without violating CSP

In an effort to improve security, I've added this response header in middleware.content-security-policy: default-src 'self'.
And in a razor partial view I have a SELECT element with onchange="this.form.submit()
<div class="dropdown-item text-dark">
<form id="selectLanguage" method="post" class="form-horizontal" role="form"
asp-controller="Home"
asp-action="PersistLanguage"
asp-route-returnUrl="#returnUrl">
<select name="culture" onchange="this.form.submit()"
asp-for="#requestCulture.RequestCulture.UICulture.Name" asp-items="cultureItems">
</select>
</form>
</div>
Consequently, the browser reports the following.
Refused to execute inline event handler because it violates the
following Content Security Policy directive: "default-src 'self'
data:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or
a nonce ('nonce-...') is required to enable inline execution. Note
also that 'script-src' was not explicitly set, so 'default-src' is
used as a fallback.
(Unknown) ListPicker._handleMouseUp
Loosening up the policy resolves it, but doing so is not recommended: script-src 'self' 'unsafe-inline'.
What is the right way to bind events such as onchange in razor partial views without violating the CSP inline script constraint?
You can write some code like this in the script file.
$(function(){
$("#culture").change(function(){
this.form.submit();
});
});

Tabulator - How to refresh table from json file

I am trying to update my Tabulator table from a JSON file. When an item is submitted or deleted, it triggers a PHP file that updates the file fine. However, the table does not update. If I hard reload the page (CTRL+F5), the table updates correctly. Otherwise, it will not update with a regular reload. I have a location.refresh(); in my code for deleting with a successful ajax request to my PHP file. My PHP files have a "Refresh:0; url = tabulator.html". I have tried adding to the top of my html page:
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
and to the top of my PHP file:
header('Cache-Control: no-cache, no-store, must-revalidate'); // HTTP 1.1.
header('Cache-Control: post-check=0, pre-check=0', false);
header('Pragma: no-cache'); // HTTP 1.0.
header('Expires: 0');
At the end of my table creation i have table.setData(); since I use an ajaxURL to load the data in the table. Anyone have any idea how I can refresh the table with the data from the JSON file when an item is submitted or deleted? Thanks in advance.
use reactiveData:true, //enable reactive data
checkc documentation

Why a simple button tag gives a CSP violation?

I know it sounds strange, but it took me 3 hours to check it. A simple HTML
<button></button>
was returning either in Firefox or Chrome
Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src”).
with no extra information, no lines, no file, nothing. I replaced by a <input type="button"/> with the same CSS and now it works.
Just for the record, my CSP 'script-src' rules were
script-src 'self' 'unsafe-eval' 'unsafe-inline' 'nonce-EDNnf03nceIOfn39fn3e9h3sdfa' 'strict-dynamic' https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ https://www.google-analytics.com/analytics.js https://api.uber.com https://cdnjs.cloudflare.com/ajax/libs/jsSocials/1.5.0/jssocials.min.js
I replaced by a
<input type="button"/>
with the same CSS class and now it works. Really strange and buggy these CSP rules.
Without a type, button implicitly receives type=submit. It does not matter how many submit buttons or inputs there are in the form, any one of them which is explicitly or implicitly typed as submit, when clicked, will submit the form, and thus - I suppose - cause problems with CSP.

htacess seo friendly not working proplery

I am trying to make seo friendly url for my page http://www.jobslamp.com/jobsbystate.php?s=af3d1405&st=Kerala . I have tried some htacess code before , but then the designs are lost. Could u plz suggest the proper htacess code to achieve this . I would like to get an url like http://www.jobslamp.com/jobsbystate.php/af3d1405&st/Kerala
Thanks in advance
This sounds like you're linking to CSS or javascript using relative URI's instead of absolute URI's. You can either make all of your links absolute by adding a leading slash (for example):
<link rel="stylesheet" href="main.css" type="text/css">
to:
<link rel="stylesheet" href="/main.css" type="text/css">
Or you can define the URI base in the header of your pages by adding:
<base href="/">
or whatever the base should be.

Application Relative Paths IIS

I'm moving an web application to a subdirectory from it's root and having issues with paths.
Old: http://www.domain.com/
New: http://www.domain.com/app/
All of the include css, scripts and html links where in this format:
<link rel="stylesheet" type="text/css" href="/styles/menu.css" media="screen"/>
I've changed to:
<link rel="stylesheet" type="text/css" href="./styles/menu.css" media="screen"/>
or
<link rel="stylesheet" type="text/css" href="~/styles/menu.css" media="screen"/>
It works fine on links and others until I go one directory deep where links and paths are broken.
e.g.
www.domain.com/app/dir1/
www.domain.com/app/dir2/
There the link url or others (scripts, includes, etc) get duplicate paths.
e.g.
www.domain.com/app/dir1/dir1/
www.domain.com/app/dir2/dir2/
How could I approach this as absolute?
Using ~/style... etc is the easiest solution in ASP.NET but you must put runat="server" in the tag for it to actually work

Resources