I am using 3 online fonts url in my chrome extension given below
<link rel="stylesheet" href="https://fonts.cdnfonts.com/css/axiforma" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
in my manifest.json file I define the header in 3 ways like below both with font-src and style-src
"content_security_policy": "font-src 'self' https://themes.googleusercontent.com/ 'self' https://fonts.gstatic.com/ 'self' https://fonts.cdnfonts.com/; script-src 'self' https://maps.googleapis.com; object-src 'self'"
"content_security_policy": "font-src https://themes.googleusercontent.com/ https://fonts.gstatic.com/ https://fonts.cdnfonts.com/; script-src 'self' https://maps.googleapis.com; object-src 'self'"
Also added style-src with font-src but still it is showing violation error.
Need help what I am doing wrong.
Thanks
in my manifest.json file I define the header in 3 ways like below both
with font-src and style-src
"content_security_policy": "font-src 'self' https://themes.googleusercontent.com/ 'self' https://fonts.gstatic.com/ 'self' https://fonts.cdnfonts.com/; script-src 'self' https://maps.googleapis.com; object-src 'self'"
"content_security_policy": "font-src https://themes.googleusercontent.com/ https://fonts.gstatic.com/ https://fonts.cdnfonts.com/; script-src 'self' https://maps.googleapis.com; object-src 'self'"
You did shown only 2 CSPs from 3. Let me guess, the third has font-src related list:
font-src https://themes.googleusercontent.com/;
because it is it that is contained in the error messages.
You need to define only ONE CSP, in case of multiple CSP they combines with logical "AND" - are allowed the sources that meet all CSPs simultaneously (sources should pass unscrathed through all CSPs).
Therefore your CSP should be:
style-src 'self' https://fonts.cdnfonts.com https://fonts.googleapis.com https://fonts.googleapis.com;
font-src 'self' https://fonts.gstatic.com https://fonts.cdnfonts.com;
object-src 'self';
script-src 'self' https://maps.googleapis.com;
*all host-sources from <link rel="stylesheet" should be in style-src directive because those are a styles.
** trailing slash / can be omitted.
** in the font-src it need to specify host-names from src: in CSS constructs kind of:
#font-face {
font-family: 'Reenie Beanie';
font-style: normal;
font-weight: 400;
src: local('Reenie Beanie'), local('ReenieBeanie'), url(https://fonts.gstatic.com/s.roboto/v20/KFOlCnqE.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Related
I am developing a codeigniter4 web-application. I use apache as my web server. When I enable CSP in app/Config/App.php using
public $CSPEnabled = true; , I get the image in my web page blocked. How would I unblock images from same origin and disable others by customizing CSP behaviour?.
The head tag of my code is:
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png" />
<link rel="icon" type="image/png" href="../assets/img/favicon.png" />
<title><?=$title?></title>
<!-- Fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
<!-- Font Awesome Icons -->
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
<!-- Nucleo Icons -->
<link href="../assets/css/nucleo-icons.css" rel="stylesheet" />
<link href="../assets/css/nucleo-svg.css" rel="stylesheet" />
<script src="https://cdn.tailwindcss.com"></script>
<!-- Main Styling -->
<link href="../assets/css/soft-ui-dashboard-tailwind.css?v=1.0.4" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script>
<style>
.errors {font-size:small;color:red;}
.error {font-size:small;color:red;}
.alert {font-size:small;color:red;}
</style>
</head>
The portion of the page that contains the image which gets blocked after enabling csp is:
<div class="w-full max-w-full px-3 lg:flex-0 shrink-0 md:w-6/12">
<div class="absolute top-0 hidden w-3/5 h-full -mr-32 overflow-hidden -skew-x-10 -right-40 rounded-bl-xl md:block">
<div class="absolute inset-x-0 top-0 z-0 h-full -ml-16 bg-cover skew-x-10" style="background-image: url('../assets/img/curved-images/curved6.jpg')"></div>
</div>
</div>
</div>
My ContentSecurityPolicy.php file has the following settings:
public $reportOnly = true;
public $styleSrc = ['self','https://fonts.googleapis.com/css','https://cdn.tailwindcss.com'];
public $imageSrc = ['self', 'https://cdn.tailwindcss.com'];
Some of the stylings also doesnt work after enabling CSP.
You will have to whitelist the domain from which you load the image in your website at, app\Config\ContentSecurityPolicy.php.
The line to be modified is, public $imageSrc = 'self';
self - You can load images from the same domain as your website.
Example:
public $imageSrc = ['self', 'data: w3.org/svg/2000', 'https://www.google.com'];
With this you can load images from your same domain, google.com and inline SVG images which is usually used in Twitter bootstrap.
Enviroment:
Java 11
Jboss 7.2
Primefaces 8
JSF 2.3
I am trying to update a combobox with an ajax render event and the web does not update the combobox and I get this error.
How could I solve this?
ERROR js console
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-ZGRkM2ZjYTAtNzE3MC00MmU4LWE4YmMtOWNmYjUyNjYyMTNh'". Either the 'unsafe-inline' keyword, a hash ('sha256-PoJBY0XvVwb+v60hF7CQr9zfBAfr3HAsK3P9TEKUqGs='), or a nonce ('nonce-...') is required to enable inline execution.
runScript # jsf.js.xhtml?ln=javax.faces:1
runScripts # jsf.js.xhtml?ln=javax.faces:1
doUpdate # jsf.js.xhtml?ln=javax.faces:1
response # jsf.js.xhtml?ln=javax.faces:1
onComplete # jsf.js.xhtml?ln=javax.faces:1
AjaxEngine.req.xmlReq.onreadystatechange # jsf.js.xhtml?ln=javax.faces:1
web.xml
...
<!--Primefaces Content Security Policy-->
<context-param>
<param-name>primefaces.CSP</param-name>
<param-value>true</param-value>
</context-param>
...
face.xhtml
...
<p:selectOneMenu id="cbxOrganisme" value="#{userBean.selected.organism}"
valueChangeListener="#{userBean.onChangeOrganism}"
converter="vTableConverter" filter="true"
rendered="true" required="true" style="width: 90%;">
<f:ajax event="change" execute="#this" listener="#{userBean.onChangeOrganism}" render="cbxCenter"/>
<f:selectItem itemLabel="#{messages['seleccionar']}" itemValue="" noSelectionOption="true"/>
<f:selectItems value="#{userBean.organisms}" var="organism"
itemLabel="#{sessionBean.localeCode eq 'ca'? organism.nomCA:organism.nomES}"
itemValue="#{organism}"/>
</p:selectOneMenu>
...
web.html
<html><head id="j_idt2">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<title>Govern de les Illes Balears - APP
</title><link type="text/css" rel="stylesheet" href="/APP2/javax.faces.resource/theme.css.xhtml?ln=primefaces-bootstrap">
<link type="text/css" rel="stylesheet" href="/APP2/javax.faces.resource/fa/font-awesome.css.xhtml?ln=primefaces&v=8.0">
<link type="text/css" rel="stylesheet" href="/APP2/javax.faces.resource/govern-ie.css.xhtml?ln=css">
<link type="text/css" rel="stylesheet" href="/APP2/javax.faces.resource/buttons.css.xhtml?ln=css">
<link type="text/css" rel="stylesheet" href="/APP2/javax.faces.resource/components.css.xhtml?ln=primefaces&v=8.0">
<script type="text/javascript" src="/APP2/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&v=8.0" nonce="">
</script><script type="text/javascript" src="/APP2/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&v=8.0" nonce="">
</script><script type="text/javascript" src="/APP2/javax.faces.resource/core.js.xhtml?ln=primefaces&v=8.0" nonce=""></script>
<script type="text/javascript" src="/APP2/javax.faces.resource/components.js.xhtml?ln=primefaces&v=8.0" nonce=""></script>
<script type="text/javascript" src="/APP2/javax.faces.resource/idlemonitor/idlemonitor.js.xhtml?ln=primefaces&v=8.0" nonce=""></script>
<script type="text/javascript" src="/APP2/javax.faces.resource/touch/touchswipe.js.xhtml?ln=primefaces&v=8.0" nonce=""></script>
<link type="text/css" rel="stylesheet" href="/APP2/javax.faces.resource/fileupload/fileupload.css.xhtml?ln=primefaces&v=8.0">
<script type="text/javascript" src="/APP2/javax.faces.resource/fileupload/fileupload.js.xhtml?ln=primefaces&v=8.0" nonce=""></script>
<script type="text/javascript" src="/APP2/javax.faces.resource/jsf.js.xhtml?ln=javax.faces" nonce=""></script>
<script type="text/javascript" nonce="">if(window.PrimeFaces){PrimeFaces.settings.locale='ca';}</script><script type="text/javascript" nonce="">$(function(){PrimeFaces.csp.init('ZTFhYjQ3MDItYzM5Yy00MGU5LWE2NDEtZDFjMTExNDEzMWU4');;});</script>
<script async="async" src="https://www.googletagmanager.com/gtag/js?id=UA-133688930-1" nonce=""></script>
<script nonce="">
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-133688930-1');
function redirectPrincipal() {
let context = "APP/";
let mainPage = "principal.xhtml";
let url = window.location.href;
if (url.endsWith(context)) {
window.location.replace(url + "principal.xhtml");
}
}
redirectPrincipal();
</script>
<link rel="SHORTCUT ICON" href="http://www.name.es/webname/favicon.ico"><script type="text/javascript" src="/APP2/javax.faces.resource/calendar-localization.js.xhtml?ln=js" nonce=""></script>
<script type="text/javascript" src="/APP2/javax.faces.resource/functions.js.xhtml?ln=js" nonce=""></script>
<meta name="description" content="APP. Versió: 8.0.0-">
<meta name="author" content="Govern de les Illes Balears"></head>
<body>
...
</body>
</html>
Content Security Policy known limitations
Currently CSP in combination with <f:ajax> cannot be used with all Faces implementations / versions.
MyFaces supports it since 2.3-next (which will be 4.0 in the future), Mojarra doesn't support it in general: https://github.com/eclipse-ee4j/mojarra/issues/4542
As workaround, you can always use <p:ajax> instead.
Using Vue SPA distributed by Express.
this is my helmet code in express
app.use(helmet.contentSecurityPolicy({
directives: {
defaultSrc: ["'self'"],
styleSrc: ["'self'","'unsafe-inline'" ,'unpkg.com', 'cdn.jsdelivr.net',
'fonts.googleapis.com', 'use.fontawesome.com'],
scriptSrc: ["'self'","'unsafe-inline'",'js.stripe.com'],
frameSrc: ["'self'",'js.stripe.com'],
fontSrc:["'self'",'fonts.googleapis.com','fonts.gstatic.com','use.fontawesome.com','cdn. joinhoney.com']
}
}));
Doing this produces no errors in the browser console but my page loads blank , am I missing something ?
Here is the stuff i'm trying to import in my index.html
<script src="https://js.stripe.com/v3/"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css#3.5.2/animate.min.css">
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700%7CMaterial+Icons' rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
Solved my issue by adding "'unsafe-eval'" to my scriptSrc
I want the current tab url to be display in the pop up after clicking the extension. I have a popup html and popup.js. For testing purpose, I been trying to alert the tab url instead of replacing the html element.
Manifest.json
{
"manifest_version": 2,
"name": "first extension",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"default_title": "Share it!"
},
"permissions": [
"activeTab"
]
}
popup.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="popup.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
URL:
<p>www.blahblah.com</p>
<form>
Title:<br />
<input type="text" name="title"><br />
Description:<br />
<textarea rows="4"></textarea><br />
<button>Get</button>
</form>
</body>
</html>
popup.js
chrome.tabs.getCurrent(function(tab){
alert(tab.url);
}
);
You may want to follow the suggested workaround in this link. Try this query chrome.tabs.query(object queryInfo, function callback) which will get all tabs that have the specified properties, or all tabs if no properties are specified.
chrome.tabs.query({currentWindow: true, active: true}, function(tabs){
console.log(tabs[0].url);
});
Here another thread which might also help: How to get current URL in Chrome on click of the button
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
// Create and draw the visualization.
new google.visualization.PieChart(document.getElementById('visualization')).
draw(data, {title:"So, how was your day?"});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
The above code generates a pie chart for us in an html file. It works when I open it in a browser. Let's call the file popup.html.
Then I want to make it a Chrome extension with the following manifest file:
{
"name": "History Visualizer",
"version": "1.0",
"manifest_version": 2,
"description": "Helps us analyze history stats in a visual way",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
But when I hit the icon button, the pie chart just won't load. Anyone help me?
EDIT: error message after inspecting the popup is as follows.
Refused to load script from 'http://www.google.com/jsapi' because of
Content-Security-Policy. Refused to execute inline script because of
Content-Security-Policy.
You need to specify permissions for your extension in manifest.json in order to use resources from google.com:
"permissions": [
"http://*.google.com/"
],
Or if this won't work, try allowing your extension to access all URLs:
"permissions": [
"<all_urls>"
],
Read more about permissions here.