I have integrated the prizmDoc to our angular application and working perfectly in my local env. But in our STG I got an error saying 'unsafe-eval' is not allowed. According to prizmDoc v13.22 updated documentation, we must allow "script-src unsafe-eval" in Content Security Policy, but unfortunately we are not permitted to include 'unsafe-eval' to our CSP. Is there any other way I can convert the code 'new function' that making an error? Thank you in advance.
Link to viewer-asset files(css,js) of prizmDoc 13.22 -
viewer-assets
Here is the error in my console:
main.93f7f0f31b5d6421.js:1 ERROR EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' *.datadoghq-browser-agent.com".
at new Function (<anonymous>)
at Function.template (underscore.min.js:6:15234)
at new Viewer (viewer.js:230:17)
at $.fn.pccViewer (viewer.js:14118:20)
at T1.displayFile (main.93f7f0f31b5d6421.js:1:1946385)
at re._next (main.93f7f0f31b5d6421.js:1:1945936)
at re.__tryOrUnsub (main.93f7f0f31b5d6421.js:1:411612)
at re.next (main.93f7f0f31b5d6421.js:1:410711)
at re._next (main.93f7f0f31b5d6421.js:1:409695)
at re.next (main.93f7f0f31b5d6421.js:1:409361)
Here is the documentation of prizmDoc v13.22
prizmDoc v13.22
I tried to use other version of prizmDoc viewer-assets but no luck.
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'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://
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",
},