CSP settings for separate js file - apache

Does script-src parameter using hashes works for inline scripts only?
This config works for for me (inline script in HTML code):
Apache config:
Header set Content-Security-Policy-Report-Only: "script-src 'sha256-U82JgRvGjy4mzia+G8DutvX8V/W33LIoO2UuwT+rE/0='"
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a simple paragraph.</p>
</body>
<script>alert('hello everybody')</script>
</html>
where:
U82JgRvGjy4mzia+G8DutvX8V/W33LIoO2UuwT+rE/0= is a sha256 hash code of
alert('hello everybody') converted into base64
Once I moved the same script alert('hello everybody') into separate js file test.js and have updated index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a simple paragraph.</p>
</body>
<script src="test.js"></script>
</html>
CSP blocking test.js file, however hash for it still the same
[Report Only] Refused to load the script 'http://localhost/test.js'
because it violates the following Content Security Policy directive:
"script-src 'sha256-U82JgRvGjy4mzia+G8DutvX8V/W33LIoO2UuwT+rE/0='".
Note that 'script-src-elem' was not explicitly set, so 'script-src' is
used as a fallback.
What parameter should I use for CSP to allow local js file by hash?

This should allow loading a script from the same source: "script-src 'self';"

Related

Implement HTML like template in PUG

I am trying to implement html like template in pug with
#{name}
but this is not working it double prints it then I use pipeline character
|#{name}
but its output is <h1>This Is Content<h1&gt
my full template is
<html lang="en">
<head>
SomeRandomStuff
</head>
<body>
|#{Content}
</body>
Scripts
</html>
Use !{name} instead.
<html lang="en">
<head>
SomeRandomStuff
</head>
<body>
!{Content}
</body>
Scripts
</html>
See docs here.

I got 'is not defined' when trying to access class from a CDN loaded on Vue js

While trying to use Twilio TaskRouter JS SDK on Vue JS, that you have load through CDN.
<!DOCTYPE html>
<html lang="en">
<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="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://sdk.twilio.com/js/taskrouter/v1.21/taskrouter.min.js" integrity="sha384-5fq+0qjayReAreRyHy38VpD3Gr9R2OYIzonwIkoGI4M9dhfKW6RWeRnZjfwSrpN8" crossorigin="anonymous"></script>
</body>
</html>
I want to init my worker like this:
export const initWorker = (token) => {
return new Twilio.TaskRouter.Worker(token);
}
but it's giving me this error: 'Twilio' is not defined. but it's actually working and returning the Worker object. is there way to ignore or to say Vue js that I'm expecting Twilio?
Found a fix, you have to tell eslint that you'll have this as global, there are two ways to go:
add this before your variable call:
/* global Twilio */
or edit your eslint config:
'globals': {
'Twilio': 'readable'
},

Phalcon: how to require a .php file in my volt file?

I am using Phalcon for the 1st time and I would like to migrate the content of an index.php file from my website into the index.volt file (in app/views).
So I tried to use require 'header.php' that I normally use in my index.php in the index.volt, like so:
index.volt
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Phalcon PHP Framework</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="../../public/css/index.css">
</head>
<?php require 'layouts/header.php' ?>
<body onload="document.body.classList.add('loaded')" id="cool">
<div class="container-fluid" style="height: 400px;">
{{ content() }}
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA-5rrW4FY43z63mHhwpv7BIZE3bv8Ws_A&libraries=places"></script>
<script type="text/javascript" src="../../public/js/index.js"></script>
</body>
</html>
But I get this error:
Warning: require(layouts/header.php): failed to open stream: No such
file or directory in
C:\xampp\htdocs\care\cache\c__xampp_htdocs_care_app_views_index.volt.php
on line 14
Fatal error: require(): Failed opening required 'layouts/header.php'
(include_path='C:\xampp\php\PEAR') in
C:\xampp\htdocs\care\cache\c__xampp_htdocs_care_app_views_index.volt.php
on line 14
So is there a particular way to include php file with phalcon ?
Thank you

SoundCloud: callback.html popup doesn't close

I've registered my SoundCloud app.
I'm trying to implement the SoundCloud JS example code with the "callback.html" API
https://developers.soundcloud.com/docs/api/sdks#authentication http://connect.soundcloud.com/examples/recording.html
When I upload a recording, I get the authorization-login popup.
After I login, the popup says "This popup should auto close..."
But the popup doesn't close.
And the recording isn't uploaded.
I'm positive SC.initialize has my correct "clientID" and is referencing "callback.html" correctly from my directory.
Am I missing something? maybe "client secret"?
SC.initialize({
client_id: "xxxxxxxxxxxxxxxxxxxxxx",
redirect_uri: "http://www.example.com/callback.html"
});
One time (fluke) instead of the normal pop msg "This should close", the message said "502 Bad Gateway". But I havent been able to reproduce this msg.
SoundCloud's sample code is broken.
This is from SoundCloud's callback.html
<body onload="window.opener.setTimeout(window.opener.SC.connectCallback, 1)">
This is how I got it to work:
<body onload="window.setTimeout(window.opener.SC.connectCallback, 1)">
SoundCloud's connectCallback uses this.location to collect the OAuth access token. If you set the timeout on window.opener, inside connectCallback this will refer to your app's window and the location will be your main page. Whereas setting it on window will bind this to the callback popup window, and this.location will contain the access token in the query arguments.
I also faced the same issue, and found the solution, if you change your callback.html to below two options, it will work -
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Connect with SoundCloud</title>
</head>
<body onload="window.opener.setTimeout(window.opener.SC.connectCallback, 1)">
<b style="text-align: center;">This popup should automatically close in a few seconds</b>
<script type="text/javascript">
window.opener.SC.connectCallback.call(this);
</script>
</body>
</html>
Or
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Connect with SoundCloud</title>
</head>
<body onload="setTimeout(window.opener.SC.connectCallback)">
<b style="text-align: center;">This popup should automatically close in a few seconds</b>
</body>
</html>

dojo.image.Gallery does not work with addOnLoad?

This is really weired, I'm trying to use dojo.image.Gallery, but when I require the dojox.image.Gallery, the dojo.addOnLoad() does not fire, however if i comment the line which require dojo.image.Gallery, i can see 'onload' in the console, code is like below
anything i missed?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Testing the Image Gallery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require('dojox.image.Gallery');
dojo.require('dojox.data.FlickrRestStore');
dojo.require("dojo.parser"); // find widgets
dojo.addOnLoad(function(){
console.log('onload');
});
</script>
</head>
<body>
<h1 class="testTitle">dojox.image.Gallery</h1>
</body>
</html>
I do have this same problem. After some effort, I happened to find out that with the full version dojo-release-1.7.2-src, it WORKS. Does it have anything to do with javascript compression? Kindly share if any one happens to know why...