I'm developing a chrome extension for gmail application and i want to load our web application content through iframe. But i'm getting blocked frame even though, we add content secuirity policy tag in manifest.json. What is the right way to implement loading of cross origin domain content with iframe in gmail chrome extension?
Here is the error that i'm getting.
Refused to frame 'example.com/' because it violates the following Content Security Policy directive: "frame-src 'self' https://clients4.google.com/insights/consumersurveys/ https://calendar.google.com/accounts/ https://ogs.google.com https://onegoogle............etc.
Manifest File:
{
"name": "gmailext12",
"version": "1.0.0",
"manifest_version": 2,
"description": "gmailext12",
"icons": {
"16": "images/16.png",
"128": "images/128.png"
},
"background" : {
"scripts" : ["scripts/background.js"]
},
"browser_action": {
"default_icon": "images/16.png"
},
"content_security_policy": "script-src 'self' 'shakey' https://example.com; frame-src 'self' 'shakey' https://example.com; object-src 'self'",
"permissions": [
"activeTab",
"tabs"
]
}
Content.js
var iframe = document.createElement('iframe');
// Must be declared at web_accessible_resources in manifest.json
iframe.id = 'gmail-pega123';
// iframe.src = chrome.runtime.getURL('iframe.html');
iframe.src = 'https://example.com';
// Some styles for a fancy sidebar
iframe.style.cssText = '`enter code here`';
document.body.appendChild(iframe);
Related
Greets,
This is the manifest file that I have set up.
{
"manifest_version":2,
"name": "Hyperfect",
"version": "1.0",
"content_security_policy": "script-src 'self' 'unsafe-inline' https; style-src 'self' 'unsafe-inline';",
"description": "Simple shopee extension for Hyperfect",
"browser_action":{
"default_popup": "src/popup.html"
},
"content_scripts":[
{
"matches":[
"https://seller.shopee.com.my/portal/sale/order/*"
],
"run_at": "document_end",
"js":[
"src/script/jquery-3.6.0.js","src/script/content.js"
]
}
],
"permissions":[
"activeTab"
],
"background":{
"scripts":["src/script/event.js"],
"persistent": false
}
}
I have set the script-src to 'self' 'unsafe-inline' and any HTTPS: URL.
But I still get this warning.
Refused to load the script 'https://apis.google.com//scs/apps-static//js/k=oz.gapi.en.OxsXq8UvEOs.O/m=auth2,client/rt=j/sv=1/d=1/ed=1/am=AQ/rs=AGLTcCN7FQWUE2nltJhOBLbHOeQiriRsIg/cb=gapi.loaded_0' 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.
Adding https value should allow me to load any sources from HTTPS URL, right?
Lets say my extension have a background page that injects an external iframe that in turn runs a content script, something like it's shown in below. What mechanism would you suggest for me to check that the messages the background script receives via onConnect and onMessage come from the content script that loaded in the background page and not from any other eternal webpage?
background.js
import browser from 'webextension-polyfill';
var iframe = document.createElement("iframe");
iframe.src = 'https://example.com/favicon.ico';
document.body.appendChild(iframe);
manifest.json
{
"name": "My Extension",
"background": {
"scripts": ["background.js"],
"persistent": true
},
"manifest_version": 2,
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"content_scripts": [
{
"matches": ["https://example.com/favicon.ico"],
"js": ["content.js"],
"all_frames": true
}
],
"permissions": [
"*://example.com/*",
"webRequest",
"webRequestBlocking"
]
}
I am working on a chrome extension and it does work locally but it gives the following error when launched as a chrome extension:
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' https://apis.google.com". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.
my manifest file is:
{
"manifest_version": 2,
"name": "Fake News Launcher",
"description": "Check the integrity of news!",
"version": "1.1.0",
"icons": {
"128": "icon_128.png"
},
"browser_action": {
"default_icon": "icon.png",
"default_popup": "index.html"
},
"permissions": [
"activeTab"
]
}
I tried adding "content_security_policy":"script-src 'self' https://apis.google.com; object-src 'self'" but that did not fix the issue
the function that causes the error is
async function onTestChange() {
let key = window.event.keyCode;
let string = $(".fact-input").val();
//! If the user has pressed enter
if (key === 13) {
try {
const res = await fetch("http://127.0.0.1:5000/create/", {
method: "POST",
body: JSON.stringify({
string,
}),
headers: {
"Content-Type": "application/json",
},
});
const data = await res.json();
loadingbar(parseInput(data));
} catch (err) {
console.log(err);
}
}
}
Refused to execute inline event handler because...
it means you use inline event handlers in the tags like: <tag onclick='some_js_code'>, <select onchange='js_funct()', <body onload='some_handler()'> etc.
All these requires 'unsafe-inline' in script-src (there is not any workaround using 'unsafe-hashes' and 'hash-value' tokens with cross browser support for now).
Best way to avoid this error and not to use 'unsafe-inline' is to hang event handlers via addEventListener().
Since you do use jQuery it's very easy.
PS: You did not shown full CSP, but the fetch("http://127.0.0.1:5000/create/" requires connect-src 'self' http://127.0.0.1:5000 in Dev and connect-src 'self' in Prod.
Chrome invalidate a valid manifest
While importing valid unpacked extension.
(manifest confirmed by https://manifest-validator.appspot.com/)
this error appears, and the extension do not get loaded.
Only one of 'browser_action', 'page_action', and 'app' can be
specified.
Manifest does not contain duplication of the neither mentioned in the error.
manifest.json
{
"applications": {
"gecko": {
"id": "addon#example.com",
"strict_min_version": "42.0"
}
},
"background": {
"scripts": ["jquery.js", "my-background.js"],
"page": "my-background.html"
},
"browser_action": {
"default_icon": "userInterface/browser_action_button/airplay_icon.svg",
"default_title": "LightDictionary",
"default_popup": "userInterface/browser_action_button/popup.html"
},
"commands": {
"_execute_browser_action": {
"suggested_key": {
"default": "Ctrl+Shift+Y"
}
}
},
"content_security_policy": "script-src 'self' https://example.com; object-src 'self'",
"content_scripts": [
{
"exclude_matches": ["*://developer.mozilla.org/*"],
"matches": ["*://*.mozilla.org/*"],
"js": ["borderify.js"]
}
],
"default_locale": "en",
"description": "none",
"icons": {
"48": "userInterface/browser_action_button/airplay_icon.svg",
"96": "userInterface/browser_action_button/airplay_icon.svg"
},
"manifest_version": 2,
"name": "LightDictionary",
"page_action": {
"default_icon": {
"19": "userInterface/browser_action_button/airplay_icon.svg",
"38": "userInterface/browser_action_button/airplay_icon.svg"
},
"default_title": "LightDictionary",
"default_popup": "userInterface/browser_action_button/popup.html"
},
"permissions": ["webNavigation"],
"version": "0.1",
"web_accessible_resources": ["images/my-image.png"]
}
I have talked to Mozilla MDN maintainer on their IRC channel and I came to the conclusion, that the so called "cross-browser extension" manifest.json published on:
https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json
Was incompatible with Chrome, and only works on the Firefox browser due to:
Chrome has strict check on the manifest, and the way Chrome handles manifest differs from the way Firefox does it. Chrome is slow to adopt technologies that are supported by the Firefox.
So, the only way to make the manifest cross-browser compatible: is
to take quick manifest.json example suggested by MDN
load it into Chrome (chrome://extensions, Turn on developer mode, Load Unpacked)
check the errors and remove what is asked by the chrome.
Things to keep in mind:
Chrome does not support .svg format icons, this leads to not showing specified icon. While Firefox does support it, it is suggestive to not use svg for a cross browser extension.
Futher comment to read: https://hacks.mozilla.org/2017/06/cross-browser-extensions-available-now-in-firefox/#comment-21268
You can only have one of the properties that it specifies in the error.
Only one of 'browser_action', 'page_action', and 'app' can be specified.
You have both a browser_action property & a page_action property in your json object.
Remove one of these from the object to fix it.
the script of my first GC extension doesn't work when loaded as .crx . i've checked the debugging section and this is my error:
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' https://www.lolking.net/".
popup.html:8
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' https://www.lolking.net/".
popup.html:9
so i guess the error is from the manifest.json file:
{
"name": "LolKing Searcher",
"version": "1.1",
"manifest_version": 2,
"description": "Search your LoL profile",
"content_security_policy": "script-src 'self' https://www.lolking.net/; object-src 'self'",
"permissions": [
"tabs",
"http://*/*/"
],
"content_scripts": [
{
"matches": ["http://*/*/","https://*/*/"],
"js": ["popup.js"]
}
],
"browser_action": {
"default_title": "LolKing Searcher",
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
also every advice is well accepted!
The error, as it says in the error itself, is in your popup.html file. You can't have any inline code in html files, that includes inline event handlers like onclick="dosomething()". Move all of your inline code to an external file.
Example:
popup.html
<head>
<script src="popup.js"></script>
</head>
<body>
<input type="text" id="userText" placeholder="Enter Summoner's name" />
<input type="button" id="button" value="Search"/>
</body>
popup.js
window.onload = function(){
document.getElementById("button").addEventListener("click",check,false);
};
function check(){
var val = document.getElementById("userText").value;
if(val != ""){
var url="http://www.lolking.net/search?name=" + val;
chrome.tabs.create({url:url});
}
else
alert("Please enter a name");
}
Also you need to remove your content scripts section because you are trying to inject your popup code into every page which just doesn't make any sense.