I have a built a Music Player Component with ember consuming the SoundCloud Api
Suddenly in Chrome i start getting this error notification in my console anytime i play a song in my application plus the songs does not play.
See the error
Report Only] Refused to connect to 'https://ec-media.sndcdn.com/YEqcIen0Pkq6.128.mp3?f10880d39085a94a0418a7ef69…fe493d321fb2a6a96186dcb97beab08f3cea5ad8b42d543c3edc7371f0eb5b2b00ba96395e' because it violates the following Content Security Policy directive: "connect-src 'self' data: cf-media.sndcdn.com ws://localhost:35729 ws://0.0.0.0:35729 http://0.0.0.0:4200/csp-report".
It is complaining about the "connect-src 'self' data: cf-media.sndcdn.com ws://localhost:35729 ws://0.0.0.0:35729 http://0.0.0.0:4200/csp-report".*"
This is because after bit of research i have modified in environment.js the content security policy like this
contentSecurityPolicy: {
// 'connect-src': "'self' data: https://cf-media.sndcdn.com",
'connect-src': "'self' data: cf-media.sndcdn.com",
},
Before my change the problem was the same and this was the console log error
So my question is, how can i give these permission in order to not violate the
Content Security Policy directive for 'connect-src'? What other action have i to take now?
Again the problem is only in Chrome
It looks like your property is not well-formed. Try:
contentSecurityPolicy: {
'connect-src': "'self' https://ec-media.sndcdn.com",
},
To more clearly address the content security policy and avoid further conflicts with more subdomains, I suggest changing it to be:
contentSecurityPolicy: {
'connect-src': "'self' https://*.sndcdn.com",
},
Related
We have implemented CSP policy in report-only mode and as part of violations received we have got a violation in "connect-src" directive where the blocked URI is mentioned as "properties".
It is difficult to identify what needs to be whitelisted and what is getting blocked. Mentioning the JSON below for reference.
Note: Violations were specific to Android Chrome Browser
JSON:
{
csp-report":
{
"document-uri": "https://*************",
"effective-directive": "connect-src",
"original-policy": "*policy*",
"blocked-uri": "properties",
"line-number": 2,
"column-number": 535042,
"source-file": "https://**************",
"status-code": 200
}
}
Just wanted to understand why this violation is coming up.
Usually such violations related to browser specific functions or browser extensions. So, this is not real URI blocked but something that browser tried to do.
In most cases such violations can be ignored until you get exact complains from users.
I'm building a chrome extension using manifest version 3. The entire point of the extension is to inject an external dynamic script into the page (for example, https://example.com/).
I keep receiving the following message:
Refused to load the script 'https://example.com/' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
I tried to add a content_security_policy entry to my manifest file, but I can't seem to get it to work. Assuming that this script that I'm loading will call several additional scripts from different domains, what can be done to enable this?
manifest V2
In Chrome extension with manifest V2 you can do it like this:
manifest.json
"content_security_policy": "script-src 'self' https://example.com/;
manifest V3
Remotely hosted code
In Manifest V3, all of your extension's logic must be bundled with the extension. You can no longer load and execute a remotely hosted file. A number of alternative approaches are available, depending on your use case and the reason for remote hosting.
source: https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#remotely-hosted-code
Manifest v3 Method
I could not find a way to include a remote script but if it is possible that you can download the external JS file and place it as part of the extension, it will be bundled along with the extension's code and you can refer to it from within your content-scripts as well using a relative URL. Here is how you can do it.
Assuming that you have example.js downloaded and placed alongside your content script files. In your manifest.json, add the file to web_accessible_resources
web_accessible_resources: [
...
{
resources: ['example.js'],
matches: ['*://*/*'],
},
],
Next, add the following code to you content-script.
const inject = () => {
var r = document.createElement('script');
r.setAttribute('src', 'chrome-extension://' + chrome.runtime.id + '/example.js');
(document.head || document.documentElement).appendChild(r);
};
inject();
Note that the example.js file will be immediately injected and executed as soon as the content-script that has the above code runs. Also make sure that if you have a bundler like webpack in place, you need to configure it to include the JS file in the final bundle.
You could use the declarativeNetRequest API to add a rule to modify the CSP header to whatever you need it to be to accept that script. For example something like:
{
"id": 11,
"priority": 1,
"action": {
"type": "modifyHeaders",
"responseHeaders": [
{ "header": "Content-Security-Policy", "operation": "append", "value": "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://example.com" }
]
},
"condition": { "urlFilter": "my-domain.com", "resourceTypes": ["sub_frame"] }
}
I've been using helmet to implement Content-Security-Policy and have not had any problems until I upgraded the Node version I was using from 6 to 16.
I return a styled HTML element when the app first loads, and I use a nonce on the style tag. After upgrading node versions, nothing loads and I see this message in the browser console:
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-uXeTuzCq2Sp5MWrSBuypzA=='". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution.
Here is the CSP configuration that I am currently using with helmet.
const sources = [];
sources.push((req, res) => `'nonce-${res.cspNonce}'`);
sources.push("'self'");
app.use(
helmet.contentSecurityPolicy({
directives: {
defaultSrc: sources,
scriptSrc: sources,
styleSrc: sources,
frameAncestors: sources
}
})
);
I've tried different configurations for the directives but nothing is working.
I'm confused because the error message in the console suggests using a nonce, but I am using one. In the network tab I can see the CSP on the header and there is a nonce on the style tag as expected.
It ended up not being an issue with helmet, but with styled-components, a dependency of a front end library that was added along with the Node upgrade. I just had to add a __webpack_nonce__ along with the existing nonces and everything worked as expected.
I am trying to access a script from YouTube's iframe player API in order to play/pause a video, for a chrome extension. My JS is below (from https://developers.google.com/youtube/iframe_api_reference).
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('video', {
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
player.playVideo();
}
However, when I load the extension to Chrome, I get the following error:
Refused to load the script 'https://www.youtube.com/iframe_api' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
I tried adding the URL to the CSP in Manifest.json (below). I also removed all inline JS.
"content_security_policy": "script-src 'self' https://www.youtube.com/iframe_api; object-src 'self'"
Now, the extension fails to load with an error that my CSP value is invalid. Any idea what I'm doing wrong?
You can check the chrome.scripting.executeScript(), this allows you to load the library and then execute some code that uses it. To do so you need to have it in the same folder as the rest of the extension (just copy the library to a js file). The code that uses the library must be executed after the initial promise of chrome.scripting.executeScript is resolved.
https://developer.chrome.com/docs/extensions/reference/scripting/#usage
I'm building a Chrome Extension that interacts with an API that I wish to protect using Google recatcha, as I'm intending for it to be used beyond just the Chrome Extension. The API side is working, correctly verifying a recaptcha response with Google, however, displaying the recatcha widget inside the extension's browser action window is resulting in the following javascript error:
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('chrome-extension://pjhcgfibbbmibojnlkgjejaojpokgldl:80') does not match the recipient window's origin ('chrome-extension://pjhcgfibbbmibojnlkgjejaojpokgldl').
which is generated in recaptcha_en.js at the line:
(a.window || ne(a.Tg)).postMessage(JSON.stringify({
message: c || null ,
messageType: b
}), Zj(a.path));
The problem seems to be that the value of a.path is chrome-extension://pjhcgfibbbmibojnlkgjejaojpokgldl:80 but I don't know how I can affect this value.
The result of this error is that the recaptcha widget displays a message saying:
Please upgrade to a supported browser to get a reCAPTCHA challenge.
I'm displaying the widget via the auto render method, but have also tried the explicit method which results in the same error. For info, I'm using the following content_security_policy:
script-src 'self' https://*.google.com https://*.gstatic.com; object-src 'self'
Is there any way I can get this to work in my extension? And if not, what is the best alternative method for integrating recaptcha?
In recaptcha v3
manifest.json
"content_security_policy": "script-src 'self' https://.google.com https://.gstatic.com; object-src 'self'"
ADD CHROME EXTENCION ID TO ALLOWED DOMAINS IN RECAPTCHA ADMIN CONSOLE
chrome-extension://aailnablglhloogfnpkgddnjjfimhhhg
so you just put "aailnablglhloogfnpkgddnjjfimhhhg" without chrome-extension://