I've been attempting to fix a content security policy error for my firefox addon (a new tab page) for weeks now. I've tried many different things but to no avail :(
My content security policy in manifest.json (v2):
"content_security_policy": "script-src * 'self' 'unsafe-inline' 'unsafe-eval' https://stripe.com/ https://js.stripe.com/ https://js.stripe.com/v3/ http://api.weatherapi.com/ https://api.mapbox.com/ localhost: blob:* ; worker-src * blob: ; child-src * blob: ; img-src * data: blob: ; connect-src * https://*.tiles.mapbox.com https://api.mapbox.com https://events.mapbox.com localhost: blob:* ;",
Errors shown in console:
Loading failed for the <script> with source “https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js”. index.html:1:1
Loading failed for the <script> with source “https://js.stripe.com/v3/”. index.html:1:1
Loading failed for the <script> with source “https://unpkg.com/flowbite#1.5.1/dist/flowbite.js”. index.html:1:1
Content Security Policy: The page’s settings blocked the loading of a resource at https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js (“script-src”).
Content Security Policy: The page’s settings blocked the loading of a resource at https://js.stripe.com/v3/ (“script-src”).
Content Security Policy: The page’s settings blocked the loading of a resource at https://unpkg.com/flowbite#1.5.1/dist/flowbite.js (“script-src”).
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). 2 moz-extension:1:1
Index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="icon" href="%PUBLIC_URL%/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#000000">
<meta name="description" content="The most beautiful places in the world on every new tab.">
<meta http-equiv="Content-Security-Policy" content="script-src * 'self' 'unsafe-inline' 'unsafe-eval' https://stripe.com/ https://js.stripe.com/ https://js.stripe.com/v3/ http://api.weatherapi.com/ https://api.mapbox.com/ localhost: blob:* ; worker-src * blob: ; child-src * blob: ; img-src * data: blob: ; connect-src * https://*.tiles.mapbox.com https://api.mapbox.com https://events.mapbox.com localhost: blob:* ;">
<!-- Flowbite -->
<link rel="stylesheet" href="https://unpkg.com/flowbite#1.5.1/dist/flowbite.min.css" />
<!-- Mapbox -->
<script src="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js"></script>
<!-- Stripe -->
<script src="https://js.stripe.com/v3/"></script>
<script>
mapboxgl.workerUrl = "https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl-csp-worker.js";
</script>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png">
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Wanderlust - Exploring new locations around the world.</title>
<script>
// It's best to inline this in `head` to avoid FOUC (flash of unstyled content) when changing pages or themes
if (
localStorage.getItem('color-theme') === 'dark' ||
(!('color-theme' in localStorage) &&
window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
</script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="https://unpkg.com/flowbite#1.5.1/dist/flowbite.js"></script>
</body>
</html>
I have an inline script, a personal API i request from, and external scripts (mapbox, flowbite, stripe and a few others). Thanks for your help!
Related
I have a simple method to upload a file in a service
def addFileTest(): Action[AnyContent] = Action { request: Request[AnyContent] =>
val file = request.body.asMultipartFormData.get.file("file")
val fileRef = FileRef(file.get.ref.path.toUri.toString)
//FileRef is wrapper to File
Ok("File uploaded " + fileRef.getContentAsStringSync)
}
and a file with the following content:
<!-- saved from url=(0120)https://energyplus.net/weather-download/europe_wmo_region_6/NLD//NLD_Amsterdam.062400_IWEC/NLD_Amsterdam.062400_IWEC.epw -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body>
LOCATION,Napier,Hawkes Bay,New Zealand,TMY2 NIWA 2980 D96484,933730,-39.46,176.86,12,3
When I try to upload a file on my local machine, everything works fine, I get this result back:
File uploaded <!-- saved from url=(0120)https://energyplus.net/weather-download/europe_wmo_region_6/NLD//NLD_Amsterdam.062400_IWEC/NLD_Amsterdam.062400_IWEC.epw -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body>LOCATION,Napier,Hawkes Bay,New Zealand,TMY2 NIWA 2980 D96484,933730,-39.46,176.86,12,3
Deploying the service on AWS with an SSL certificate I get a 403:
<html>
<head><title>403 Forbidden</title></head>
<body bgcolor="white">
<center><h1>403 Forbidden</h1></center>
</body>
</html>
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
Any ideas why I get a 403 on AWS? From my testing it looks like the HTML tag is at fault. I tried to remote debug it but it is not reaching my code.
I have an existing Flutter app (runs correctly on Android/IOS) using Firestore.
GOAL:
I'd like to first have it support web
I'd like to host it on Firebase hosting
Results so far:
When running in local, blank page
When deploying to firebase, doesn't even seem to run index.html
What I tried
According to this tutorial :
a) Added a Web App on my firebase project
b) npm install -g firebase-tools
c) firebase login
d) firebase init
==> I select Firestore and Hosting
==> Use existing project, select my project
==> use all defaut setup (except build/web folder for public directory)
e) flutter channel dev
flutter upgrade
flutter config --enable-web
f) flutter create .
g) flutter build web
h) I then copy all the content from build/web to /web folder, add the CDN from firebase at the bottom of the body, then call Firebase JS SDKs the following way :
ERRORS
I get this error when running locally on chrome:
(index):53 Uncaught ReferenceError: firebase is not defined
As for using firebase deploy, the page says I successfully set up hosting but does not show index.html
For reference :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="kidz_happy_pawn">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<title>kidz_happy_pawn</title>
<link rel="manifest" href="manifest.json">
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<link rel='stylesheet' type='text/css' href='/resources/tutorial/css/example.css'>
</head>
<body>
<div id="message">
<h2>Welcome</h2>
<h1>Firebase Hosting Setup Complete</h1>
<p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go
build something extraordinary!</p>
</div>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-firestore.js"></script>
<script>
var firebaseConfig = {
apiKey: "xxx-from-firebase",
authDomain: "xxx-from-firebase",
databaseURL: "xxx-from-firebase",
projectId: "xxx-from-firebase",
storageBucket: "xxx-from-firebase",
messagingSenderId: "xxx-from-firebase",
appId: "xxx-from-firebase",
measurementId: "xxx-from-firebase"
};
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
depends on how you have set up your firebase apis.from flutter fire here is how you should set it up.
In your app directory, edit web/index.html to add the following:
`
<body>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-firestore.js"></script>
<!-- ADD THIS BEFORE YOUR main.dart.js SCRIPT -->
var firebaseConfig = {
apiKey: "",
authDomain: "[YOUR_PROJECT].firebaseapp.com",
databaseURL: "https://[YOUR_PROJECT].firebaseio.com",
projectId: "[YOUR_PROJECT]",
storageBucket: "[YOUR_PROJECT].appspot.com",
messagingSenderId: "",
appId: "1:...:web:",
measurementId: ""
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
`
working on the ember-cli-101 tutorial, and searches have shown that others have posted on this issue, but it all dates back to a year ago and Ember 1.x. I'm using 2.4.3, though. here is how it goes.
bower install picnic --save
ember-cli-build.js:
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
// Add options here
});
app.import('bower_components/picnic/releases/plugins.min.css');
app.import('bower_components/picnic/releases/picnic.min.css');
return app.toTree();
};
app/index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Borrowers</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
{{content-for "head"}}
<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/borrowers.css">
{{content-for "head-footer"}}
</head>
<body>
{{content-for "body"}}
<script src="assets/vendor.js"></script>
<script src="assets/borrowers.js"></script>
{{content-for "body-footer"}}
</body>
</html>
starting the server....
$ ember server --proxy http://api.ember-cli-101.com
version: 2.4.2
Proxying to http://api.ember-cli-101.com
Livereload server on http://localhost:49152
Serving on http://localhost:4200/
The Broccoli Plugin: [SimpleConcat: Concat: Vendor Styles/assets/vendor.css] failed with:
Error: ENOENT: no such file or directory
and the fix is... in ember-cli-build.js, you should only have this line for Picnic
app.import('bower_components/picnic/picnic.min.css');
there is no plugins.min.css file anymore and picnic.min.css is in Picnic's root directory, not picnic/releases.
When I SSH into a server, running gcloud compute instances list should list the instances but instead I see the following in the terminal:
<html lang=en>
<meta charset=utf-8>
<meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width">
<title>Error 403 (Forbidden)!!1</title>
<style>
*{margin:0;padding:0}html,code{font:15px/22px arial,sans-serif}html{background:#fff;color:#222;padding:15px}body{
margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}* > body{background:url(//www.google.com/images
/errors/robot.png) 100% 5px no-repeat;padding-right:205px}p{margin:11px 0 22px;overflow:hidden}ins{color:#777;text-de
coration:none}a img{border:0}#media screen and (max-width:772px){body{background:none;margin-top:0;max-width:none;pad
ding-right:0}}#logo{background:url(//www.google.com/images/branding/googlelogo/1x/googlelogo_color_150x54dp.png) no-r
epeat;margin-left:-5px}#media only screen and (min-resolution:192dpi){#logo{background:url(//www.google.com/images/br
anding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat 0% 0%/100% 100%;-moz-border-image:url(//www.google.com/
images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) 0}}#media only screen and (-webkit-min-device-pixel-rati
o:2){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat;-we
bkit-background-size:100% 100%}}#logo{display:inline-block;height:54px;width:150px}
</style>
<a href=//www.google.com/><span id=logo aria-label=Google></span></a>
<p><b>403.</b> <ins>That’s an error.</ins>
<p>Your client does not have permission to get URL <code>/0.1/meta-data/service-accounts/default/acquire?scope=http
s%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloud-platform%20htt
ps%3A%2F%2Fwww.googleapis.com%2Fauth%2Fappengine.admin%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcompute</code> fro
m this server. <ins>That’s all we know.</ins>
I have the correct scopes added to the machine so this should work. It's also peculiar that a command line application tool is printing out HTML (´・ω・｀)
Trying to access any other Google API from the VM also fails.
It seems that gcloud is trying to authenticate, but failing to do so, because the service account on the vm is damaged in some way. The error should probably be cleverer in such a circumstance. I will relay it to the teams responsible for the tool.
I try connect pycharm/small python projects to my redmine server, but rest api return this:
Error fetching issues for: /projects//issues.xml?key=(my secret key)&fields%5B%5D=status_id&operators%5Bstatus_id%5D=o&values%5Bstatus_id%5D%5B%5D=1&per_page=10, HTTP status code: 200
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=UTF-8'>
<meta name="VERSION" content="">
<meta name="DATA" content="fwdnode7-bl.web-hosting.com (my redmine server)">
<link href=" " rel="shortcut icon" type="image/x-icon">
<title></title>
</head>
<frameset rows='100%, *' frameborder=no framespacing=0 border=0>
<frame src="http://(my redmine server)" name=mainwindow frameborder=no framespacing=0 marginheight=0 marginwidth=0></frame>
</frameset>
<noframes><h2>Your browser does not support frames. We recommend upgrading your browser.</h2><br><br>
<center>Click <a href="http://(my redmine server)" >here</a> to enter the site.</center>
</noframes>
</html>
Information about environment:
Redmine version 2.5.1.stable.13174
Ruby version 2.0.0-p481 (2014-05-08) [x86_64-linux]
Rails version 3.2.18
Environment production
Database adapter Mysql2
REST API and JSON are enabled in redmine's setting
How can I resolve this issue?