Inline Script and Content Security Policy

[tarantir]

Hello, I’m beginning to adapt my custom applications to TRUNK. I have some inline Java Script which is not working in all browsers (Chrome/Firefox). I suspect some of the same with broken functionality within Gallery and mydms.

I see reference to egw_framework::csp_script_src_attrs(array(‘unsafe-eval’, ‘unsafe-inline’)); in many commits however I was unsuccessful in getting my app to function.

Anyway, what is the ideal method of handling inline script. I have done some searching put possibly overlooked some documentation. I would appreciate any information you could provide on the topic.

Thank you,
Randy

[ngegw]

The ideal method of handling them is to remove them to a static file, then
include the file.
That’s probably not helpful though, so see:
calendar/inc/class.calendar_uiviews.inc.php:149
for a concrete example of how it can be changed in egroupware.

It calls egw_framework::csp_script_src_attrs(), see
phpgwapi/inc/class.egw_framework.inc.php line 107 or:
http://svn.stylite.de/egwdoc/nav.html?phpgwapi/inc/class.egw_framework.inc.php.html#csp_script_src_attrs

By the looks of it, it would have to be done before anything is output.

Nathan

[tarantir]

Thank you this was definitely a step in the right direction as it fixed my java controls.

However, in my custom application (Amateur Radio Logbook) I have a HTML area defined in my eTemplate. In the Class I am sending javascript to the HTML area “map” to insert a Google Map (see below). On a side note the map renders fine in Internet Explorer but not Firefox or Chrome.

$content = $this->data + array(
‘msg’ => $msg,
‘history’ => array(
‘id’ => $this->data[‘COL_PRIMARY_KEY’],
‘app’ => ‘radio’,
),
‘map’ => ‘

function initialize() {
var mapLatLon = new google.maps.LatLng(’.$this->data[‘COL_LAT’].’,’.$this->data[‘COL_LON’].’);
var mapOptions = {
center: mapLatLon,
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(“egw_qso_map”),mapOptions);
var contentString = “

Callsign: '.$this->data[‘COL_CALL’].'
Band: '.$this->data[‘COL_BAND’].'
Mode: '.$this->data[‘COL_MODE’].'
Distance(km): ‘.$this->data[‘COL_DISTANCE’].’”;

                                    var infowindow = new google.maps.InfoWindow({
                                            content: contentString,
                                            maxWidth: 75
                                    });
                                    var marker = new google.maps.Marker({
                                            position: mapLatLon, 
                                            map: map,
                                            title:"'.$this->data['COL_CALL'].'"
                                    });
                                    google.maps.event.addListener(marker, "click", function() {
                                            infowindow.open(map,marker);
                                    });
                            }
                            google.maps.event.addDomListener(window, "load", initialize);
                            </script>',

);

[ngegw]

Thank you this was definitely a step in the right direction as it fixed my
java controls.

However, in my custom application (Amateur Radio Logbook) I have a HTML
area
defined in my eTemplate. In the Class I am sending javascript to the HTML
area “map” to insert a Google Map (see below). On a side note the map
renders fine in Internet Explorer but not Firefox or Chrome.

You have 2 strategies to consider. One is to figure out how to set CSP for
your app, so it still works as it is. The other is to convert your
application to follow the new (in development, still mostly undocumented -
sorry) standards. Either way, you will have to do some adjusting to allow
the Google code.

Some links for CSP info

A pretty good intro to practical CSP, using google API as an example
http://www.html5rocks.com/en/tutorials/security/content-security-policy/

The spec:
http://www.w3.org/TR/CSP/

This refers specifically to chrome extensions, but much of the information
may also be relevant:

http://stackoverflow.com/questions/12129077/content-security-policy-cannot-load-google-api-in-chrome-extension

The “eTemplate2” way

SInce you mentioned you were adapting your applications to TRUNK, this is
probably the way you want to go. This is generally what we’re doing to all
the other apps, rather than a full conversion guide.

To turn on eTemplate2, change your creation of etemplate from something
like this:
$template = new etemplate();
to something like this:
$template = new etemplate_new();
Also, make sure your templates have been exported to XML, they go in
egroupware/your_app/templates/default/

eTemplate2 uses a file, your_app/js/app.js, as the primary javascript file
for your application. It is automatically loaded.
If your application uses etemplate2 and your javascript file extends AppJS
(see phpgwapi/js/jsapi/app_base.js), you get automatic instantiation via
init(), and notification when your template is fully rendered via
et2_ready(). You can look at some of the other applications for examples
of how to structure the file, but basically you would wind up with
something like:

app.your_app = AppJS.extend(
{
appname: ‘your_app’,

init: function()
{
// call parent
this._super.apply(this, arguments);

// This will still be refused unless CSP is adjusted to allow it
this.egw.includeJS(‘https://maps.googleapis.com…’);
},

// Template and all files are fully loaded before this is called
et2_ready: function(et2)
{
// call parent
this._super.apply(this, arguments);

// Pull variables from content & init map
this.initialize(
this.et2.getArrayMgr(“content”).getEntry(‘COL_LAT’) || ‘’,
this.et2.getArrayMgr(“content”).getEntry(‘COL_LON’) || ‘’,
…
);
},

/**

• Initialize the map - relatively unchanged, I think
• …
  */
  initialize: function(lat, lon, …)
  {
  …
  }
  });

Of course, everywhere that says your_app needs to be changed to your actual
application’s name. I’m also probably forgetting a few critical details…

Nathan

[tarantir]

Thank you, I appreciate the guidance!

[ngegw]

Hello, finally getting around to porting the google map functionality in my
application.
…
For original etemplate I simply had the loaded into $content[‘map’] all was
good.

Now that I have moved my js to app.js, what is the method to populate
$content[‘map’]?

I’m not sure what exactly you’ve got going on there, but I would send
the map details in content,
then pull them out in js and pass them to a function that uses the
Google API to put them in:

In et2_init(et2):

var points = et2.getArrayMgr(‘content’).getEntry(‘map’);
var map_widget = et2.getWidgetById(‘map’);
this.load_map(map_widget, points);

where load_map takes the points & does stuff with them.

(Note that the “Right Way” would be to make a map widget that extends
et2_valueWidget, but that’s a whole new issue)

Nathan

---

---

eGroupWare-developers mailing list
eGroupWare-developers@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/egroupware-developers

[tarantir]

Thank you for the guidance. This turned out to be very tricky as you have to call the external Google JS prior to using the Google Maps API. Inserting Google JS in the app.js init or the map function itself did not work. After googleing around I found a method that utilized a callback and that appears to be working.

I have uploaded a very simple example.

example_app.js (1.62 KB)

enjoy!

[ngegw]

Thank you for the guidance. This turned out to be very tricky as you have to
call the external Google JS prior to using the Google Maps API. Inserting
Google JS in the app.js init or the map function itself did not work. After
googleing around I found a method that utilized a callback and that appears
to be working.

I have uploaded a very simple example.

Glad you got it going, thanks for posting the working example.

Nathan

---

---

eGroupWare-developers mailing list
eGroupWare-developers@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/egroupware-developers