I have a problem although i have included (as you can see) the hash for inline style="height:18px" (attribute) i still get csp error (pages are in ghostjs )
Refused to apply inline style because it violates the following Content
Security Policy directive: "style-src 'self' maxcdn.bootstrapcdn.com
fonts.googleapis.com https://intercom.help/_assets
'sha256-HKIQe1rxf7BKTQyeVymEQz4wG30GqXPn7nokufiyhRk='".
Either the 'unsafe-inline' keyword, a hash
('sha256-HKIQe1rxf7BKTQyeVymEQz4wG30GqXPn7nokufiyhRk='), or a nonce ('nonce-...') is
required to enable inline execution.
Content Security Policy whitelist hashes doesn't work for inline style attributes but only for inline styles. Maybe in CSP 3.0 will add this functionality
Works for
<style>
body { colod: red; }
</style>
But DOES NOT work for
<body style="color:red;">
</body>
Related
We got an error:
.ico' because it violates the document's Content Security Policy.
.png' because it violates the document's Content Security Policy.
but img-src is defined as: img-src * data:;
I assume that ico and png are not defined as images? what definition is missed?
One of my chrome extension content scripts is executing a click function on an element like this
var currencySelectorLink = document.getElementById('switcher-info');
currencySelectorLink.click();
However the last line is causing the following error:
Refused to run the JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), 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.
I've spend multiple hours now trying to figure this out, maybe some of you will have an idea how to fix it. I absolutely have to trigger this click event, there is no way around it
EDIT:
After some more investigation I found out that it happens, because the link has href attribute with inline javascript:
<a class="switcher-info notranslate" href="javascript:void(0)" id="switcher-info"></a>
anybody has any ideas how to bypass that? If I do this:
currencySelectorLink.href= '#' ;
then error is gone, but it breaks website functionality and not exactly expected behavior comes out of this click event
All that the <a href="javascript:void(0)" code does is to prevent following on the link. You can do the same more pretty way:
currencySelectorLink.href= '#' ;
currencySelectorLink.addEventListener("click", function(event) {
event.preventDefault(); // Prevent default action (a following a link)
}, false);
Note. Since you call click() you already have some event handler. You can insert event.preventDefault(); into it instead of add a second handler. And use:
<a class="switcher-info notranslate" href="#" id="switcher-info"></a>
without javascript:void(0).
The Content-Security-Policy header is, in theory, awesome. In practice, I've run into a problem. If a page loads the CSP and later you, for example, load a login page dynamically, the JS files for that page must have already been included. Because even if the login page uses an absolute URL which matches the domain the index page is from (And is set in the CSP for script-src), it will prevent it from loading.
When I used a nonce to try to circumvent this, the same issue arose, but it was intermittent. Sometimes it would let the same-nonce javascript file load in, and sometimes it wouldn't.
In case it's unclear, the dynamically-loaded script triggers CSP's idea of an "unsafe-inline script."
Is there a 100% effective way to load dynamic JS/CSS files with a strong CSP?
Freeform code example:
index.php:
<?php Header("Content-Security-Policy: default-src 'none'; script-src 'self' https://example.com"); ?>
<script src="triggerLogin.js"></script>
Login
<div class="futureLoginPage"></div>
triggerLogin.js: (CSP Allows)
$('.loginLink').on('click', function(event)
{
$('.futureLoginPage').load('/login.php');
event.stopPropagation();
event.preventDefault();
return false;
});
login.php:
<script src="https://example.com/loginFormVerify.js" type="text/javascript"></script>
<input type="text" class="user" placeholder="Username" />
<input type="text" class="pass" placeholder="Password" />
<input type="button" class="send" value="Send" />
<div class="authStatus"></div>
loginFormVerify.js: (CSP Forbids)
$('.send').on('click', function()
{
post("/verification.php", { user: $('.user').val(), pass: $('.pass').val() }, function(data)
{
$('.authStatus').html(data);
});
});
It doesn't matter if I use https://example.com/ in the 'post' functions, as CSP doesn't even load the loginFormVerify.js file, let alone check its contents.
In reverse, it doesn't matter if I remove https://example.com/ from the JS script sources to let it resolve to its own understanding of the domain. It still fails.
It doesn't matter if I add type="text/javascript" or type="application/javascript" to one or both of the tags, either. And as mentioned above, a nonce only intermittently helps on a dynamically-loaded JS file sent from the server.
While we're at it, it doesn't matter if I have ' ' around the domain name in the header.
Also, I can remove the </script> tags and use the below to the exact same result:
<script src="..." />
I've attempted the above connection style on Safari, Chrome and Firefox with identical results. Safari and Chrome on mobile as well.
I'm aware one workaround is to condense all JS functionality into a single file at the index.php level, but I'm curious if there's a way to handle this some other way.
I make no guarantees that the above example code works in any capacity and recognize the above snippet is far from best practice.
The point of the above code is exclusively to provide an example of how CSP fails to provide a desired result in a dynamic environment, for the purposes of the question:
Is there a 100% effective workaround without reducing CSP's useful nature, other than preloading all scripts (Which can be harmful to speed, maintenance, bandwidth, and -- for those that care -- SEO)?
I'm trying to enable the Content-Security-Policy header on my website. I have the following header set:
Content-Security-Policy:default-src 'self'; script-src 'self' https://apis.google.com/; font-src 'self' https://fonts.gstatic.com/; style-src 'self' https://fonts.googleapis.com/ 'sha256-W/8NeLkjrtPkUUfkFDNutwiyHLsvDJAxC+dO5tQP/90='; child-src 'self' https://accounts.google.com/
This works great in Firefox. That hash in the style-src section matches the inline styles that Google-signin uses. The problem is, per Chromium Bug 546106, the hash is ignored because it's on a style, rather then a script. Worse still, from the comments Chrome/Chromium developers believe this is correct behavior, and is intended (that said, they haven't set it to "WONTFIX" yet).
I really don't want to enable 'unsafe-inline' if I don't have to.
Is there a way with Google-Signin to tell it not to use inline styling? Is there another way?
I have added the following meta tag to avoid clickjacking in my website.
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
But it throws "Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-CwE3Bg0VYQOIdNAkbB/Btdkhul49qZuwgNCMPgNY5zw='), 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."
Add
style-src 'unsafe-inline' 'self'
Or move the inline CSS to an external file. However, it's incredibly common to allow inline styles even though there is some risk involved.