CSV hinderance

[ajoo]

Hi all !

 

i have been trying to implement the CSV policy in my files. I have a bit of code that I am not sure how I can change it to suit the policy.

 

Here's the code snippet :

if(isset($_SESSION['msg']))
{
        // The script below shows the sliding panel on page load

        $script = '
        <script type="text/javascript">

                $(function(){

                        $("div#panel").show();
                        $("#toggle a").toggle();
                });

        </script>';
}

As can be seen the script is loaded conditionally here. So how can I remove javascript embedded from this code so that this may be compatible with the CSV policy. 

 

NOTE: the javascript functions are in a separate js file loaded in the header. 

 

Thanks all !

 

 

 

[ajoo]

Hi, Please read CSV as CSP or content security policy. Sorry for that mistake. 

 

Thanks.

[Jacques1]

You should avoid both conditional scripts and animations which happen while the page is still loading. The cleanest solution is to simply use CSS classes to hide and display elements (e. g. class="invisible").

 

If you must have the animations, use data attributes to pass the session information from PHP to JavaScript. Then do the conditional animation within an external JavaScript file.

 

Last but not least, there are workarounds for inline scripts: You can either use hashes or random nonces to whitelist individual scripts. However, this is complicated, not supported by all browsers and simply unclean.

Edited October 1, 2016 by Jacques1

[ajoo]

Hi Guru Jacques !!

 

Thanks for the reply. In the particular case above I realized that I just needed to put the js snippet in its own js file and call it. I have tried it and it works but I am sure there will be quite a few examples where I'll need to make changes as advised by you.

 

So after making the above change I have tried to implemented a trial CS policy by adding the following in the header: 

<meta http-equiv="Content-Security-Policy-Report-Only" content="default-src 'self' https://www.google.com/recaptcha/api.js" /> 

 But this seems to be a wrong way of doing it since I get the error:-

 

 

The report-only Content Security Policy 'default-src 'self' https://www.google.com/recaptcha/api.js' was delivered via a <meta> element, which is disallowed. The policy has been ignored.

 

Please help. 

 

Thanks.

[Jacques1]

CSP rules are defined with an actual HTTP header, not a meta element. You either make your webserver add the header, or you use the header() function in PHP.

[ajoo]

Hi Guru Jacques, 

 

How to make the web server add the header ? Is it to be added in the httpd.conf file. If so, exactly where. Or can it be added anywhere ?

(I have used the header function successfully to remove the the error I was getting).

 

Thanks. 

[kicken]

With apache you'd need to have mod_headers enabled, then you can just add this to either your main configuration or a .htaccess

 

Header add Content-Security-Policy "default-src 'self' https://www.google.com/recaptcha/api.js"

[ajoo]

Hi !

 

Thanks kicken,

I have set the headers with the header command as suggested by Guru Jacques as follows :

header("Content-Security-Policy-Report-Only content=default-src 'none' https://www.google.com https://ajax.googleapis.com"); 

and this should, I think, give errors if the application is accessing resources from 'self' but it get no error. Also there is inline js in some of my pages but even that is not triggering any errors. Any ideas why this might be happening? 

 

Thanks !

[Jacques1]

The syntax is broken, because you've just copied and pasted the attributes of the meta element. You need a valid HTTP header.

 

A report-only policy also requires an extra script which processes the reports and is specified with the report-uri directive. Since you probably don't have such a script, reporting makes no sense.

Content-Security-Policy: default-src 'none'

[ajoo]

Hi Guru Jacques, 

 

The following seems to work. Hopefully there is no syntax error in this now.

 

header("Content-Security-Policy-Report-Only : default-src 'self' https://www.google.com/ https://ajax.googleapis.com/; report-uri http://localhost/xampp/test/reportcspviolation.php");

 

I get four errors of which I have listed 2 below.

 

 

jquery.min.js:19 [Report Only] Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self' https://www.google.com/ https://ajax.googleapis.com/". Either the 'unsafe-inline' keyword, a hash ('sha256-0wIoD60yL42+1XJUY22zM8LflSmtzRyZIjM0qasci88='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

(anonymous function) @ jquery.min.js:19

(anonymous function) @ jquery.min.js:19

(anonymous function) @ jquery.min.js:19

 

jquery.min.js:19 [Report Only] Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self' https://www.google.com/ https://ajax.googleapis.com/". Either the 'unsafe-inline' keyword, a hash ('sha256-3J556v2dV8RtvE9Q2m1Yv7EQMANlU+7BTHMV9dFHDWE='), 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.

(anonymous function) @ jquery.min.js:19

(anonymous function) @ jquery.min.js:19

(anonymous function) @ jquery.min.js:19

 

The other two involve 

 

 

(anonymous function) @ api.js:1

(anonymous function) @ api.js:1

 

 

I still do not get the report any report. 

 

I'll be grateful if you show me how to have this generate a report and the way I should design the header for that. Anything else related as well. 

 

Thank you.

[Jacques1]

The header syntax is still wrong. You can't have whitespace between the header name and the colon. It's

Content-Security-Policy-Report-Only: default-src 'self' https://www.google.com/ https://ajax.googleapis.com/; report-uri http://localhost/xampp/test/reportcspviolation.php
                                 ^^^^
                                 no whitespace before the colon allowed, only after it

[ajoo]

Hi Guru Jacques, 

 

Sir thank you for that correction. I have changed it but the errors remain. The csp is also generating the errors file in the specified folder. I do see one problem though and that is that I am using http instead of  https. Could that be the reason for the errors? I am not sure but I think it's something else.

 

Please find attached the errors file generated. 

 

Please advise best. 

 

Thanks,

csp.zip

Edited October 3, 2016 by ajoo

[Jacques1]

What error? You've asked the browser for a report of CSP violations, and you've received a report of CSP violations. What's the problem?

[ajoo]

Hi Guru Jacques, 

 

 

 

What error?

 

The errors /  violations that I mentioned in my message #10.

 

They are the same as reported in the errors file. The violations occur because of some in-line resource and I am not sure which resource this is referring to so that I may rectify it. If I knew which bit of code is causing this issue I could change it. The errors violations seem to point to jquery.min.js:19, api.js:1 and flogin.php:82.

 

I have also changed my header to include all the resources on self :-

 

header("Content-Security-Policy-Report-Only: default-src 'self' https://www.google.com/ https://ajax.googleapis.com/ http://localhost/xampp/franchisee/; report-uri http://localhost/xampp/franchisee/reports/reportcspviolation.php");

 

Please advise. Thanks.

 

 

 

 

[Jacques1]

The api.js violation is caused by not whitelisting the reCAPTCHA URL on https://www.gstatic.com. The flogin.php violation is caused by an inline style attribute. The jQuery violations are unclear without the code. Find your JavaScript code which uses the jQuery feature that triggers the violation. It also helps if you use the non-minified jQuery version for debugging.

[ajoo]

Hi Guru Jacques, 

 

The flogin error is caused by the code :

<a id="close" style="display: none;" class="close" href="#">Close Panel</a>

which is a part of the larger block 

                <ul class="login">
                    <li class="left"> </li>
					<li>Hello <?php echo isset($_SESSION['user'])? html_escape($_SESSION['user']) : 'Guest';?>!</li>
                        <li class="sep">|</li>
                        <li id="toggle">
                                <a id="open" class="open" href="#"><?php echo isset($_SESSION['id'])?'Open Panel':'Log In | Register';?></a>
                                <a id="close" style="display: none;" class="close" href="#">Close Panel</a>
                        </li>
                    <li class="right"> </li>
                </ul>
 

The error must be because of the inline css styling  : 

style="display: none;

The class close is a javascript manipulated :-

	// Collapse Panel
	$("#close").click(function(){
		$("div#panel").slideUp("slow");
	});		

if I don't use the inline css style "display : none", then it messes up & the open and close button show up together and slide together. I want to keep the slider so how do I fix this? I have tried a couple of things but none seem to work. Please help. 

 

Does this also means that I will have to remove all inline css styles and somehow shift them into external css files for the csp to be effective?

 

Thank you.

[Jacques1]

Does this also means that I will have to remove all inline css styles and somehow shift them into external css files for the csp to be effective?

 

Yes. And all you have to do in this case is apply a CSS rule to an element with an ID. You've probably done this hundreds of times in your current CSS files.

[ajoo]

Hi Guru Jacques, 

 

Thanks for the reply and the hint. It helped me remove almost all inline css styles but two which are occurring in the jquery.js file. As suggested, I have temporarily disabled the minified js file. 

 

I will revert back if I am still unable to figure out which code is causing this issue. Keeping this question open till then.

 

Thanks loads. 

[kicken]

What lines in jquery.js specifically are causing the issue? Post the relevant sections on the code.

[Jacques1]

Also test the page in different browsers. Styles or scripts created within JavaScript are not supposed to be covered by CSP, but there have been several bugs which broke that rule. If the code runs fine in one browser but not the other, this can indicate a browser bug.

[ajoo]

Hi Guru Jacques, Kicken and all else !

 

I am still stuck with this. I have tested this in IE and Firefox as suggested by Guru Jacques and It seems that the problem lies in this particular div : <div id="panel"> 

 

It somehow gets styling. I don't know how. It showed up in IE and firefox but not in chrome. 

 

Please find attached all the jpegs showing the various results. 

 

Chrome:

 

IE: ( have never used this before)

 

FIREFOX: ( have never used this before)

 

CODE: ( This is the actual code snapshot. No error in this even though the name says code_err   )

 

I hope these will be good enough to help you ascertain the issue and guide me on how to correct these errors. 

 

Thanks loads.

[Jacques1]

So the problem only happens in Chrome, yes? This would confirm that it's a browser bug. Inline scripts and styles created by JavaScript are not supposed to be blocked by CSP.

 

In any case, jQuery 1.3.2 is ancient, and the offending line doesn't seem to exist in newer versions. So update jQuery and try again. If it still doesn't work, whitelist this particular script with a nonce.

[ajoo]

Hi Guru Jacques, 

 

No there were errors in firefox as well. I searched for them and found the errors. (see Below in the picture). There may have been even in Internet Explorer, but I did not know where to look for them. I tried but could not find them in IE. 

 

. 

 

I'll change the jquery version and see where that leads to. I'll revert with the results. Meanwhile does this now change your last answer in any way?

 

Thank loads!.

 

 

[ajoo]

Hi Guru Jacques, 

 

Thank you very much. Upgrading the jquery library to the latest version helped clear all the errors. I am not getting them now. I have implemented the csp across the project - I think. Many thanks to you for informing me about CSP and all the help to complete its implementation. 

 

Kind regards

Edited October 8, 2016 by ajoo