I try to parse some site and execute script in Cordova InAppBrowser's method executeScript on iOS and return some result in callback function, but get this error:
Refused to load gap-iab://InAppBrowser1249228873/%5Bnull%5D because it does not appear in the frame-src directive of the Content Security Policy.
I understand, that gap-iab:// scheme should be included to Content Security Policy in <meta> tag, but code is executing not on my site and I don't have access to it.
Can anyone suggest a decision to resolve this problem?
P.S. On Android executeScript works perfectly.
You could use nginx to proxy the HTML page you are trying to load. You'd set up nginx to proxy the site you are loading in the InAppBrowser, and use the add-header to add a Content-Security-Policy in the response with "'default-src' gap: gap-iab:"
The one issue you may have is if the original server already includes a strict Content-Security-Policy, because the strictest content-security-policy will get applied.
Related
I keep getting this error in my Console when I run reCaptcha V3:
recaptcha__en.js:310 [Report Only] Refused to create a worker from 'https://www.google.com/recaptcha/api2/webworker.js?hl=en&v=v1548052318968' because it violates the following Content Security Policy directive: "worker-src 'none'".
The script runs ok, but it keeps looking for the worker and I have no clue where to fix this. Is this a common issue or is it something I missed in the documentation?
It seems you have a property in your HTTP header that modify Content-Security-Policy.
Can you inspect your HTTP header on the page and see if you have : 'worker-src 'none'' somewhere ?
This property disallow all the web workers in your page, you can modify it to allow sources, see more in the MDN documentation :
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/worker-src
I have a page with some D3 javascript on. This page sits within a HTTPS website, but the certificate is self-signed.
When I load the page, my D3 visualisations do not show, and I get the error:
Mixed Content: The page at 'https://integration.jsite.com/data/vis' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://integration.jsite.com/data/rdata.csv'. This request has been blocked; the content must be served over HTTPS.
I did some research and all I found what the JavaScript will make the call with the same protocol that the page was loaded. So if page was loaded via https then the rdata.csv should also have been requested via https, instead it is requested as http.
Is this because the certificate is self-signed on the server? What I can do to fix this, other than installing a real SSL certificate?
What I can do to fix this (other than installing a real SSL certificate).
You can't.
On an https webpage you can only make AJAX request to https webpage (With a certificate trusted by the browser, if you use a self-signed one, it will not work for your visitors)
Steps to Allow Insecure Content in Chrome
To allow insecure content on individual sites within Chrome, click on the lock icon in the URL bar, then click 'Site settings'.
There you will see a list of various permissions the page has. Choose 'Allow' next to 'Insecure content'.
Now your HTTPS site can access HTTP endpoint
I had the same issue for my angular project, then I make it work in Chrome by changing the setting. Go to Chrome setting -->site setting -->Insecure content --> click add button of allow, then add your domain name
[*.]XXXX.biz
Now problem will be solved.
You will be able to solve the error by adding this code to your html file:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
If any solutions don't work, try this solution.
I solved the problem adding a slash at the end of the requesting url
This way: '/data/180/'
instead of: '/data/180'
As for me, I had same warning.
I fixed it at URL request.
I had excessive '/'.
Before:
const url = ${URL}search/movie/?api_key=${API_KEY}&query=${movie};
After:
const url = ${URL}search/movie?api_key=${API_KEY}&query=${movie};
I had the same problem but from IIS in visual studio, I went to project properties -> Web -> and project url change http to https
One solution here server side end point which you access via https, which then makes the call to whichever http url, and then and returns the result. In other words, making your own little HTTPS proxy to access the http resource
update core_config_data
set value='X-Forwarded-Proto'
where path='web/secure/offloader_header'
this is easy,
if you use .htaccess , check http: for https: ,
if you use codeigniter, check config : url_base -> you url http change for https.....
I solved my problem.
I am injecting some JS code on various websites (using Selenium and Python) to send POST requests to my local web server. On some websites it works fine. But mostly, I don't get the requests. Figured it's because of the Content Security Policy.
For example, when I try to run the code using Console in Chrome on github.com, I get a following error:
Refused to connect to 'http://10.50.50.127:7777/' because it violates
the following Content Security Policy directive: "connect-src 'self'
uploads.github.com status.github.com collector.githubapp.com
api.github.com www.google-analytics.com ...".
My code looks like this:
function sendData() {
var request = new XMLHttpRequest();
request.open('POST', 'http://10.50.50.127:7777', false);
request.send("test");
}
I did some research on my own, and found a possible solution - to use a local proxy server and send data to a relative path like "/test". But it's pretty complicated to write a proxy server from scratch.
So, what can I do to overcome this Content Security Policy?
If your using Chrome and you want to disable Content Security Policy you can also use a plugin called Disable Content-Security-Policy from Chrome Web Store. This is the plugin for Chrome to disable headers.
I inject JS via Tampermonkey (Chrome) and this works fine.
If you controlled over both of sides then you can use.
https://easyxdm.net/wp/
Regards
I figured it! Turns out you can just disable all of the security checks:
chrome_options = webdriver.ChromeOptions()
chrome_options.add_argument('--disable-web-security')
chrome_options.add_argument('--allow-running-insecure-content')
browser = webdriver.Chrome(chrome_options=chrome_options)
Is there a way to globally catch mixed content errors?
To be clear: I don't want to allow the insecure content, all I want to do is handle the error gracefully.
Backstory: I'm integrating programmatic ads, that is i have to include some script tag, which returns some more JavaScript, which can load even more resources, etc...
It is impossible for me to control, what's coming to my website and sometimes those resources include http resources, which throw a mixed content error. I#m then left with an empty ads container, which looks kind of ugly. Also, I could try to resell this ad-space, since the first try failed.
I already tried window.onerror, but with no avail.
There is no way to catch mixed content warnings, as they have no relation to JavaScript and are handled by your browser instead.
What you can do instead is use Upgrade-Insecure-Requests header to prevent browser from loading unsafe content entirely. And, depending on your use case, you may use MutationObserver to react to changes in your HTML, or listen to Error Events on document.body during capture phase to react to errors:
<html>
<head>
<meta
http-equiv="Content-Security-Policy"
content="upgrade-insecure-requests"
/>
</head>
<body>
<script>
const el = document.createElement("img");
el.src = "http://unsafeimg";
document.body.appendChild(el);
document.body.addEventListener(
"error",
(err) => {
console.log("Failed to load\n", err.target);
},
/* Notice the true value here. It is required because Error Events do not bubble */
true
);
</script>
</body>
</html>
Another option would be to set up a Service Worker to intercept and handle insecure requests. This is probably the best solution, as this gives you full overview of what data your website it trying to load.
Sounds like you are having an issue specifically revolving around fixing mixed content policies. There are many approaches to tackle and arrive at a solution.
My recommendation is to go off some documentation provided and referenced by Google: https://web.dev - Fixing Mixed Content.
Mixed content occurs when initial HTML is loaded over a secure HTTPS connection, but other resources (such as images, videos, stylesheets, scripts) are loaded over an insecure HTTP connection. This is called mixed content because both HTTP and HTTPS content are being loaded to display the same page, and the initial request was secure over HTTPS.
First off mixed content will occur when such initial-based HTML is transferred over the network through a secure HTTPS connection. Although, the problem arises when other resources as you stated such as:
Images
Videos
Stylesheets
Scripts
...are loaded over an insecure HTTP connection. This is the definition of a mixed content issue described. It is because of an issue pertaining to assets both HTTP and HTTPS content that is being requested and loaded to display on the website of the desired origin. And the main issue is the initial request was originally sent over secure over the HTTPS protocol.
Note: Before continuing, when requesting any of these subresources overusing the insecure HTTP transfer protocol, will open up vulnerabilities of the entire origin site. Such vulnerability attacks are named on-path attacks.
Depending on the browser your website user base is primarily targeting, there are fixes and preventions to take note of being rolled out by browsers such as Google Chrome. Which will upgrade passive mixed content where it is possible. Such a process will be deciding if the resource asset is available over HTTPS, but determine if it was created to be served over the HTTP protocol, the browser will load the HTTPS version instead. So in conclusion, it will disregard the HTTP resource.
Content Security Policy (CSP)
You need to reference the below section of https://web.dev - Fixing Mixed Content linked here. It will allow you to utilize a browser-based implementation that may be used to solve and manage mixed content issues. Which allows and opens up opportunities for different enforcement policies to be implemented.
To enable CSP, you have the opportunity to set up your site to return the Content-Security-Policy HTTP header. Which has replaced the X-Content-Security-Policy older policy.
My suggestion is to make use of the <meta> HTML element. This will allow you to customize which domains you trust in regards to CSP in general and implement different customizations using this element.
This is an example where you do wish to allow any resource content from a trusted domain, and you may use alternative formatting to allow sub-domains and other aspects to grant desired outcomes. Notice the formatting, following the subdomain setting.
Content-Security-Policy: default-src 'self' example_trusted.com *.example_trusted.com
So when utilizing this, you may take an approach for certain resources such as advertisements or images you decide to trust, but must be set up appropriately.
One vague example might be, without an asterick:
content="default-src 'self' https://example.com http://example.com:80/images/"
This concludes a result conclusive of:
https://example.com # Correct
http://example.com/images/ # (Missing) Incorrect Port
http://example.com:80/images/image.jpg - Correct Port
https://example.com:81 # (Missing) Incorrect Port
You may use approaches like these referenced here at Mozilla - Content-Security-Policy, which may help form a solution.
Or just go completely vulnerable.
content="default-src * 'unsafe-inline' 'unsafe-eval'"
Many references on StackOverflow such as How does Content Security Policy (CSP) work?, which was referenced in this post. Hope I was of some help.
Complete References List:
https://web.dev/fixing-mixed-content/
https://web.dev/fixing-mixed-content/#content-security-policy
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
How does Content Security Policy (CSP) work?
What I do whenever dealing with mixed content is updating the .htaccess file with the following:
Header always set Content-Security-Policy: upgrade-insecure-requests
That should by take care of the mixed content and make sure that you load everything trough HTTPS.
I have a page with some D3 javascript on. This page sits within a HTTPS website, but the certificate is self-signed.
When I load the page, my D3 visualisations do not show, and I get the error:
Mixed Content: The page at 'https://integration.jsite.com/data/vis' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://integration.jsite.com/data/rdata.csv'. This request has been blocked; the content must be served over HTTPS.
I did some research and all I found what the JavaScript will make the call with the same protocol that the page was loaded. So if page was loaded via https then the rdata.csv should also have been requested via https, instead it is requested as http.
Is this because the certificate is self-signed on the server? What I can do to fix this, other than installing a real SSL certificate?
What I can do to fix this (other than installing a real SSL certificate).
You can't.
On an https webpage you can only make AJAX request to https webpage (With a certificate trusted by the browser, if you use a self-signed one, it will not work for your visitors)
Steps to Allow Insecure Content in Chrome
To allow insecure content on individual sites within Chrome, click on the lock icon in the URL bar, then click 'Site settings'.
There you will see a list of various permissions the page has. Choose 'Allow' next to 'Insecure content'.
Now your HTTPS site can access HTTP endpoint
I had the same issue for my angular project, then I make it work in Chrome by changing the setting. Go to Chrome setting -->site setting -->Insecure content --> click add button of allow, then add your domain name
[*.]XXXX.biz
Now problem will be solved.
You will be able to solve the error by adding this code to your html file:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
If any solutions don't work, try this solution.
I solved the problem adding a slash at the end of the requesting url
This way: '/data/180/'
instead of: '/data/180'
As for me, I had same warning.
I fixed it at URL request.
I had excessive '/'.
Before:
const url = ${URL}search/movie/?api_key=${API_KEY}&query=${movie};
After:
const url = ${URL}search/movie?api_key=${API_KEY}&query=${movie};
I had the same problem but from IIS in visual studio, I went to project properties -> Web -> and project url change http to https
One solution here server side end point which you access via https, which then makes the call to whichever http url, and then and returns the result. In other words, making your own little HTTPS proxy to access the http resource
update core_config_data
set value='X-Forwarded-Proto'
where path='web/secure/offloader_header'
this is easy,
if you use .htaccess , check http: for https: ,
if you use codeigniter, check config : url_base -> you url http change for https.....
I solved my problem.