I implemented reCAPTCHA v3 on my website, all is working fine, I'm getting a score back and everything on the server-side.
However, I'm getting tons of Content Security Policy warnings in the console (Firefox):
Content Security Policy: Ignoring “'unsafe-inline'” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “https:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “http:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “'unsafe-inline'” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “https:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “http:” within script-src: ‘strict-dynamic’ specified
No idea why I'm getting these. I just implemented v3 as usual.
In the head tag:
<script src='https://www.google.com/recaptcha/api.js?render=SITEKEYHERE'></script>
In the body tag:
<form id="loginForm" action="test.php" method="post">
...
<input type='hidden' name='recaptcha_response' id='recaptchaResponse'>
</form>
...
<script src="https://www.google.com/recaptcha/api.js?render=SITEKEYHERE "></script>
<script>
grecaptcha.ready(function () {
grecaptcha.execute('SITEKEYHERE', { action: 'login' }).then(function (token) {
var recaptchaResponse = document.getElementById('recaptchaResponse');
recaptchaResponse.value = token;
});
});
</script>
I'm expecting there to be no warnings at all, yet I'm getting 6.
Please refer this example code to add this in your head tag
Content-Security-Policy: script-src 'self' https://apis.google.com
You will get more information from this page
https://developers.google.com/web/fundamentals/security/csp/
Also fix the mixed content errors
This warning cannot fix and you have to just ignore it.
This is a problem between the browser and google and in whole internet there is no solution to clear your console from it.
More info are in:
https://stackoverflow.com/a/55835120/16212595
and
https://www.reddit.com/r/firefox/comments/fpptyj/firefox_content_security_policy_console_output/
Related
I am trying to add content security policy to my V3 manifest file for applying reCaptcha v3 to my chrome extension but I keep getting the following error
'content_security_policy.extension_pages': Insecure CSP value "https://google.com" in directive 'script-src'.
My CSP is given below, what am I doing wrong?
"content_security_policy": {
"extension_pages": "script-src 'self' https://*.google.com https://*.gstatic.com; object-src 'self'"
}
I have a web server that generates a http/html response to a GET request. I have added the following response header: content-security-policy: default-src 'nonce-Z2lnkA9A00KuJsXvx94P6hyDdyRUaxFCiV9lUS0XgWo' 'self' *.my-org.net *.my-org.com fonts.googleapis.com fonts.gstatic.com *.amazon.com;.
I then add the following tags to my html document:
<!-- these tags are blocked in firefox -->
<style nonce="Z2lnkA9A00KuJsXvx94P6hyDdyRUaxFCiV9lUS0XgWo"> some inline code ....
<script nonce="Z2lnkA9A00KuJsXvx94P6hyDdyRUaxFCiV9lUS0XgWo"> some inline code ....
<!-- this tag works as expected in all browsers-->
<script src="/scripts/utils.js"></script>
This code executes correctly in chrome and edge, but firefox is blocking the inline script tags, while allowing the fetched script tags to execute.
The error in the firefox console is: Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”).
It seems like Firefox doesn't support nonces in default-src. If you specify the script-src and style-src directives with the necessary sources it should work. I tested this with Firefox 77 and 79.
I am having an issue adding font awesome to my ASP.NET Core MVC (ASP.NET Core 2) application. I am simply trying to add the CSS library called font awesome to my MVC project. I have tried two approaches
1) Adding the font awesome CDN like so
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
but when I add the CDN I get the CSP errors in Chrome
Refused to load the stylesheet
'http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'
because it violates the following Content Security Policy directive:
"default-src 'self'". Note that 'style-src' was not explicitly set, so
'default-src' is used as a fallback.
So I tried adding the correct meta tags. I tried MANY combinations and nothing seemed to work. For example,
<meta http-equiv="Content-Security-Policy"
content="script-src 'self' http://maxcdn.bootstrapcdn.com
'unsafe-inline' 'unsafe-eval';
style-src 'self' http://maxcdn.bootstrapcdn.com
'unsafe-inline' 'unsafe-eval'; " />
I was still getting errors related to CSP in Chrome.
2) The second approach I took was to add the font awesome CSS file in my project. I did this and then added the corresponding reference like so:
<link rel="stylesheet" href="~/css/font-awesome.min.css">
When I did this I got the following errors despite the file being in the correct location and being referenced correctly:
GET http://localhost:5000/fonts/fontawesome-webfont.woff2?v=4.7.0 net::ERR_ABORTED
GET http://localhost:5000/fonts/fontawesome-webfont.woff?v=4.7.0 net::ERR_ABORTED
GET http://localhost:5000/fonts/fontawesome-webfont.ttf?v=4.7.0 404 (Not Found)
I looked into this issue and found that it could be related to the static file handler. I then modified the app.UseStaticFiles() to take an options parameter like this:
StaticFileOptions staticFileOptions = new StaticFileOptions();
FileExtensionContentTypeProvider typeProvider = new FileExtensionContentTypeProvider();
if (!typeProvider.Mappings.ContainsKey(".woff2"))
{
typeProvider.Mappings.Add(".woff2", "application/font-woff2");
}
if (!typeProvider.Mappings.ContainsKey(".woff"))
{
typeProvider.Mappings.Add(".woff", "application/font-woff");
}
if (!typeProvider.Mappings.ContainsKey(".ttf"))
{
typeProvider.Mappings.Add(".ttf", "application/font-ttf");
}
staticFileOptions.ContentTypeProvider = typeProvider;
app.UseStaticFiles(staticFileOptions);
But I still got the error above.
Does anyone know what I am doing wrong? I can add font awesome through its CDN or add the font awesome CSS file in my application if need be.
That policy quoted in the error message in the question has default-src 'self' but the policy shown from your meta element doesn’t. That seems to indicate your document’s being served with a policy in a Content-Security-Policy HTTP header in addition to the one in the meta.
And that other policy is relatively strict in that it has default-src 'self' and no style-src. So while you’re specifying another less-strict policy using that meta, the problem’s that the way CSP works when you specify multiple policies is, the most-strict policy always wins. So your browser’s basically ignoring your meta policy and just using the policy specified in the HTTP header.
The solution is: find the place in the server code which is adding that Content-Security-Policy HTTP header, and either change it so it has the exact policy you want, or else remove that part of the server code altogether, and instead just set the policy using the meta element.
This question already has answers here:
Ways to circumvent the same-origin policy
(8 answers)
Closed 8 years ago.
I have a website on http://www.domain_a.com where I need to make a request to a JSON API hosted on http://domain_b.com. Now when I try the following:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$.getJSON({
url: "http://domain_b.com/service_api/v1/find.json?name=abcd",
dataType: 'json',
beforeSend: setHeader,
success: function(data) {console.log (data)}
});
function setHeader (xhr) {
console.log (xhr);
xhr.setRequestHeader("Authorization", "sdkfhberg83hr87234bf87r432");
console.log (xhr);
}
});
</script>
</head>
<body>
</body>
</html>
I get this error in the firebug console:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://domain_b/service_api/v1/find.json?name=abcd. This can be fixed by moving the resource to the same domain or enabling CORS.
Am I doing something wrong, or is it simply not allowed (would surprise me)?
Cross-origin resource sharing is what you want. Basically, The Same Origin Policy allows only the scripts that are running on the same domain to access eachothers DOM, for security reasons, ofcourse. So unless the API that you're calling does not support - ie. have the following header for response - "Access-Control-Allow-Origin", "*" , this call is not allowed.
Not entirely sure about this - but try making use of PHP proxy
Also, this might be useful to you.
I am trying to create a link on my web page that when accessed will cause an HTTP request with an unordinary method to be sent (for the sake of the example, the method is POSTS).
I know that regular HTML forms support only GET and POST and AJAX should support PUT and delete. Is there a way to issue requests with a method different than these standard HTTP methods?
Thanks in advance.
==============
After the tips I adjusted my page to have the following HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url:"http://www.example.php",type:"POSTS",dataType:"html"});
});
});
</script>
</head>
<body>
<button>Send Request</button>
</body>
</html>
Surprisingly, this did not work in Chrome and Firefox but did work in an updated version of IE:
When I tried to issue the request using Firefox and Chrome, the browser issued a request with an OPTIONS method and the following header:
Access-Control-Request-Method: POSTS
Only IE issued the request as per the requirement - using the POSTS HTTP method.
===
Turns out that the aforementioned HTML doesn't work.(The desired request with the custom header is not issued).
As I mentioned above, firefox and chrome issue an initial request with an Access-Control-Request-Method header , while IE doesn't issue a request at all.
I adjusted the browser security settings (enabled "Access data sources across domains),
but still, the browser did not issue the request.
I'm guessing there needs to be some further adjustments in the browser setting, does anyone have an idea how this can be solved?
Quick answer yes if you use javascript.
Methods are defined by the standard along with status codes however they are open to extension. Such as webdav which increases the method vocabulary.
Not all browsers support arbitrary http methods especially older versions of IE (surprise surprise!)
So you could simply have a link / button which calls a javascript function which makes your http request.
Simply using jQuery:
var request = $.ajax({
url: "script.php",
type: "POSTS",
data: { id : menuId },
dataType: "html"
});
request.done(function( msg ) {
$( "#log" ).html( msg );
});
request.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});