Why does my code violate the Content Security Policy? - javascript

I want to defer non-critical css using the following mechanism:
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
I have the following Content Security Policy:
Content-Security-Policy: default-src 'self'; object-src 'none'; font-src 'self'; base-uri 'self'; connect-src 'self'; manifest-src 'self'; img-src 'self'; script-src 'self' 'nonce-7cc36362-697e-4b28-bdd9-0400d8923894' 'sha256-1jAmyYXcRq6zFldLe/GCgIDJBiOONdXjTLgEFMDnDSM='; style-src 'self'; form-action 'self'; frame-ancestors 'none'; media-src 'self'; report-uri /api/cspviolation
When trying to load and interpret the document, the browser blocks the execution of the onload event handler script because it violates the CSP, which I do not understand because the sha256 of that script is set in the script-src directive.
Any ideas? I've used an online sha256 generator generating the the sha256 set in the CSP. Sadly Chrome does not provide me the sha256 it wants in the console, which I've seen before.

Inline event handlers can only be whitelisted with a hash using 'unsafe-hashes' in CSP level 3, but this is not yet well supported in browsers. Check https://www.w3.org/TR/CSP3/#unsafe-hashes-usage for specification and the table in https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy for browser compatibility.
You best option is probably to move the script to a separate file and adding an event listener.

You're using an inline script ("onload=..."), so either your CSP script-src needs to allow unsafe-inline, or you need to load the script differently.

Related

HTTP Content-Security-Policy header not working correctly for script-src in Struts

I have a problem updating my version of struts struts2-core-2.5.30 project to struts2-core-6.1.1 so I began to receive an error indicating that the security policies have been violated, doing some research, I found that a header should be added
[Report Only] Refused to load the script '<URL>' because it violates the following Content Security Policy directive: "script-src 'nonce-MOz6w31eaDHGUDfV__K8LEZ1' 'strict-dynamic' http: https:". Note that 'strict-dynamic' is present, so host-based allowlisting is disabled. Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
and inside this error i have this description
[Report Only] Refused to load the script 'http://localhost:8080/Portal/html/js/jquery/jquery-1.8.3.min.js' because it violates the following Content Security Policy directive: "script-src 'nonce-MOz6w31eaDHGUDfV__K8LEZ1' 'strict-dynamic' http: https:". Note that 'strict-dynamic' is present, so host-based allowlisting is disabled. Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
[Report Only] Refused to load the script 'http://localhost:8080/Portal/html/js/jquery/jquery-ui.1.10.4.min.js' because it violates the following Content Security Policy directive: "script-src 'nonce-MOz6w31eaDHGUDfV__K8LEZ1' 'strict-dynamic' http: https:". Note that 'strict-dynamic' is present, so host-based allowlisting is disabled. Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
however I have tried these headers
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<meta http-equiv="Content-Security-Policy" content="default-src *;
style-src * 'unsafe-inline'; script-src * 'unsafe-inline'
'unsafe-eval'; img-src * data: 'unsafe-inline'; connect-src *
'unsafe-inline'; frame-src *;">
<meta http-equiv="Content-Security-Policy" content="default-src 'nonce-rAnd0m'">
<script src="${pageContext.request.contextPath}/html/js/jquery/jquery-1.8.3.min.js" type="text/javascript" nonce="rAnd0m123"></script>
with each of them I get the same error, In my previous version of struts it did not ask me for any of this
have also tried to make an interceptor to add the corresponding directives, however it has not worked for me either.
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionInvocation;
import com.opensymphony.xwork2.interceptor.AbstractInterceptor;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.StrutsStatics;
public class SessionInterceptor extends AbstractInterceptor{
private static final long serialVersionUID = 1L;
public String intercept(ActionInvocation invocation) throws Exception {
ActionContext ac = invocation.getInvocationContext();
HttpServletResponse response = (HttpServletResponse) ac.get(StrutsStatics.HTTP_RESPONSE);
//HttpServletResponse response = ServletActionContext.getResponse();
response.addHeader("X-Frame-Options", "SAMEORIGIN");
response.addHeader("Content-Security-Policy-Report-Only", "default-src 'self'; script-src 'self' 'unsafe-inline'; object-src 'none'; style-src 'self' 'unsafe-inline'; img-src 'self'; media-src 'none'; frame-src 'none'; font-src 'self'; connect-src 'self'; report-uri REDACTED");
response.addHeader("X-Content-Security-Policy-Report-Only", "default-src 'self'; script-src 'self' 'unsafe-inline'; object-src 'none'; style-src 'self' 'unsafe-inline'; img-src 'self'; media-src 'none'; frame-src 'none'; font-src 'self'; connect-src 'self'; report-uri REDACTED");
return invocation.invoke();
}
}
In the same way I have updated the jquery-1.8.3 version as suggested in the comments but it has not worked for me either
I was also struggling with the new Content Security Policy interceptor. We had to temporarily disable it since Struts doesn't really provide any way to configure it yet and all of those browser console error / CSP reports are really unacceptable.
At least for me, in order to disable it across all of my actions in struts.xml I needed to reference "cspInterceptor" instead of "csp" as follows:
<interceptor-ref name="defaultStack" >
<param name="cspInterceptor.disabled">true</param>
</interceptor-ref>
Struts provides support for Content-Security-Policy since version 6.x.
The functionality is implemented primarily in CspInterceptor.
This interceptor is configured by providing a convenient default implementation of CspSettings.
This interceptor is included by default in the Struts configuration. As you can see in the linked resource and in the documentation by default is configured in report only, non enforcing mode:
<interceptor-ref name="csp">
<param name="disabled">false</param>
<param name="enforcingMode">false</param>
</interceptor-ref>
I reviewed the current source code of the library and the companion documentation and it seems that providing a custom CSP configuration to CspInterceptor is not possible right now.
That means that in order to mitigate your error one possibility will be to disable the CspInterceptor and provide your own. The Struts documentation provides guidance about how it could be accomplished. In your case, I think it should look like similar to the following:
<action name="myAction" class="myActionClass">
<interceptor-ref name="defaultStack">
<param name="csp.disabled">true</param>
</interceptor-ref>
</action>
In addition, in the commit I cited at the beginning of the answer they mention the components and corresponding tags s:link and s:script as a possible way for fetching the required CSS and Javascript resources taking into account the default CSP settings: basically they provide the necessary mechanisms for taking into account the appropriate nonces for the linked resources, required according to the policy applied. Please, consider review for instance this page in the showcase provided by Struts as example, reproduced here for convenience:
<%#taglib prefix="s" uri="/struts-tags" %>
<html lang="en">
<head>
<!-- content removed for brevity -->
<s:url var="jqueryJs" value='/js/jquery-2.1.4.min.js' encode='false' includeParams='none'/>
<s:script src="%{jqueryJs}"/>
<!-- other resources... now handling inline sources -->
<s:script type="text/javascript">
$(function () {
var alerts = $('ul.alert').wrap('<div />');
alerts.prepend('<a class="close" data-dismiss="alert" href="#">×</a>');
alerts.alert();
});
</s:script>
<!-- ... -->
</head>
The content of your policies and the one in the error message don't match, and while you are adding "Content-Security-Policy", the error message is for "Content-Security-Policy-Report-Only". This means that there is another header present, and you are adding another. Adding another can only make the policy stricter. The report only version of Content-Security-Policy doesn't actually block anything, and must be set as a response header. You should identify where this header is set and modify it as needed.
Additionally you should replace jquery-1.8.3 with a recent version that doesn't have known vulnerabilities.

Content Security Policy not working correctly

I've got a problem. I want to load a video in webm format through js, but localhost don't load the video due to CSP
Refused to load media from 'http://localhost:8079/Talking.webm' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'media-src' was not explicitly set, so 'default-src' is used as a fallback.
I tried to add <meta http-equiv="Content-Security-Policy" content="base-uri 'self'; connect-src 'self'; default-src 'self'; font-src 'self'; frame-src 'self'; img-src 'self'; manifest-src 'self'; media-src 'self'; object-src 'none'; script-src 'report-sample' 'self'; style-src 'report-sample' 'self'; worker-src 'none';"> but localhost 4some reason loads default-src 'none' instead of default-src 'self' and ofcourse doesn't find other meta. I would say localhost just ignore this meta tag.
Video is rendered good, because when i start only index.html the video loads correctly. Each script from js file (only one file) is working correctly except video.
I tried to add video through index.html and through js new video tag create if new user joins, but in this way it didn't load any video so video from index.html wasn't loaded too.
Content needs to pass all your policies, and adding another policy in meta (or header) does not relax other policies, it is still blocked by the same policy with "default-src 'none'". You will need to identify the preexisting policy and add a media-src directive that allows your content.

How to enable CSP(Content Security Policy) in Jquery 3.4.1 & Jquery-ui 1.12.1?

I'm currently using jQuery 3.4.1 and jQuery-UI 1.12.1 (for autocomplete) on my website. I'm also using unsafe-inline and unsafe-eval which I don't want to use.
My <meta/> tag:
<meta
http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-eval' https: cdnjs.cloudflare.com code.highcharts.com stackpath.bootstrapcdn.com cdn.jsdelivr.net code.jquery.com 'unsafe-inline'; connect-src 'self' news.google.com; worker-src 'self'; manifest-src 'self';"
>
Expanded, that content is:
script-src
'self'
'unsafe-eval'
https:
cdnjs.cloudflare.com
code.highcharts.com
stackpath.bootstrapcdn.com
cdn.jsdelivr.net
code.jquery.com
'unsafe-inline';
connect-src
'self'
news.google.com;
worker-src
'self';
manifest-src
'self';
Whenever the AJAX call happens in jQuery-UI autocomplete, it throws an error saying it violates CSP policy.
What do I need to do to properly enable CSP on my website with jQuery? I don't want to use unsafe-eval and unsafe-inline on my website.
Console Error:
Whenever the AJAX call happens in jQuery-UI autocomplete, it throws an
error saying it violates CSP policy.
Show me the text of this CSP error and I'll say you what to do (Chrome console is prefer).
As can be seen from CSS for jQuery-UI 1.12.1 you need to have img-src data: in your policy.
As can be seen from the script 1.12.1/jquery-ui.js - it does not use unsafe eval calls. Maybe you use those in your scripts. Remove 'unsafe-eval' from the script-src and check errors raised in the console.
If there is not messages like Refused to evaluate a string as JavaScript because unsafe-eval is not an allowed or the page's settings blocked the loading of a resource at eval - you do not need to have 'unsafe-eval' in the script-src.
.
The best practice is to forget about insecure HTTP: and use HTTPS:. There were cases when Internet providers (in the RU-segment of the Internet) interfered with the client's traffic and injects ads into jquery lib. So:
The rule connect-src 'self' news.google.com; should be connect-src 'self' https://news.google.com; since news.google.com always retirects to HTTPS:. All $ajax-request to news.google.com should use the https:// scheme too.
the same is with cdn.jsdelivr.net, it always redirects to HTTPS:
Therefore safe rules should be:
script-src 'self' 'unsafe-eval' https://cdnjs.cloudflare.com https://code.highcharts.com https://stackpath.bootstrapcdn.com https://cdn.jsdelivr.net https://code.jquery.com
and all call the scripts should be done with HTTPS: <script src='https://cdn.jsdelivr.net/npm/jquery#3.2.1/dist/jquery.min.js'...
When you specify just scheme-source https: in the script-src - it leads to zero-protection since any sources will be allowed via https:.
This additionally helps to avoid problems of mixed content blocking.

How to change Content Security Policy directive to allow for addThis widget?

I am making a site that uses webpack.
I am about to launch it and I want to put on addThis share widget. I am adding the addThis code in the index.html right before closing body tag as advised by addThis. Like this:
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript"
src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-
###MY_NUMBERS###"></script>
</body>
this generates the following error in chrome-inspect console:
Refused to load the script
'http://s7.addthis.com/js/300/addthis_widget.js' because it violates
the following Content Security Policy directive: "script-src 'self'".
I have read up a little on it and it does not seem to work to seperate addThis to another js-file and save that locally to load it to DOM.
I tried add this to my manifest.json:
"content_security_policy": "script-src 'self' http://s7.addthis.com/js/300/addthis_widget.js; object-src 'self'"
No success. Is there a way to override CSP settings to allow for addThis-widget?
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'
'unsafe-eval' https://*.addthis.com https://addthis.com;child-src 'self' 'unsafe-
inline' 'unsafe-eval' https://*.addthis.com https://addthis.com; object-src 'self'
'unsafe-inline' 'unsafe-eval' https://*.addthis.com https://addthis.com; script-src
'self' 'unsafe-inline' 'unsafe-eval' https://*.addthis.com https://addthis.com; img-src
'self' 'unsafe-inline' 'unsafe-eval' https://*.addthis.com https://addthis.com;">
Adding this to your header will allow the addthis widget to load. Might not be secure, which will defeat the purpose of Content-Security-Policies...
I always set my CSP through the .htaccess if it's available.
Here are some good tips: https://content-security-policy.com/
You're basically there, but unsure how it works with manifest.json.
Try similar in .htaccess:
Header set Content-Security-Policy "default-src 'none'; script-src 'self' http://*.addthis.com
Some things to be aware of with .htaccess files: https://www.digitalocean.com/community/tutorials/how-to-use-the-htaccess-file
Also, using a CSP, you will need to specifiy all the external sources you use basically.
It's worth looking into CSPs in more detail and being aware of all the various sources of images, fonts, etc etc. you use.
Any problems, let me know and I'll expanded further.

Content Security Policy not allowing form submission

Please I need assistance here.
I have a form to submit to another url but when I try to submit it, it refuses to submit and I was checking my console.
On Chrome, I see the following errors
resources2.aspx?HCCID=75694719&culture=en-US&mlcv=3006&template=5:7 Refused to load the image 'https://s4.mylivechat.com/livechat2/images/sprite.png' because it violates the following Content Security Policy directive: "img-src 'self' data:".
Refused to send form data to 'https://cipg.stanbicibtcbank.com/MerchantServices/MakePayment.aspx' because it violates the following Content Security Policy directive: "form-action 'self'".
and on Mozilla Firefox I see the following:
Content Security Policy: The page’s settings blocked the loading of a resource at https://s4.mylivechat.com/livechat2/images/sprite.png (“img-src http://smehelp.themarketplace.ng data:”)
Content Security Policy: The page’s settings blocked the loading of a resource at http://smehelp.themarketplace.ng/purchase/summary (“form-action 'self'”).
Checking around the web for solution, I have added the following to my page header
<meta http-equiv="Content-Security-Policy" content="form-action 'self'">
but the problem still persists.
This results in the fact that I am not able to submit my forms. Earlier, the forms used to get submitted, but I just tried it today and observed this error.
I am running on Google Chrome Version 55.0.2883.95 (64-bit) on a MAC OS.
I will appreciate any suggestion to solve this issue as soon as possible.
Thank you
If you look here because you want to send a form to the same URL (which should be possible with form-action 'self') or another URL listed in your form-action rule, but redirect afterwards, the following could be the cause https://github.com/w3c/webappsec-csp/issues/8 (including a long discussion). One reason is: https://cheatsheetseries.owasp.org/cheatsheets/Unvalidated_Redirects_and_Forwards_Cheat_Sheet.html
The reason why the target url of the redirect is not visible in the CSP report (which is really confusing) is a security issue, see https://w3c.github.io/webappsec-csp/#create-violation-for-request, it would otherwise be possible to analyse the behaviour of form endpoints.
tl:dr;
Chrome and Safari do not allow redirects after submitting a form unless the destination URL is listed in the form-action CSP rule, even if it is a GET redirect that does not contain the original form data.
You are passing the Content-Security-Policy value in your response header:
base-uri 'none'; default-src 'self' https://s4.mylivechat.com;
child-src 'none'; connect-src 'self'; font-src 'self'
https://fonts.googleapis.com https://maxcdn.bootstrapcdn.com
https://fonts.gstatic.com; form-action 'self'; frame-ancestors 'none';
img-src 'self' data:; media-src 'self'; object-src 'none'; script-src
'self' https://www.youtube.com https://maps.google.com
https://www.google-analytics.com https://mylivechat.com
https://s4.mylivechat.com https://maps.googleapis.com 'unsafe-inline'
'unsafe-eval'; style-src 'self' https://fonts.googleapis.com
https://s4.mylivechat.com https://maxcdn.bootstrapcdn.com
'unsafe-inline'
The content security policy that you've added to the page meta will be ignored as this is present in the response header.
You will need to make the following additions (in bold) to your CSP that you are sending in your response header.
base-uri 'none'; default-src 'self' https://s4.mylivechat.com;
child-src 'none'; connect-src 'self'; font-src 'self'
https://fonts.googleapis.com https://maxcdn.bootstrapcdn.com
https://fonts.gstatic.com; form-action 'self'
https://cipg.stanbicibtcbank.com/MerchantServices/MakePayment.aspx; frame-ancestors 'none'; img-src 'self' data:
https://s4.mylivechat.com; media-src 'self'; object-src 'none'; script-src 'self' https://www.youtube.com https://maps.google.com
https://www.google-analytics.com https://mylivechat.com
https://s4.mylivechat.com https://maps.googleapis.com 'unsafe-inline'
'unsafe-eval'; style-src 'self' https://fonts.googleapis.com
https://s4.mylivechat.com https://maxcdn.bootstrapcdn.com
'unsafe-inline';
Add https://s4.mylivechat.com to img-src
Add https://cipg.stanbicibtcbank.com/MerchantServices/MakePayment.aspx to form-action
Remove <meta http-equiv="Content-Security-Policy" content="form-action 'self'"> from your HTML code

Categories