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://
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 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.
As stated in the title, I am trying to convert a web extension originally made for chrome to safari, using the tool documented at https://developer.apple.com/documentation/safariservices/safari_web_extensions/converting_a_web_extension_for_safari
The project is created, builds, and launches successfully, however when the extension is enabled in safari I get 2 errors:
"An extension with a non-persistent background page cannot listen to webRequest events."
"The service_worker script failed to load due to an error."
The first error is a general bug in chromium, which is fixed in v107 (verified in chrome canary), and the extension relies on this API to work.
I have no idea what to do with the second error, as it provides no information at all. The option to access the background page process is disabled in the Safari Develop menu with the message "service worker failed to load".
Here is my "manifest.json"
{
"name":"...",
"manifest_version":3,
"content_scripts":[{"all_frames":false,"js":["content.js"],"matches":["file://*/*","http://*/*","https://*/*"],"run_at":"document_idle","match_origin_as_fallback":true}],
"host_permissions":["<all_urls>"],
"permissions":["tabs","activeTab","storage","scripting","notifications","webRequest","downloads","alarms"],
"background":{"service_worker":"background.js"},
"content_security_policy":{"extension_pages":"script-src 'self' 'wasm-unsafe-eval'; object-src 'self'"},
"web_accessible_resources":[{"resources":["inject.js"],"matches":["<all_urls>"]}],
"action":{"default_popup":"popup.html"},
"icons":{"16":"resources/icons/16x16.png","32":"resources/icons/32x32.png","48":"resources/icons/48x48.png","128":"resources/icons/128x128.png"},
"commands":{"_execute_action":{"suggested_key":{"default":"Shift+Alt+C"},"description":"Start the extension"}},
"version":"0.7.5",
"description":"...",
"author":"..."
}
Does anyone have any good suggestions/knowledge on how to debug why the service worker doesn't load? The extension works without any errors or warnings in Google Chrome.
The webRequest api doesn't seem to be available in safari when using manifest v3, and is a blocking issue, meaning the problem cannot currently be solved.
Furthermore storage.session also caused the service worker to crash, but this could be mitigated by using storage.local instead.
Will have to wait and see if safari supports the webRequest API in the future.
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 working on a google chrome extension which has a button and a popup-overlay. Inside this extension, I set and remove cookies for the user. During development, the extension is making requests to localhost:8080 and (I assume) cookies are being set with localhost as the domain.
The problem is, I can't figure out how to view these cookies in a list from within Chrome. Firefox has a simple feature for viewing all the cookies set by various hostnames and Chrome appears to as well (although I'm less familiar with the developer tools in Chrome). But in Chrome's cookie list, I can't find any cookies set for localhost, nor any cookies for my extension, whatsoever. I've tried a few 3rd party cookie extensions too -- no luck there either.
Will cookies set by extensions appear in the same place as cookies set by normal websites? If so, why am I not seeing them? Help appreciated. Thanks!
Yes they appear in sample place.. I have written a sample extension for demonstration; Screen shot taken after testing this for developer.chrome.com domain
Sample Extension:
manifest.json
{
"name" : "Cookie API Demo",
"version" : "1",
"description" : "This is demonstration of Cookie API",
"permissions": [ "cookies","<all_urls>"],
"browser_action": {
"default_icon": "screen.png",
"default_popup":"popup.html"
},
"manifest_version": 2
}
popup.html
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
</body>
</html>
popup.js
function cookieinfo(){
chrome.cookies.getAll({},function (cookie){
console.log(cookie.length);
for(i=0;i<cookie.length;i++){
console.log(JSON.stringify(cookie[i]));
}
});
chrome.cookies.getAllCookieStores(function (cookiestores){
for(i=0;i<cookiestores.length;i++){
console.log(JSON.stringify(cookiestores[i]));
}
});
chrome.cookies.set({"name":"Sample1","url":"http://developer.chrome.com/extensions/cookies.html","value":"Dummy Data"},function (cookie){
console.log(JSON.stringify(cookie));
console.log(chrome.extension.lastError);
console.log(chrome.runtime.lastError);
});
chrome.cookies.onChanged.addListener(function (changeInfo){
console.log(JSON.stringify(changeInfo));
});
}
window.onload=cookieinfo;
Well I figured it out. It's a forehead slapper, but I'll post the answer here anyway in case others need help.
The cookies for the overlay extension only show up in the "developer tools" if you inspect the overlay element. That is, if you close the overlay and click the wrench button, developer tools, resources, cookies, the only thing you'll see there are cookies for the underlying page.
In order to see cookies for an overlay extension, right-click INSIDE the overlay and "inspect element". The cookies do show up there, and the "domain" they're attached to is the extension's unique id (kackjckjckjckcjckjckcjkcjckcj or what-have-you).
Random note: At the time of this writing, the Jquery cookies plugin always kills your cookies at session, no matter what you set the expiration to. In order to get my cookies to persist (survive) beyond browser close, I had to include good old-fashioned setCookie() and getCookie() functions and get rid of Jquery cookies.
In your browser - visit:
chrome://settings/cookies
I just set it as the address for a bookmark in chrome - and then just click my bookmark when I want to see the cookies